---
title: "How to Add an AI Chatbot to WordPress (2026 Guide)"
canonical_url: "https://chatthing.ai/blog/add-ai-chatbot-to-wordpress"
last_updated: "2026-10-29T21:38:34.296Z"
meta:
  description: "Add a WordPress chatbot without editing theme files. Step-by-step with screenshots: a chat button on every page with WPCode, or a chat in one page."
  "og:description": "Add a WordPress chatbot without editing theme files. Step-by-step with screenshots: a chat button on every page with WPCode, or a chat in one page."
  "og:title": "How to add an AI chatbot to your WordPress site - Blog - Chat Thing"
  "twitter:description": "Add a WordPress chatbot without editing theme files. Step-by-step with screenshots: a chat button on every page with WPCode, or a chat in one page."
  "twitter:title": "How to add an AI chatbot to your WordPress site - Blog - Chat Thing"
---

[← Back to blog](https://chatthing.ai/blog)**Blog**# **How to add an AI chatbot to your WordPress site**

![Zef](https://res.cloudinary.com/djyjvrw5u/image/upload/v1710941716/IMG_2278_d3b5e4fa69.jpg)

Zef

29 Oct 2026

~ 6 min read

---

![How to add an AI chatbot to your WordPress site](https://res.cloudinary.com/djyjvrw5u/image/upload/v1793305468/hero_9ef6db9cfa.png)

---

### **On this page**

1. [What you need](#what-you-need)
2. [Step 1: copy your embed code from Chat Thing](#step-1-copy-your-embed-code-from-chat-thing)
3. [Step 2: add a chat button to every page](#step-2-add-a-chat-button-to-every-page)
   1. Install WPCode
   2. [Paste the code into the footer](#paste-the-code-into-the-footer)
   3. [Why not paste it into the theme?](#why-not-paste-it-into-the-theme)
4. [Show the chat inside one page instead](#show-the-chat-inside-one-page-instead)
5. [If the chat button doesn't appear](#if-the-chat-button-doesnt-appear)
6. [Common questions](#common-questions)
7. [Before you go live](#before-you-go-live)

Your contact form is full of questions your website already answers. Opening hours, delivery times, "do you do gluten-free?", the same five things every week. An AI agent on your site can answer them in seconds, at 3am, from your own content.

This guide puts a Chat Thing agent on a WordPress site in two ways: a chat button on every page, or a chat window inside one page. The screenshots are from **WordPress 7.1** with the default **Twenty Twenty-Five** theme.

You don't need to edit any theme files, and you don't need a developer.

## What you need

- **A Chat Thing agent.** The website chat is on every plan, including Free. If you haven't built one yet, [build your first agent](https://chatthing.ai/docs/get-started/build-your-first-bot) and [add your website as a knowledge source](https://chatthing.ai/docs/knowledge/website) so it answers from your own pages.
- **A WordPress site where you can install plugins.** That covers any self-hosted WordPress site. On WordPress.com, every paid plan can install plugins, starting with Personal; the Free plan can't.
- **About ten minutes.**

## Step 1: copy your embed code from Chat Thing

Open your agent in Chat Thing and click **Embed** at the top right of its dashboard.

![The top of an agent's dashboard in Chat Thing, with the Embed, Test and Open bot buttons](https://res.cloudinary.com/djyjvrw5u/image/upload/v1793305628/01_chat_thing_embed_button_36aeae2fb4.png)

The **Embed your bot** dialog has two kinds of code:

- **Embed as chat widget** adds a round chat button to the corner of every page. This is what most sites want.
- **Embed as an iFrame** shows the chat inside one page, which suits a help or contact page.

Click the copy icon next to the one you want. Copy it from the dialog rather than typing it, because it already contains your agent's ID and any colour or language settings you've made. The widget code looks like this, with your own ID:

```
<script src="https://chatthing.ai/chat-widget.js" type="text/javascript" id="YOUR_BOT_ID" async defer></script>

```

If you've changed the widget's theme or language, the dialog adds a second line starting `<script>window.chatThingConfig`. Copy both lines together.

## Step 2: add a chat button to every page

The cleanest way to add code to every page of a WordPress site is a header-and-footer plugin. We use **WPCode**, which is free and has more than 3 million active installs.

### Install WPCode

1. In your WordPress dashboard, go to **Plugins** > **Add Plugin**.
2. Search for **WPCode**.
3. On **WPCode - Insert Headers and Footers + Custom Code Snippets**, click **Install Now**, then **Activate**.

![The Add Plugins screen in WordPress with WPCode as the first search result](https://res.cloudinary.com/djyjvrw5u/image/upload/v1793305631/02_wpcode_plugin_search_22eaf26de1.png)

### Paste the code into the footer

1. Go to **Code Snippets** > **Header & Footer**.
2. Paste the widget code into the **Footer** box. WPCode prints it just before the closing `</body>` tag on every page, which is where the widget belongs.
3. Click **Save Changes**.

![WPCode's Global Header and Footer screen with the Chat Thing widget code in the Footer box](https://res.cloudinary.com/djyjvrw5u/image/upload/v1793305634/03_wpcode_footer_code_3a87dea1be.png)

Open your site in a new tab and the chat button is in the bottom-right corner.

![The test bakery site with the Chat Thing chat button in the bottom-right corner](https://res.cloudinary.com/djyjvrw5u/image/upload/v1793305637/04_chat_button_on_site_7f535a6995.png)

Click it and ask a question. For this guide we built a demo agent for a made-up bakery, gave it a page of bakery information and set its colours to match the site in the web channel's **Appearance & branding** settings. Yours will use your own agent's name, colours and welcome message.

![The chat window open on the bakery site, with the agent answering "How much notice do you need for a birthday cake?"](https://res.cloudinary.com/djyjvrw5u/image/upload/v1793305640/05_agent_answering_395d405928.png)

On phones, the chat opens full screen so it's easy to type into, and closes back to the button.

![The chat open full screen on a phone, answering a question about gluten-free bread](https://res.cloudinary.com/djyjvrw5u/image/upload/v1793305643/06_mobile_full_screen_2a0d9d3911.png)

### Why not paste it into the theme?

Older guides tell you to paste the code into your theme's `footer.php`. Twenty Twenty-Five, and most new themes, are block themes, so there's no `footer.php` to edit. Even on older themes, a theme update can wipe out code you've added by hand. A plugin keeps the code safe when you change or update your theme.

## Show the chat inside one page instead

If you'd rather have the chat sit on a help or contact page, use the iframe code instead.

1. Open the page in the WordPress editor.
2. Click the **+** (Block Inserter) at the top left, search for **Custom HTML** and add the block where you want the chat.

   ![The WordPress block inserter with Custom HTML as the search result](https://res.cloudinary.com/djyjvrw5u/image/upload/v1793305645/07_custom_html_block_0b7d6cdcfb.png)
3. Click **Edit code** in the block toolbar and paste the iframe code into the **HTML** tab.
4. Wrap it in `<div>` and `</div>`, like this:

   ```
   <div><iframe src="https://app.chatthing.ai/bots/YOUR_BOT_ID/embed" width="100%" height="600" frameborder="0" allow="clipboard-write; microphone;"></iframe></div>

   ```![WordPress's Edit code dialog with the iframe code wrapped in a div](https://res.cloudinary.com/djyjvrw5u/image/upload/v1793305646/08_edit_code_dialog_b9effed9f8.png)
5. Click **Update**, then publish the page.

Block themes need the `<div>`. Without it, Twenty Twenty-Five sizes the chat to the content width but doesn't centre it, so it sits off to the left of your text. With the wrapper, it lines up with the rest of the page.

![Side by side: the chat iframe pasted as copied sits off to the left; wrapped in a div, it lines up with the page text](https://res.cloudinary.com/djyjvrw5u/image/upload/v1793305648/09_iframe_before_after_68092dfb58.png)

The editor preview may look odd while you're editing, so check the published page instead.

Keep the `allow="clipboard-write; microphone;"` part of the code. The microphone permission is what lets visitors talk to the agent instead of typing.

## If the chat button doesn't appear

Work through these in order.

1. **Check the code is on the live page.** Open your site, right-click and choose **View page source**, then search for `chat-widget.js`. If it isn't there, the code didn't save, or you pasted it somewhere that only applies to one page.
2. **Clear your cache.** Caching plugins and hosting caches can keep serving the page from before you added the code. WPCode reminds you about this when you save. Clear the cache, then check again in a private window.
3. **Check your cookie banner.** Some consent plugins block third-party scripts until a visitor accepts. If the button only appears after you click "Accept", that's why. Check how your consent tool categorises the script.
4. **Check for something covering it.** A cookie banner or another chat tool in the same corner can sit on top of the button. You can move the widget to the bottom left with a line of config (see [customise the widget with code](https://chatthing.ai/docs/channels/website/customise-with-code)).
5. **Check your security headers.** If your host or a security plugin sets a Content Security Policy, it needs to allow `https://chatthing.ai` for scripts and `https://app.chatthing.ai` for frames.

Ad blockers and some company networks block chat widgets too. You can't control what your visitors run, so keep another way to contact you on the page. There's more in the [widget troubleshooting guide](https://chatthing.ai/docs/channels/website/troubleshooting).

## Common questions

**Do I need a WordPress chatbot plugin?** No. WPCode is a general plugin for adding code to your site, and it works with Chat Thing's embed code like any other. Your agent lives in Chat Thing, so when you add knowledge or change the welcome message, your site shows the change without a plugin update.

**Does it work on a staging site?** Yes. Chat Thing doesn't restrict which domains can load your agent, so you can try it on staging before going live. If an agent should only be used by certain people, protect it with a password instead.

**Do I need to re-paste the code when I change the agent?** Only for the chat button's colour and icon, the widget language and the first message preview, which are written into the code. Changes inside the chat itself, like the welcome message and the agent's answers, show up straight away.

**Does it work with WooCommerce?** Yes. WooCommerce runs on WordPress, so the same steps put the chat on your shop pages.

**Can it answer from my WordPress content?** Yes. Add your website as a knowledge source and Chat Thing reads your pages, so the agent answers from what's on them. When you edit a page, the agent learns the change at the next sync. You can sync by hand on any plan, or [on a daily, weekly or monthly schedule](https://chatthing.ai/docs/knowledge/keep-it-up-to-date) on Standard and above.

## Before you go live

Ask your agent the ten questions your customers ask most, and check the answers against your site. Our [launch checklist](https://chatthing.ai/docs/get-started/launch-checklist) covers the rest: the welcome message, handing over to a human, and what the agent should say when it doesn't know.

If you don't have an agent yet, you can [build one free](https://app.chatthing.ai/app/auth/register) and have it on your WordPress site this afternoon.

### **Related articles **

[![Introducing voice calls: your AI agent, now speaking](https://res.cloudinary.com/djyjvrw5u/image/upload/v1790774206/hero_1fc867b2a9.png)](https://chatthing.ai/blog/introducing-voice-calls) [<h4>Introducing voice calls: your AI agent, now speaking</h4>](https://chatthing.ai/blog/introducing-voice-calls)

Visitors can now talk to your Chat Thing agent from your web chat. It answers from your knowledge, uses your power-ups and keeps your choice of AI model, while your website responds around the conversation.

[![Turn a WebMCP-enabled website into a copilot with Chat Thing](https://res.cloudinary.com/djyjvrw5u/image/upload/v1789726192/chat_thing_webmcp_blog_hero_f20eb2715d.png)](https://chatthing.ai/blog/chat-thing-webmcp-website-copilot) [<h4>Turn a WebMCP-enabled website into a copilot with Chat Thing</h4>](https://chatthing.ai/blog/chat-thing-webmcp-website-copilot)

Chat Thing can now discover the tools a WebMCP-enabled page exposes and let an embedded agent use them. Add the widget, switch on WebMCP, and the page has a conversational copilot.

[![SupportBench: we tested 7 AI models as customer support agents](https://res.cloudinary.com/djyjvrw5u/image/upload/v1787909980/supportbench_a_v3_wordmark_e65734419a.png)](https://chatthing.ai/blog/supportbench) [<h4>SupportBench: we tested 7 AI models as customer support agents</h4>](https://chatthing.ai/blog/supportbench)

We tested seven AI models on 1,085 support conversations. Gemini 3.7 Flash led the main score, while Grok 4.6 wrote the preferred reply most often.

<dl>

<dt>**Previous **</dt>
<dd>[← MCP servers, Make scenarios and meeting booking](https://chatthing.ai/blog/mcp-servers-make-scenarios-and-meeting-booking)</dd>

</dl>