How to Add Live Chat to Shopify, Wix, Squarespace and Webflow

Hodhod's live chat widget is a short snippet of JavaScript, which means it works on any site builder that lets you add custom code. This guide shows exactly where to paste it on Shopify, Wix, Squarespace and Webflow, and how to add it through Google Tag Manager when you'd rather not touch the site's code at all.

Using WordPress or WooCommerce? Start with the WordPress guide: there's a ready-made plugin.

Before you start

You need your inbox's installation snippet. If you haven't created a website inbox yet, steps 1 to 4 of the website installation guide take a few minutes. You can copy the code again at any time: open Settings → Inboxes → your website inbox and, on the "Settings" tab, switch the widget preview to "Script".

Menu names below are the platforms' own: they may differ if a platform has been updated or your admin is set to another language.

Shopify

1. In your Shopify admin, go to Online Store → Themes.
2. Next to the theme you want to edit, click the "…" button and choose "Duplicate". Working on a copy lets you test safely.
3. On the copy, click "…" again and choose "Edit code".
4. In the "Layout" folder, open theme.liquid.
5. Scroll to the bottom and paste the Hodhod snippet just above the closing </body> tag.
6. Save, preview the copy, and when everything works, publish it.

Notes:

• The code lives inside the theme. If you switch themes, add it to the new one. Shopify also warns that changes in theme code may be lost in a theme update.
• A theme you're only trying out can't be edited.
• Shopify's checkout is separate from your theme, so the widget appears on your store pages (home, collections, products, cart) but not on the checkout steps themselves.

Wix

1. In your site's dashboard, go to Settings and open "Custom Code" under "Development & integrations".
2. Click "+ Add Custom Code" and paste the Hodhod snippet.
3. Give it a recognizable name, such as "Hodhod chat".
4. Under "Add Code to Pages", choose "All pages", and under "Place Code in", choose "Body – end".
5. Decide whether the code loads once per visit or on each page, then click "Apply".

Notes:

• The site must be published and have a connected domain, which in turn needs a Premium plan.
• Snippets are tied to the domain: if you assign a different domain to the site, they're deleted.
• Wix doesn't provide support for third-party code. If the widget doesn't appear after publishing, check Wix's custom code guidelines for recent restrictions.

Squarespace

1. Open your site's panel and go to Website Tools → Code Injection. (Squarespace has renamed and moved menus between versions, so look for "Code Injection" if the path differs.)
2. Paste the Hodhod snippet into the "Footer" field.
3. Click "Save".

Notes:

• Code Injection is available on the Core, Plus and Advanced plans (and some older plans), not on Basic.
• Footer code is added before the closing </body> tag on every page.
• Squarespace may not run injected scripts while you're logged in, so check the result in a private browser window on your published site.

Webflow

1. Open your project's Site settings and go to the "Custom code" tab.
2. Paste the Hodhod snippet into "Footer code", so it loads just before the closing </body> tag, and click "Save changes".
3. Publish your site. Custom code shows in preview but only goes live after publishing.

Notes:

• To add the widget to a single page only, use that page's settings, in the "Before </body> tag" box.
• If you can't find the setting, check Webflow's help for what your plan and role allow.

Any site, through Google Tag Manager

If Google Tag Manager is already on your site, you can add the widget without editing the site at all:

1. In Tag Manager, go to Tags and click "New".
2. Choose the "Custom HTML" tag type and paste the Hodhod snippet.
3. Under Triggering, choose "All Pages".
4. Save, then Submit and Publish the container.

The widget keeps a small cookie in the visitor's browser so a conversation can continue from page to page. If your site asks for cookie consent, use your consent tool's trigger so the tag fires only after consent.

Test it

Open your published site in a private browser window. The chat button should appear in the bottom corner; send a test message and check that it arrives under "Conversations" in Hodhod.

If you set "Allowed Domains" on the inbox's "Configuration" tab, add every domain the widget runs on, separated by commas: your live domain and also any preview or default domain you test on (for example your-store.myshopify.com, yoursite.wixsite.com or yourproject.webflow.io). Otherwise the widget stays hidden on the ones that are missing.

If the widget doesn't show up

1. Check that you published. Wix and Webflow only run custom code on the published site.
2. Check the placement. The snippet must be in the footer or "Body – end" area that loads on every page.
3. Check Allowed Domains. The domain you're testing on must be on the list.
4. Look for a second copy. If you see two chat buttons, the code has been added twice, for example in the theme and in a tag manager. Keep one.
5. Try without an ad blocker, and look at the browser console (F12) for errors.

Frequently asked questions