Add the ZapClaw chat widget to a Webflow site

In short: on Webflow you paste the widget snippet in the footer code of the site's custom code settings, then publish. Custom code on a whole site needs a paid site plan.

What you need

• A Webflow site on a paid site plan. Custom code in the site settings is not available on a free site.
• Access to the site settings (the workspace owner or a site admin).
• The widget snippet from the Agents section of the ZapClaw dashboard.
• 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.

Add the snippet in Webflow

1. In the ZapClaw dashboard, open your widget in Agents and copy the snippet with the copy button.
2. In Webflow, open Site settings and go to the Custom code tab.
3. Paste the snippet in Footer code, the field that loads before the closing </body> tag.
4. Click Save changes, then Publish the site.

Custom code runs on the published site, not in the Designer. To show the chat on one page only, use the custom code of that page's settings instead.

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.
• Shopify, in the theme code or an app embed.
• Squarespace, in Code Injection.