Linking WhatsApp Chat to a custom button

In this article, you will find how to make a custom button on your website trigger our WhatsApp Chat widget. 

1

First, you'll need to set the widget's layout to floating. To do it, go to Settings → Position and select the Floating Bubble position:

2

Then install the widget on your website using one of our Installation Tutorials and add the button you'd like to trigger the widget. 

3

Add this script right after the widget installation code:

<script>
window.addEventListener("DOMContentLoaded", function () {
  function initial(button) {
    var customButton = document.getElementById("custom-button");
    if (!!customButton) {
      customButton.addEventListener("click", function () {
        return button.click();
      });
    }
  }
  var interval = setInterval(function () {
    var widget = document.querySelector(
      "[class^='Bubble__BubbleComponent-sc']"
    );
    if (!!widget) {
      clearInterval(interval);
      return initial(widget);
    }
  }, 200);
});
</script><br>
	

4

Set the custom button's ID to the following: id='custom-button'. In case you'd like the button to have another ID, also change it in the script above.

Here's what the button's code may look like:

<button type="button" id="custom-button">Custom Button</button>
	

Voila! Now, the WhatsApp Chat widget is triggered by a custom button on your website.