Show Tidio Widget Only on Specific Pages
  • 1 Minute to read
  • Comments
  • Dark
    Light

Show Tidio Widget Only on Specific Pages

  • Comments
  • Dark
    Light

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


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>




If you still have some questions for our team after reading this article, don't hesitate to contact us.


Was this article helpful?

What's Next