JavaScript SDK: Code snippet

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.

HTML

<script>
!function(){if(!(window.Gleap=window.Gleap||[]).invoked){window.GleapActions=[];var e=new Proxy({invoked:!0},{get:function(e,n){return"invoked"===n?e.invoked:function(){var 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;var 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>

HTML

<script>
    !(function () {
    if (!(window.Gleap = window.Gleap || []).invoked) {
      window.GleapActions = [];

      // Create a Proxy to handle ANY method call dynamically
      var gleapProxy = new Proxy(
        {
          invoked: true,
        },
        {
          get: function (target, prop) {
            // Always return the invoked property if accessed
            if (prop === "invoked") {
              return target.invoked;
            }
            
            return function () {
              var args = Array.prototype.slice.call(arguments);
              window.GleapActions.push({ e: prop, a: args });
            };
          },
          set: function (target, prop, value) {
            target[prop] = value;
            return true;
          },
        }
      );

      // Replace window.Gleap with our proxy
      window.Gleap = gleapProxy;

      // Load the SDK script
      var head = document.getElementsByTagName("head")[0];
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.async = true;
      script.src = "https://sdk.gleap.io/latest/index.js";
      head.appendChild(script);

      // Queue the initialize call using the proxied version
      window.Gleap.initialize("API_KEY");
    }
  })();
</script>