> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gleap.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# JavaScript SDK: Code snippet

> Install Gleap using the website code snippet with the Gleap JavaScript SDK. Follow the integration code examples.

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.

<Tabs>
  <Tab title="minified">
    ```html theme={null}
    <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>
    ```
  </Tab>

  <Tab title="Source">
    ```html theme={null}
    <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>
    ```
  </Tab>
</Tabs>
