Start chat with a custom button
Learn how to start and open the chat widget 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.
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. In the callback function, we call the Kustomer.start() method to start the chat.
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_KEYwith an API key with theorg.trackingrole 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_KEYwith an API key with theorg.trackingrole 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>
Updated almost 3 years ago