Skip to content

README.md

Latest commit

 

History

History
70 lines (43 loc) · 3.36 KB

README.md

File metadata and controls

70 lines (43 loc) · 3.36 KB
Raw

Gleap JavaScript and TypeScript SDK

Gleap JavaScript SDK Intro

Add AI-native customer support, live chat, in-app bug reporting, a help center and surveys to websites and web apps using JavaScript or TypeScript with Gleap. Gleap is an Intercom alternative for software teams that connects customer conversations and feedback with product development.

SDK documentation · Website · Plans and pricing

📖 Docs & Examples

Checkout our documentation for full reference.

🚀 Getting started

1.) Create a Gleap account and project. See the current plans and trial terms.

2.) Include the Gleap JS SDK within your apps.

Installation via npm

Install the Gleap package via npm or yarn.

npm install gleap --save

Import the Gleap package.

import Gleap from 'gleap';

TypeScript projects: the package types the <gleap-*> elements for both React 18 and React 19. This requires @types/react 18.2.6 or newer (17.0.51+ / 16.14.41+ on older React lines). If you see errors like Type '"span"' is not assignable to type 'ElementType' after installing, run npm i -D @types/react@latest.

Initialize the SDK

Add the following code to initialize the Gleap JavaScript SDK. Replace "SDK-TOKEN" with your actual SDK token from the Gleap dashboard.

Gleap.initialize("SDK-TOKEN");

Data region (optional)

Projects hosted in the US data region select it before initializing. The default region is eu. See docs/custom-widget-domains.md for the host table and custom domains.

Gleap.setRegion("us");
Gleap.initialize("SDK-TOKEN");

Dark mode (optional)

The widget can match your app's dark/light mode. Enable "Adapt to dark / light mode" in the dashboard (Widget → Look & feel) and set the dark colors there: header colors, UI color and background. In dark mode the widget uses these dark colors, plus the dark logo, header image and composer glow set in the dashboard; without dark colors it keeps its normal colors. Override the scheme at runtime, e.g. from your own theme toggle (only takes effect while "Adapt to dark / light mode" is enabled in the dashboard; until you call it, the dashboard setting applies):

Gleap.setColorScheme("auto"); // follows your app; or "light" / "dark" to force a mode

Congrats, you are now all set! Report your first bug by using the feedback button.

🤝 Need help?

We are here to help! hello@gleap.io

Releasing

  1. Set version in package.json and add a ## X.Y.Z section to CHANGELOG.md.
  2. Merge to master. Cloudflare Workers Builds deploys the CDN build (sdk.gleap.io) on every push to master.
  3. git tag X.Y.Z && git push origin X.Y.Z (plain version, no v).

The Release workflow checks that the tag matches package.json, runs the tests, publishes gleap to npm with trusted publishing (GitHub OIDC, no token; prerelease tags go to the next dist-tag) and creates the GitHub release from the CHANGELOG section. One-time setup: npm trust github gleap --repo GleapSDK/JavaScript-SDK --file release.yml --allow-publish.