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
This code should load after the script, so the code should be placed under Tidio JS code or above </body> if you use the Tidio plugin.
You can also see the code on our Codepen page.
<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>
Comments
0 comments
Please sign in to leave a comment.