Skip to main content

JavaScript

Tags: JavaScript, React, Vue, Angular, Website, Web App

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.io.

🏗 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.

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(Gleap,t,i){if(!(Gleap=window.Gleap=window.Gleap||[]).invoked){for(window.GleapActions=[],Gleap.invoked=!0,Gleap.methods=["identify","setEnvironment","setTags","attachCustomData","setCustomData","removeCustomData","clearCustomData","registerCustomAction","trackEvent","log","preFillForm","showSurvey","sendSilentCrashReport","startFeedbackFlow","startBot","setAppBuildNumber","setAppVersionCode","setApiUrl","setFrameUrl","isOpened","open","close","on","setLanguage","setOfflineMode","initialize","disableConsoleLogOverwrite","logEvent","hide","enableShortcuts","showFeedbackButton","destroy","getIdentity","isUserIdentified","clearIdentity","openConversations","openConversation","openHelpCenterCollection","openHelpCenterArticle","openHelpCenter","searchHelpCenter","openNewsArticle","openChecklists","startChecklist","openNews","openFeatureRequests","isLiveMode"],Gleap.f=function(e){return function(){var t=Array.prototype.slice.call(arguments);window.GleapActions.push({e:e,a:t})}},t=0;t<Gleap.methods.length;t++)Gleap[i=Gleap.methods[t]]=Gleap.f(i);Gleap.load=function(){var t=document.getElementsByTagName("head")[0],i=document.createElement("script");i.type="text/javascript",i.async=!0,i.src="https://sdk.gleap.io/latest/index.js",t.appendChild(i)},Gleap.load(),
    Gleap.initialize("API_KEY")
}}();
</script>
info

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

đŸ˜ĩ‍đŸ’Ģ 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()})

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]