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


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


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

Add this script right after the widget installation code:
window.addEventListener("DOMContentLoaded", function () {
  function initial(button) {
    var customButton = document.getElementById("custom-button");
    if (!!customButton) {
      customButton.addEventListener("click", function () {
  var interval = setInterval(function () {
    var widget = document.querySelector(
    if (!!widget) {
      return initial(widget);
  }, 200);

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. 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us