All install guides
WordPress

How to add an AI chatbot to WordPress

Add a Serochat chat bubble to any WordPress site using the free WPCode plugin. Six steps, roughly ten minutes, and no theme files to edit.

You’ll need

A site where you can install plugins — that is any self-hosted WordPress, or WordPress.com on any paid plan. The free WordPress.com tier cannot install plugins.

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 WordPress admin, go to Plugins → Add Plugin and search for WPCode. (This is the plugin that used to be called ‘Insert Headers and Footers’ — same plugin, new name.)
  2. Click Install Now, then Activate. The free version does everything you need here.
  3. A new Code Snippets item appears in the left-hand menu. Go to Code Snippets → Header & Footer.
  4. Paste the snippet into the Footer box — there are three boxes, and Header and Body are the wrong ones.
  5. Click Save Changes.
  6. Come back to Serochat and press Verify install — we’ll load your site and confirm the chatbot is live.

To remove Serochat later, come back to the same screen, clear the Footer box and save again.

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.