Start chat with a custom button

You can configure the Kustomer Chat widget to start and open with a custom button.

This guide will walk you through two common scenarios for how to start chat with a custom chat widget button:

Start chat with a button: Start and open chat with a button after Kustomer loads.
Asynchronously load chat with a button: Load Kustomer Chat and start the widget with a button.

Start chat with a button

Configure Kustomer Chat to start and open the chat widget every time someone clicks the chat button.

🚧
Proactive chat is not supported when using a custom button.

You can add your own HTML <button> element, use the native addEventListener() method to listen for a click event in the browser, and then run the Kustomer.start() method in the callback.

If you've already called Kustomer.start() to start chat, you can just include Kustomer.open() in the event listener callback function.

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

<html>
  <body>
    
		<!--Sample button element to listen for clicks on.-->
    <button id="startChatButton">Start Chat Button</button>
		
    <!--Loads Kustomer Chat.-->
    <!--Replace `YOUR_API_KEY` with your Kustomer API key.-->
    <script
      src="https://cdn.kustomerapp.com/chat-web/widget.js"
      data-kustomer-api-key="YOUR_API_KEY"
    ></script>

    <!--The click event listener for the button. Starts chat when the button is clicked.-->
    <script>
      var startChatButton = document.getElementById('startChatButton');
      startChatButton.addEventListener('click', function() {
        Kustomer.start({}, function() {
          Kustomer.open() 
        });
      });
    </script>

  </body>
</html>

Asynchronously load and start chat

Configure Kustomer Chat to load the chat widget asynchronously after someone clicks the chat button.

When you want Kustomer Chat to load after someone clicks the chat <button> element, you will need to load Kustomer Chat asynchronously.

We've included a code sample below. In the code sample, the HTML <button> element has an id of startChatButton. We then query the button element with the native document.getElementById() method and add a click event listener for the button with the native addEventListener() method. In the event listener function we add an HTML <script> element to load Kustomer Chat asynchronously. We then add an event listener for the script element that listens for the kustomerLoaded event. After Kustomer Chat loads onto the page, we finally call Kustomer.start() in the second callback function to start chat.

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

<html>
  <body>

    <!--Sample button element to listen for clicks on.-->
    <button id="startChatButton">Start Chat Button</button>

   	<!--The click event listener for the button. Loads chat on click. Starts chat after chat loads.-->
    <!--Replace `YOUR_API_KEY`with your Kustomer API key.-->
    
    <script>
      var startChatButton = document.getElementById('startChatButton');

      startChatButton.addEventListener('click', function() {
        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);
      });
      
      window.addEventListener('kustomerLoaded', () => {
        Kustomer.start();
      });
    </script>
  </body>
</html>

Start chat with a custom button

Start chat with a button

🚧

📘
Note

Asynchronously load and start chat

📘
Note

Start chat with a button

🚧

📘Note

Asynchronously load and start chat

📘Note

📘
Note

📘
Note