Show Tidio Widget Only on Specific Pages

See how to show the Tidio widget only on specified pages within your website. 

In this article, you'll learn:

• How to set the widget only on specified pages 
• Which code should be used to show the Tidio widget on chosen pages 

How to set widget on specific pages

This process is dedicated to users who have access to their website's code and want to show Tidio on specific pages only. If you don't have access - please follow our article about hiding Tidio on specific pages within the Tidio panel.

The idea behind this process is easy. By entering the URL address inside the code - Tidio will be hidden on all the URLs that don't include that specified link. Tidio widget will be visible only on the URLs added to the list. 

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

<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>