# Opening the widget automatically

Section: Widget Customization

Description: Use a JavaScript snippet to open the widget automatically, with installation steps for WordPress and Shopify.

Verified against Tidio panel 12.331.0

Last updated: 2026-11-10

Source: https://help.tidio.com/articles/open-widget-automatically/

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](<https://help.tidio.com/articles/open-widget-automatically/#codes->)
- [How to install the script on WordPress](<https://help.tidio.com/articles/open-widget-automatically/#how-to-install-the-script-on-wordpress>)
- [How to install the script on Shopify](<https://help.tidio.com/articles/open-widget-automatically/#how-to-install-the-script-on-shopify>)

 



 



 

## The available codes

 

Copy your own installation code from **Settings \> Live Chat \> Installation**. Replace the example installation line below with that code. If a plugin already installs Tidio, keep that installation and add only the second script, rather than loading the widget twice:

 ![The Live Chat Installation page with the manual installation code visible](<https://help.tidio.com/article-media/open-widget-automatically/23.1.png>) 

You can also find the **Public key** in **Settings \> Developer \> Project data**.

 

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

 



 

The following alternative skips browsers whose user-agent text matches its list of mobile devices. It does not check the viewport width or reliably identify every mobile device, so it is not a guarantee of desktop-only opening:

 



 

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

 



 

For a classic WordPress theme that has ` footer.php `, open **Appearance \> Theme File Editor** and select that file. Back up your theme first and use a child theme so a theme update does not overwrite your changes. Paste the script above the closing ` </body> ` tag, then click **Update File** and refresh your website. If the editor or file is unavailable, ask your developer to add the script using your site's supported method. The images below show an older WordPress interface.

 



 

![WordPress theme files with Theme Footer selected.](<https://help.tidio.com/article-media/open-widget-automatically/legacy-5464218078876.webp>)

 



 

![WordPress theme editor showing the automatic-open script above the closing body tag.](<https://help.tidio.com/article-media/open-widget-automatically/legacy-5464218119836.webp>)

 



 

## How to install the script on Shopify

 



 

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

 



 

![Shopify admin navigation with Online Store highlighted.](<https://help.tidio.com/article-media/open-widget-automatically/legacy-5464217987100.webp>)

 



 

On the theme you want to edit, open the three-dots menu and select **Edit code**. The older screenshot below labels this menu Actions.

 



 

![Shopify Themes page with the Actions menu open and Edit code highlighted.](<https://help.tidio.com/article-media/open-widget-automatically/legacy-5464218038428.webp>)

 



 

Choose ` theme.liquid ` in the ` layout ` folder and paste the script before the closing ` </body> ` tag. The screenshot below shows where to look. Save your changes and refresh your website when you are finished.

 



 

![Shopify theme code editor with theme.liquid under Layout highlighted.](<https://help.tidio.com/article-media/open-widget-automatically/legacy-5464217990684.webp>)

 



 

![Shopify theme.liquid editor showing the automatic-open script before the closing body tag.](<https://help.tidio.com/article-media/open-widget-automatically/legacy-5464218079644.webp>)

 

## Further reading

 

- [Widget SDK](<https://help.tidio.com/articles/widget-sdk/>)
- [Opening the Chat Widget from a custom button or a link](<https://help.tidio.com/articles/open-widget-from-button-or-link/>)