JavaScript SDK setup

The Gleap SDK for JavaScript is the easiest way to integrate Gleap into your apps. Communicate with your users directly and build better software by discovering their everyday pain points. Gleap is your all-in-one customer feedback tool for apps and websites. For the SDK to work, you need an API key, which you can get for free at app.gleap.ai.

🏗 Installation

Installing the Gleap SDK takes only a few seconds. We do offer the following two installation methods. Code snippet: This method always loads the latest version of Gleap and is suitable for all use cases. npm / yarn: This method allows you to install the Gleap SDK locally and ship it together with your application. This method is usually used with frameworks like Angular, React or Vue.js.

Code snippet
npm / yarn

Add the following code snippet to the <head>-tag of your website or web app. Replace API-KEY with your API key. The snippet below will load the Gleap widget asynchronously, to ensure it won’t affect your page speed.

Code snippet

<script>
!function(){if(!(window.Gleap=window.Gleap||[]).invoked){window.GleapActions=[];const e=new Proxy({invoked:!0},{get:function(e,n){return"invoked"===n?e.invoked:function(){const e=Array.prototype.slice.call(arguments);window.GleapActions.push({e:n,a:e})}},set:function(e,n,t){return e[n]=t,!0}});window.Gleap=e;const n=document.getElementsByTagName("head")[0],t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://sdk.gleap.io/latest/index.js",n.appendChild(t),
    window.Gleap.initialize("API_KEY")
}}();
</script>

Install the Gleap package via npm or yarn.

npm install gleap --save

Initialize the Gleap SDK

import Gleap from "gleap";

// Please make sure to call this method only once!
Gleap.initialize("API_KEY");

Congrats! You are now all set 🎉 Report your first bug by using the feedback button

🌍 Data region

Gleap stores and processes your data in the region you selected at signup: EU (default) or US. If your project lives in the US region, select the region before initializing the SDK (requires SDK v18.0.0 or newer). EU projects don’t need this call.

Gleap.setRegion("us");
Gleap.initialize("API_KEY");

When using the code snippet, add window.Gleap.setRegion("us"); right before window.Gleap.initialize("API_KEY"). See Data regions for all hosts and details.

😵‍💫 Common pitfalls

Soft-reloading

Some application stacks clear all HTML & CSS while soft reloading (for example with Ruby on Rails). This results in the widget being removed. In order to re-initialize the widget, we recommend doing a soft re-initialization after the soft reload did take place.

// General
Gleap.getInstance().softReInitialize();

// Usage with Turbo (https://turbo.hotwired.dev/handbook/building)
document.addEventListener("turbo:load", function () {
  Gleap.getInstance().softReInitialize();
});

// Depending on your stack, you might need to add the following eventlistener.
document.addEventListener("turbolinks:before-render", function () {
  Gleap.getInstance().softReInitialize();
});

TypeScript errors after installing

The package ships type definitions for the <gleap-*> custom elements (for example <gleap-checklist> and <gleap-agent-conversation>) that work with 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). On older React typings you will see errors across your project right after installing, such as:

Type '"span"' is not assignable to type 'ElementType<any>'.

Update the React typings within your current major and the errors disappear. No React upgrade is needed.

npm i -D @types/react@latest

Screenshot rendering issues

If you are facing any screenshot rendering issues, there are a few different action items you could try right away. We have written a complete help page that you can find here.

🤝 Need help?

We are here to help! [email protected]

Get Started

SDKs

Kai Code

Server-side event tracking

Guides

🏗 Installation

Code snippet

🌍 Data region

😵‍💫 Common pitfalls

Soft-reloading

TypeScript errors after installing

Screenshot rendering issues

🤝 Need help?

​🏗 Installation

​Code snippet

​🌍 Data region

​😵‍💫 Common pitfalls

​Soft-reloading

​TypeScript errors after installing

​Screenshot rendering issues

​🤝 Need help?

🏗 Installation

Code snippet

🌍 Data region

😵‍💫 Common pitfalls

Soft-reloading

TypeScript errors after installing

Screenshot rendering issues

🤝 Need help?