# Opening the Chat Widget from a custom button or a link

Section: Widget Customization

Description: Open the chat widget from your own button or link, and hide its default icon with JavaScript.

Verified against Tidio panel 12.331.0

Last updated: 2026-11-10

Source: https://help.tidio.com/articles/open-widget-from-button-or-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'll learn:**

 

- [Where to place the custom code](<https://help.tidio.com/articles/open-widget-from-button-or-link/#where-to-place-the-custom-code>)
- [How to open the widget with a custom button](<https://help.tidio.com/articles/open-widget-from-button-or-link/#opening-the-chat-widget-with-a-custom-button>)
- [How to open the widget with a link](<https://help.tidio.com/articles/open-widget-from-button-or-link/#opening-the-chat-widget-with-a-link-click->)
- [How to hide the widget](<https://help.tidio.com/articles/open-widget-from-button-or-link/#hiding-the-chat-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.

 



 

💡

 

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

 

- [Widget SDK](<https://help.tidio.com/articles/widget-sdk/>)
- [Opening the widget automatically](<https://help.tidio.com/articles/open-widget-automatically/>)