All install guides
Squarespace

How to add an AI chatbot to Squarespace

Squarespace Code Injection puts a chat bubble on every page of your site. Five steps from the Pages panel, with no plugin to install.

You’ll need

The Core, Plus or Advanced plan — Code Injection is not available on Basic. Older Business and Commerce plans keep it too.

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 Squarespace dashboard, open Website → Pages.
  2. Scroll to the very bottom of the Pages panel — past your pages and system pages — and click Custom Code, then Code Injection. (On an older 7.0 site this section is called Website Tools instead.)
  3. Paste the snippet into the Footer box.
  4. Click Save.
  5. Come back to Serochat and press Verify install — we’ll load your site and confirm the chatbot is live.

Anything in the Footer box loads on every page of your site, which is what you want for the chatbot.

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.