Opening the Chat Widget from a custom button or a link

This article will explain what you need to do to launch your Tidio widget with a click of a button or a link embedded on your website.

In this article, you will learn: 

• Where to place the custom code
• How to open the widget with a custom button
• How to open the widget with a link
• How to hide the widget

When you do not want the chat widget icon to be visible to your visitors, and you only would like to give the ability to start a chat with you by clicking on a custom button or a link, you would need to implement some custom coding to your website. 

Where to place the custom code

First things first - locate the file that contains the </body> tag. 

While it might differ depending on how your website is built, the rule of thumb would be to search for the files with .html or .php extension. Usually, it will be either index.html or index.php, but there might also be some additional subpages files. 

For Shopify, it might be the theme.liquid file, for WordPress, the Footer.php file, or the Theme Footer file. If you are unsure where to place the code in your backend, please get in touch with your web developer or your platform customer support. 

The custom code needs to be inserted always after the installation code of your Tidio project if you installed it via JS script. If you used a Tidio plugin, then the code needs to be right above the </body> tag.

Opening the Chat Widget with a custom button

In order to create a button, you can use the following code and place it wherever you need the button to be on your website:

<button class="chat-button">Live Chat</button>

To open the chat widget with a click of a custom button, you would need to implement the following code:

(function() {
  function onTidioChatApiReady() {
    window.tidioChatApi.hide();
    window.tidioChatApi.on("close", function() {
      window.tidioChatApi.hide();
    });
  }

  if (window.tidioChatApi) {
    window.tidioChatApi.on("ready", onTidioChatApiReady);
  } else {
    document.addEventListener("tidioChat-ready", onTidioChatApiReady);
  }

  document.querySelector(".chat-button").addEventListener("click", function() {
    window.tidioChatApi.show();
    window.tidioChatApi.open();
  });
})();

Depending on the platform you are implementing this code, you may need to update the website, save changes, and/or clear the cache of the webpage.

After implementing the code above, the widget will appear when you click the button you created and hide when you minimize the chat window. 

Opening the Chat Widget with a link click 

To open the Tidio Chat widget with a click on a link, the code you need to input is:

<a href="javascript:;" onclick="tidioChatApi.display(true);tidioChatApi.open()">Open chat!</a>

Of course, “Open chat!” can be replaced by any phrase you would like to use to be visible to your visitor. 

This code needs to be implemented in the place you want your visitor to see the link to open the chat.

Hiding the chat widget

To hide the widget to be then opened by a link click, you would need to additionally add the following function just before the </body> mentioned at the beginning of this article:

(function() {
   function onTidioChatApiReady() {
   window.tidioChatApi.hide();
   window.tidioChatApi.on("close", function() {
   window.tidioChatApi.hide();
   });
   }
  
   if (window.tidioChatApi) {
   window.tidioChatApi.on("ready", onTidioChatApiReady);
   } else {
   document.addEventListener("tidioChat-ready", onTidioChatApiReady);
   }
  
   document.querySelector(".chat-button").addEventListener("click", function() {
   window.tidioChatApi.show();
   window.tidioChatApi.open();
   });
  })();