All install guides
Webflow

How to add an AI chatbot to Webflow

Drop the snippet into Webflow’s footer code, then publish. Six steps, and the chat bubble appears on every page of the live site.

You’ll need

A paid Site plan (Basic or above), or a paid Workspace plan. On a free Starter site the custom code boxes cannot be opened at all.

Before you start

You need your embed snippet first. Start a free trial, point Serochat at a page or a document, and you get a single line of code to copy — it is on the Customise page in your dashboard. Then follow the steps below.

The steps

  1. Open your Site settings — from the Designer, click the Webflow logo and choose Site settings; from the Dashboard, click the … on the site’s thumbnail.
  2. Go to the Custom code tab.
  3. Paste the snippet into the Footer code box — the one that says it appears before the closing </body> tag. Not Head code.
  4. Click Save changes.
  5. Click Publish, tick the domains you want, then Publish to selected domains.
  6. Come back to Serochat and press Verify install — we’ll load your site and confirm the chatbot is live.

Saving is not enough on Webflow — the chatbot only reaches real visitors once you publish.

Pasting this in is safe: it is one line that loads the chat bubble, and it cannot change or break the rest of your site. Delete the line and Serochat is gone completely.

If your site has a Content-Security-Policy

If your site sends a Content-Security-Policy header, the browser will silently block the chat bubble until that policy allows Serochat. This is the whole list. If you have no CSP — which is most sites — there is nothing to do here.

script-src must allow https://serochat.ai
The snippet you pasted loads widget.js from us.
connect-src must allow https://serochat.ai
The widget calls our API to send a message and fetch the reply.
img-src must allow https://serochat.ai
Only if you have uploaded an avatar image for your bot. The default lettered avatar needs no image.
style-src must allow 'unsafe-inline'
The widget styles itself with one <style> block inside its own shadow root, which your policy sees as an inline style. This is the only directive that is a genuine loosening rather than an allow-list entry, and it applies to styles only — never add 'unsafe-inline' to script-src for us.

A policy with nothing else in it would read:

Content-Security-Policy: script-src 'self' https://serochat.ai; connect-src 'self' https://serochat.ai; img-src 'self' https://serochat.ai; style-src 'self' 'unsafe-inline';

Two things that catch people out. If your policy sets default-src and not the four directives above, every one of them falls back to default-src — so either add the directives explicitly or add https://serochat.ai to default-src. And a policy delivered by a <meta> tag behaves the same way as a header, so check both. If the bubble still does not appear, open your browser’s developer console: a blocked resource says so by name, and the directive it names is the one to fix.

Get your snippet

Start a free trial, connect a page or a document, and Serochat answers your customers from your own content — with a link to the passage it used.

Try Serochat free Card-free trial · see pricing.