This article will help you configure the widget to appear only on specific pages on your site. This option is useful for users who have access to the site’s code and want full control over where the widget appears.

How to display a widget on specific pages

The concept behind this process is simple. By entering the URL within the code, Tidio will only be visible on the pages that have been defined. It will be hidden on any other URL that does not match the defined link.

Let’s see an example:

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

The widget will not appear in:

  • http://mystore.com/about
  • http://mystore.com/contact
  • http://mystore.com/blog

But it will appear in:

  • http://mystore.com/products/black/
  • http://mystore.com/products/black/shoes
  • http://mystore.com/products/black/accessories

Code

To implement this option, follow these steps:

  1. This code needs to load after the script, so the code should be placed below the Tidio JavaScript code or above the</body> If you are using the Tidio plugin.

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

If you have any further questions, please send a message to our support team at support@tidio.net

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

// שנה כתובות URL מורשות כאן
var whitelistedUrls = [
'http://tidio.com',
];
// אל תשנה את הסקריפט לאחר שורה זו 


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>