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'll learn:

 

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. 

 

💡
Please treat the following text as a general information article, as the backends of websites and the placement of the code may differ. If you encounter any issues with implementing the code please contact a web developer as we will not be able to assist you with custom implementations. 

 

Where to place the custom code

 

Find the template containing your website's closing </body> tag. In Shopify, this is usually layout/theme.liquid. A classic WordPress theme may use footer.php; other themes need a different placement. Ask your developer if you cannot find it. Insert the custom script above </body>, after the Tidio installation code and your button markup.

 

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>
 

Place the following script after the button markup to open the widget when your visitor clicks the button. Wait for the widget to load before testing the button.

 

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

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="event.preventDefault(); tidioChatApi.show(); 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. Test the link after the widget has finished loading.

 

Hiding the chat widget

 

If you use the link option, add the following script just before the </body> tag. It hides the widget on load and again when your visitor closes it. You do not need a custom button for this option:

 

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

 

Save your changes, refresh your website, and test opening and closing the widget.

Further reading