All install guides
Wix

How to add an AI chatbot to a Wix site

Wix Custom Code adds the chat bubble to every page of a published site. Six steps from your dashboard, with nothing to install.

You’ll need

A published site with your own domain connected. That means a paid Wix plan — the cheapest one (Light) is enough. Until both are true, Custom Code is unavailable.

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. In your site’s dashboard, go to Settings and click Custom Code, under the Development & integrations heading.
  2. Click + Add Custom Code and paste the snippet into the code box.
  3. Under Add Code to Pages, choose All pages and set it to load once per visit.
  4. Under Place Code in, choose Body – end.
  5. Click Apply.
  6. Come back to Serochat and press Verify install — we’ll load your site and confirm the chatbot is live.

Custom code never runs inside the Wix editor — only on your published site. Publish first, then look at your real site rather than the editor preview.

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.