Linking WhatsApp Chat to a custom button

In this article, you'll learn how to make a custom button on your website trigger your WhatsApp Chat widget. Let's see how to set it up 😊

1

Change the widget layout
First, change the widget layout to Floating Bubble. You can do this in Settings → Position:

2

Install the widget and add your button

Add the widget on your website and add the button that should trigger the widget. If you encounter difficulties with the installation, check out our tutorials - Installation Tutorials by Platform (CMS).

3

Add the trigger script
Insert the following script next to 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>
	

4

Assign an ID to your custom button
Assign the following ID to your custom button:

id='custom-button'
	

Here's an example of what the button's code may look like:

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

If you need the button to have a different ID, make sure to change it in the script above as well.

That's it. Now, your WhatsApp Chat widget will appear only upon clicking on the custom button!