Load chat asynchronously

Kustomer Chat should have minimal impact on the performance for your web site or web app.

While we strongly recommend that you install Kustomer Chat for synchronous loading, you can configure Kustomer Chat to load asynchronously.

Use asynchronous loading to use Kustomer Chat with Google Tag Manager (GTM).

Initialize chat asynchronously

Configure Kustomer Chat to load the chat widget asynchronously.

We've included a code sample below. We use the native window.addEventListener method to listen for the kustomerLoaded event. In the callback function, we include a call to run Kustomer.start() to start chat. We also dynamically add the SDK script in the HTML. Dynamically added elements are asynchronous by default and won't block rendering.

You can use the code snippet to add a custom Kustomer Chat widget that loads asynchronously:

📘
Note
To use the code sample below for your chat widget, replace YOUR_API_KEY with an API key with the org.tracking role for your Kustomer organization.

<html>
  <body>
    <script>
        window.addEventListener('kustomerLoaded', function() {
          Kustomer.start();
        });
      
        // Dynamically adds the SDK to the page.
        var script = document.createElement('script');
        script.src = 'https://cdn.kustomerapp.com/chat-web/widget.js';
        script.setAttribute('data-kustomer-api-key', 'YOUR_API_KEY');
        window.document.body.appendChild(script);
    </script>
  </body>
</html>

Initialize chat asynchronously

📘Note

📘
Note