Add the ZapClaw chat widget to a Shopify store

In short: on Shopify you add the widget snippet to your theme code, or to an app embed that accepts custom code. The chat shows on your storefront pages.

What you need

• A Shopify account that can edit the theme code (the owner, or staff with the permission to edit themes).
• The widget snippet from the Agents section of the ZapClaw dashboard.
• Shopify restricts scripts on its checkout pages, so expect the chat on storefront pages only.
• Copy the exact snippet of your widget from the Agents area of the dashboard. The id above is a placeholder: yours is different.
• Allowed websites. In the dashboard, add your site's address to the widget's allowed websites, exactly as visitors see it. https://www.example.com and https://example.com are two different addresses. A site that is not on the list shows no bubble.

<script async src="https://chat.zapclaw.app/loader.js" data-widget-id="YOUR_WIDGET_ID"></script>

Platforms rename their menus from time to time. If a label below differs on your screen, search the platform's settings for the name in quotes.

Option 1: the theme code

1. In the ZapClaw dashboard, open your widget in Agents and copy the snippet with the copy button.
2. In the Shopify admin, open Online Store, then Themes. On your live theme choose Edit code.
3. Open layout/theme.liquid and paste the snippet just above the closing </body> tag.
4. Click Save and open your store in a private window.

Option 2: an app embed

ZapClaw does not ship a Shopify app of its own. If you already use an app that adds custom code to your store, turn it on under Online Store, Themes, Customize, App embeds, and paste the snippet in that app's code field.

A theme you switch to later does not carry the snippet along: add it again to the new theme.

Check that it works

Open your live site in a private window and look for the bubble in the corner you chose. No bubble? Check that the agent is published, the widget is active, your address is in the allowed websites, and that no content blocker or Content Security Policy is stopping it.

If your site has a Content Security Policy

Most sites need nothing here. A site with a strict Content Security Policy adds two entries to its policy, and nothing else:

script-src https://chat.zapclaw.app
frame-src https://chat.zapclaw.app

Only if your policy also restricts connect-src (or has no connect-src but restricts default-src), add connect-src https://chat.zapclaw.app too. The loader reads the look of your bubble from there before drawing it.

No style-src entry is needed: the loader sets its styles through the browser's style API, never an inline style tag.

Anonymous mode

On this platform the widget runs anonymous. It answers from the knowledge bases you marked public, collects a contact and hands the case to a person. What anonymous mode means.

A sentence for your privacy policy

The widget handles what your visitors type, on your behalf, so your privacy policy should say so. You can adapt this sentence:

The chat assistant on this website is provided by ZapClaw, which processes the messages visitors type into it on our behalf, as our processor. The chat sets no cookies on this website, and conversations are kept for 90 days.

Other install guides

• Overview, with the Content Security Policy lines and the privacy sentence.
• WordPress, for a site you host yourself.
• WordPress.com, on the plans that allow plugins.
• Google Tag Manager, with a Custom HTML tag.
• Wix, with Custom Code on a paid plan.
• Webflow, in the custom code of the site settings.
• Squarespace, in Code Injection.