Add the chat to your website

The chat bubble lets visitors on your website talk to your TidyChat assistant. Every chat becomes a lead in your Inbox, next to your WhatsApp conversations. Setting it up takes about five minutes and you only do it once: later changes to the title, colours or language show up on your website by themselves.

1. Add your website address

Open Website chat settings. In Allowed websites, type the address people use to reach your site, without https:// and without a page path. One address covers www and every other subdomain. If your business has several domains, put each on its own line.

• Right: mybusiness.com
• Right: mybusiness.ro (on its own line, if you also use it)
• Wrong: https://www.mybusiness.com/contact

The chat only works on the websites in this list, so nobody can put your chat (and spend your balance) on their own site.

2. Turn the chat on and save

Switch Chat is on on, pick the chat title, button colour, chat window colour and language, and click Save.

3. Copy the embed code

After the first save, an Embed code box appears. Click Copy Code. It is one line, the same for every page, and looks like this (yours has your own workspace name):

<script src="https://app.tidychat.io/widget.js" data-workspace="your-workspace" data-api="https://app.tidychat.io" defer></script>

4. Paste it on your website

The code goes just before the closing </body> tag, on every page. Most website builders have one place for that:

WordPress

1. Go to Plugins → Add New, search for “WPCode” and install and activate it.
2. Go to Code Snippets → Header & Footer.
3. Paste the code into the Footer box and click Save Changes.

Wix

1. In your Wix dashboard, go to Settings → Custom code (under Advanced) and click Add Custom Code.
2. Paste the code, choose All pages and Load code once, and set the place to Body - end.
3. Click Apply. Wix only runs custom code on a paid plan with a connected domain.

Shopify

1. In Shopify admin, go to Online Store → Themes, click the ⋯ button on your theme and choose Edit code.
2. Open layout/theme.liquid and paste the code just above the closing </body> tag.
3. Click Save.

Squarespace

1. Open Website Tools → Code Injection (in older menus: Settings → Advanced → Code Injection).
2. Paste the code into the Footer box and click Save. Code Injection needs a paid plan that includes it.

Webflow

1. Open Site settings → Custom code.
2. Paste the code into the Footer code box and click Save.
3. Publish your site; the chat only appears on the published site.

Google Tag Manager

1. Go to Tags → New and choose the Custom HTML tag type.
2. Paste the code and set the trigger to All Pages.
3. Save the tag, then click Submit and Publish.

Any other website

Paste the code just before </body> in the template or footer that every page shares, so you add it only once, then upload or publish the changed files. If someone else manages your website, send them the code and this sentence: “Please add this script just before </body> on every page.”

5. Check that it works

Open your website in a new tab. The chat bubble appears in the bottom corner. Send a test message: it shows up in your Inbox as a new lead.

Back on the Website chat settings page, step 5 now says Installed: last loaded on your website. If the chat tried to load on an address that is not on your list, the page says where, and an Add to allowed websites button fixes it in one click.

The chat bubble does not appear?

• Check that the address in your browser bar is on the Allowed websites list (www and other subdomains are covered).
• Make sure Chat is on is switched on and saved.
• Publish your site after adding the code. Previews inside website builders run on a different address, so the chat may not show there.
• If your site uses a cache plugin or a CDN, clear its cache.
• Shows on some pages only? Put the code in the site-wide footer, not on a single page.
• Testing on your own computer? Add localhost to the list while you test.