How to add an AI chatbot to your WordPress website

WordPress runs a huge share of small business websites, so "how do I put the chat on my WordPress site?" is one of the first questions we get. The good news: you don't need a developer, and you don't need to touch your theme's design. Most AI chat assistants, ours included, are added with a single line of code, a script tag, and WordPress gives you a few ways to paste it in.

This guide uses Pixexl's assistant as the example, but the steps are the same for most chat tools that give you a script tag.

Before you start

You'll need three things:

• Admin access to your WordPress site. Editor access isn't enough to add scripts.
• Your chat's embed code. In Pixexl, it's on your project's Settings tab, under the integration code. It looks something like this:

<script
  src="https://…/pixe-widget.js"
  data-project-id="your-project-id"
  data-api="https://…"
  async
></script>

• Your domain added to the project. For security, the chat only runs on domains you've allowed. Your main domain is set when you create the project. If the site also runs on another address, a staging copy for example, add it on the Settings tab too.

It's also worth giving the assistant something to answer from before it goes live. Add your website's pages as its knowledge, and it'll be useful from the first chat (see What to give your AI assistant so it answers well).

Option 1: a header and footer code plugin (easiest)

This is the route we recommend for most people. It doesn't depend on your theme, and the code survives theme updates.

1. In your WordPress dashboard, go to Plugins → Add New.
2. Search for a plugin that adds code to your site's header and footer. WPCode (formerly "Insert Headers and Footers") is a popular free one; most similar plugins work the same way.
3. Install and activate it.
4. Open the plugin's settings and find the Footer box. (The header works too, but the footer is the usual place for scripts that don't need to load first.)
5. Paste your embed code and save.

That's it. Open your site in a new tab and the chat button should appear in the corner.

Option 2: a Custom HTML block in the footer (no plugin)

If your site uses a block theme (most themes made in the last few years do), you can add the code straight into the footer without a plugin.

1. Go to Appearance → Editor.
2. Open Patterns (or Template Parts, depending on your WordPress version) and choose your Footer.
3. Add a Custom HTML block anywhere in the footer.
4. Paste the embed code into it and save.

Because the footer appears on every page, the chat will too. The block shows nothing on the page itself; the chat appears as its own button in the corner.

If you use a classic theme, the Site Editor won't be there. Use option 1 instead.

Option 3: your theme's functions.php (for developers)

If you look after the site yourself and use a child theme, you can load the script from code. Add this to your child theme's functions.php, with your own embed code inside:

add_action( 'wp_footer', function () {
	?>
	<script
		src="https://…/pixe-widget.js"
		data-project-id="your-project-id"
		data-api="https://…"
		async
	></script>
	<?php
} );

Only do this in a child theme. If you edit the parent theme directly, the next theme update will wipe your change.

Will it clash with my theme?

It shouldn't. The chat draws itself in its own sealed-off area of the page, so your theme's styles can't change how it looks, and its styles can't leak into your site. Its colours, greeting and position come from the Widget tab in your Pixexl dashboard, so you can change them later without touching WordPress again.

The script is also loaded with async, which means the browser fetches it without holding up the rest of your page.

Cookie consent

The chat remembers a visitor's conversation in their browser, so it's covered by your cookie rules. You have two choices:

• Use the chat's own cookie notice. It's on by default and asks the visitor before the chat stores anything. You can link it to your privacy policy from the Widget tab.
• Use your existing cookie banner. If you already run a consent plugin, you can turn the chat's notice off, add data-consent="pending" to the script tag, and have your consent tool call PixeWidget.grantConsent() when the visitor agrees. Your consent plugin's documentation will say where to put that kind of callback.

Pick one, not both. Two cookie pop-ups on one page annoys everyone.

It's not showing up: what to check

Nine times out of ten, it's one of these:

• Caching. WordPress caching plugins and hosts often serve an older copy of your pages. Clear the cache in your caching plugin (and your host's dashboard, if it has one), then reload.
• Script optimisation. Plugins that "delay", "combine" or "minify" JavaScript sometimes hold scripts back until the visitor scrolls or clicks. If the chat appears late or not at all, exclude pixe-widget.js in that plugin's settings.
• The domain. If you're testing on a staging site or a temporary address, that address needs to be in the project's allowed domains.
• The chat is switched off. Check that "Show the chat on my site" is on in the Widget tab.
• A typo in the code. Copy the embed code again from the Settings tab rather than retyping it.

If it still won't appear, open your browser's developer console (right-click, Inspect, then Console). The chat leaves a short message there explaining why it didn't load.

What about WordPress.com, Wix, Squarespace or Shopify?

The idea is the same everywhere: find where the platform lets you add custom code to every page, and paste the embed code there, ideally near the end of the page.

• WordPress.com lets you install plugins, and so use option 1, on its plans that include plugins.
• Wix and Squarespace both have a custom code or code injection setting for the whole site, usually on their paid plans.
• Shopify lets you add it to your theme's theme.liquid file, just before the closing </body> tag.

If your platform doesn't allow custom code at all, the chat can't be added there. In that case, it may be time to think about a site you have full control over.

After it's live

Installing the chat is the quick part. The part that makes the difference is the first couple of weeks after:

• Ask it the questions your customers ask, and see how it does.
• Read the real conversations once a week. Any question it fumbles points to something missing from your website.
• Add forms, so a question can turn into a booking or an enquiry without leaving the chat (see How to turn website chats into bookings and enquiries).

Every Pixexl plan includes the assistant, and your first 2 weeks are free, so you can try it on your WordPress site with real visitors before you decide. Meet Pixe to see what it can do.