🛠 Code snippet

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

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.

The code snippet loads the Gleap JS SDK and its CSS. Additionally, it prefills all required methods and caches their calls, even when the SDK itself hasn't been loaded yet. This way, you can directly call the SDK right after adding the code snippet to your <head>-tag.

minified
Source

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

<script>
  !(function (Gleap, t, i) {
    if (!(Gleap = window.Gleap = window.Gleap || []).invoked) {
      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 });
        };
      };
      for (t = 0; t < Gleap.methods.length; t++) {
        Gleap[(i = Gleap.methods[t])] = Gleap.f(i);
      }
      Gleap.load = function (e) {
        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>