Pop up Open Implementation

If you'd like to open the chat widget right when someone visits your website, you can implement a Javascript code that will let you do that.

 

In this article, you'll learn:

• What codes should be implemented
• How to install the script on WordPress
• How to install the script on Shopify

 

Codes

Add one of the following scripts before the closing </body> tag of your website, just as you'd paste the Tidio installation code itself.

 

This method will work with the plugin installation too!

 

The script below will work both for mobile and desktop views of your website.

 

<script src="//code.tidio.co/fouwfr0cnygz4sj8kttyv0cz1rpaayva.js" async></script>
<!-- Swap your javascript code above -->
<script>
   (function() {
    function onTidioChatApiReady() {
      (function() {
          window.tidioChatApi.open();
      })();
    }
    if (window.tidioChatApi) {
      window.tidioChatApi.on("ready", onTidioChatApiReady);
    } else {
      document.addEventListener("tidioChat-ready", onTidioChatApiReady);
    }
  })();
</script>

 

If you want your chat to pop up open only in the desktop view, you can use this script instead:

 

<script src="//code.tidio.co/fouwfr0cnygz4sj8kttyv0cz1rpaayva.js" async></script>
<!-- Swap your javascript code above -->
<script>
  (function() {
    function isMobile() {
      try {
        return !!(
          navigator.userAgent &&
          /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
            navigator.userAgent
          )
        );
      } catch (e) {
        return false;
      }
    }

    function onTidioChatApiReady() {
      (function() {
        if (!isMobile()) {
          window.tidioChatApi.open();
        }
      })();
    }
    if (window.tidioChatApi) {
      window.tidioChatApi.on("ready", onTidioChatApiReady);
    } else {
      document.addEventListener("tidioChat-ready", onTidioChatApiReady);
    }
  })();
</script>

 

How to install the script on WordPress

 

Open the Theme Footer (footer.php) file located in your WordPress panel (Appearance > Editor) and paste the code above the closing </body> tag. Remember to press Update file and refresh your website once you are done.

 

 

 

How to install the script on Shopify

 

Go to your Shopify panel and select the Online Store tab.

 

 

In the Themes (1) section, you will find the Actions menu. Click on it and select the Edit code (2) option from the list.

 

 

Choose the theme.liquid file under the Layout folder and paste the above script right before the closing </body> tag. The screenshot below will help you find the right place. Please remember to save the changes and refresh your website once you are finished.