Show Tidio Widget Only on Specific Pages

This article will help you set the widget to appear only on specific pages of your website. This option is useful for users who have access to their website's code and want to have full control over where the widget is displayed.

In this article, you'll learn:

• How to display the widget on specific pages only
• What code should I use

How to display widget on specific pages

The concept behind this process is simple. By entering the URL address inside the code, Tidio will only be visible on the specified pages. It will be hidden on all other URLs that do not match the specified link.

Let's see an example:

We added URL: http://mystore.com/products/black/ to the code.  In that scenario, the widget will be shown on all the URLs that contain this phrase. 

The widget will not show up on:

• http://mystore.com/
• http://mystore.com/contact/
• http://mystore.com/products/

However, it will show up on:

• http://mystore.com/products/black/
• http://mystore.com/products/black/powerbank/

Code

To implement this option, follow these steps:

1. This code should load after the script, so the code needs to be placed under the Tidio javascript code or above the </body> if you use the Tidio plugin.

2. Copy and paste the code below or find the code on our Codepen page. 

If you have more questions, please contact our Support team at support@tidio.net

<script async src="//code.tidio.co/fouwfr0cnygz4sj8kttyv0cz1rpaayva.js"></script>
<script>
(function() {

// modify whitelisted urls here
var whitelistedUrls = [
'http://tidio.com',
];
// do not modify script after this line 


var shouldShowWidget = (function isCurrentUrlWhitelisted() {
var currentUrl = window.location.href;
var isWhitelisted = false;
whitelistedUrls.forEach(url => {
if (currentUrl.indexOf(url) > -1) {
isWhitelisted = true;
}
})
return isWhitelisted;
})();

function onTidioChatApiReady() {
if (shouldShowWidget) {
window.tidioChatApi.show();
}
else {
window.tidioChatApi.hide();
}
}
if (window.tidioChatApi) {
window.tidioChatApi.on('ready', onTidioChatApiReady)
} 
else {
document.addEventListener('tidioChat-ready', onTidioChatApiReady);
}
})();
</script>