Install an AI Chatbot on Your Website

Choose your platform

• Webflow: Webflow adds site-wide code in the footer custom code area. Publish after saving.
  1. Open Site settings, then Custom code, then Footer code.
  2. Paste the snippet and save.
  3. Publish the site. Nothing in the Designer needs to change.
  Webflow install guide
• Squarespace: Squarespace applies a footer code injection to every page.
  1. Open Code Injection and paste the snippet into the Footer field.
  2. Save. The snippet applies across the whole site.
  Squarespace install guide
• Shopify: Shopify takes the snippet in theme.liquid, above the closing head tag.
  1. In Shopify admin, open Online Store, the theme's actions menu, then Edit code.
  2. Open Layout and theme.liquid. Paste the snippet above the closing </head> tag.
  3. Save. Edit the live theme, or duplicate it first and test the copy.
  Shopify install guide
• WordPress: WordPress takes the snippet in the theme footer, or in a header and footer scripts box.
  1. Paste the snippet into your theme footer before the closing body tag, or into the custom scripts box of a header and footer plugin.
  2. Clear your caching plugin or CDN cache if you use one.
  WordPress install guide
• Custom HTML: Any other site: put the snippet before the closing body tag on every page.
  1. Add the snippet to your site template so it loads on every page, before the closing </body> tag.
  2. Allow your domain in the site's allowed domains list in ZChat.
  Website chat setup guide

Copy the snippet

Keep the snippet as it is. Only the widget token changes between sites.

<script async src="https://widget.zchat.com/loader.js"
        data-api="https://api.zchat.com"
        data-widget-token="YOUR_WIDGET_TOKEN"></script>

Check the widget on your site

After publishing, open your site. You should see a chat button in the bottom-right corner.

ZChat cannot see your site from here, so this check is yours to make.

Add the website chat widget

Paste the ZChat loader before the closing body tag, keep the widget token environment-specific, and publish the page where visitors need support.

• Loader script
• API base
• Widget token

Allow the widget in your Content-Security-Policy

If your site sends a Content-Security-Policy, the widget needs three origins. Miss the last one and everything still works, but the widget falls back to polling every two seconds instead of a live connection - and nothing tells you.

• script-src + style-src: widget.zchat.com
• connect-src: your ZChat API host
• script-src: cdn.jsdelivr.net (realtime client)

Test an AI answer and human handoff

Ask a question covered by your knowledge base, then request a human. Confirm the answer is grounded and that the full conversation appears in the dashboard inbox.

• Test message
• Inbox record
• Handoff path

Record rollback

Document how to remove the embed, disable AI replies, rotate provider keys, and notify support owners.

• Remove embed
• Disable AI
• Rotate keys