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

Locate the file that contains the </body> tag in your website's backend. This is typically found in files with .html or .php extensions, such as index.html or index.php. For specific platforms like Shopify or WordPress, consult the theme.liquid file or Footer.php file. Insert the custom code right above the </body> tag, after the installation code of your Tidio project.

Opening the Chat Widget with a custom button

To create a custom button, use the following code and place it where you want the button to appear on your website:

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

Implement the following code to open the chat widget with a click of the custom button.

(function() {
function onTidioChatApiReady() {
window.tidioChatApi.hide();
}

if (window.tidioChatApi) {
window.tidioChatApi.on("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 link click, use the following code:

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

Replace "Open chat!" with the desired phrase visible to your visitors. Implement this code where you want the link to appear.

Hiding the chat widget

To hide the widget and allow it to be opened with a link click, add the following function just before the </body> tag:

(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();
   });
  })();

By following these steps and implementing the provided code, you can easily launch your Tidio widget with a click of a button or a link. Customize the implementation based on your website's backend and enhance your visitor's chat experience.