How to Add an AI Chatbot to WordPress (No Plugin Needed)

The code everyone copies to put an AI chatbot on WordPress works. That’s exactly the problem.

I put the most-copied version on a real WordPress install, then hit its endpoint ten times from a terminal with no login, no nonce and no cookie. All ten went through. Ten real calls to a real AI model, on my bill, from something that wasn’t my website.

So this is the honest version of how to add an AI chatbot to WordPress: the build, every way I managed to break it, and the hardened version I ended up with. 💡 I tested the whole thing for free on my own machine, and I’ll show you how to do that too.

Tested on WordPress 7.1.3, PHP 8.3 and WPCode 2.4.0. The Location behaviour in Step 1 is WPCode’s own, so check it still holds if you’re on a much newer version.

What this is, in plain words

A chat bubble sits in the corner of your site. A visitor clicks it, types a question, and an AI model answers in your words, following instructions you wrote.

You’re not installing someone else’s chatbot service. There’s no monthly fee to a third party, no branding you can’t remove, no visitor data sitting on a platform you don’t control. It’s your code, calling an AI model directly, and you decide what it’s allowed to say.

What it fixes, specifically:

• The same five questions, all day. Opening hours, pricing, do-you-cover-my-area. The bot answers at 2am without you.
• Visitors who leave rather than fill in a form. A chat box gets answered questions that a contact form never would.
• Paying monthly for a chat widget that puts its own logo on your site.

What it costs to run

Two honest options, and you can switch between them with one setting:

• A paid API key from OpenAI or Anthropic. You pay per message, usually a fraction of a penny each. Better answers, nothing to maintain.
• Free, forever, on your own server using Ollama. No key, no bill, no limit on messages. You need a machine you control with a few GB of spare RAM, so a VPS rather than shared hosting. Answers are noticeably weaker than a paid model.

Both routes run the exact same code. There’s a section further down on how I tested the whole thing for free before spending anything.

If you’d rather build it by hand and understand every line, keep reading. That’s what the rest of this is.

What you need

• A WordPress site you can install a plugin on (mine was a throwaway Docker install, and Hostinger is where I’d start if I were setting this up fresh today)
• The WPCode plugin, free version, for pasting snippets
• Permalinks set to anything except Plain (this one bites people, more below)
• An API key from OpenAI or Anthropic, or Ollama on your own machine if you want to spend nothing
• 30 minutes

What we’re building

A chat bubble in the corner of your site. A visitor clicks it, types a question, and your chosen AI model answers, with your instructions shaping what it says.

Three pieces make that work: a REST route your site exposes, a widget in the page that calls it, and your API key, which never leaves the server.

That diagram is the hardened version. The tutorial version is the same picture with the two gates missing, which is the whole story of this post.

How I tested this for free

I didn’t spend anything building this, and you don’t have to either.

Ollama runs an AI model on your own computer. It installs without sudo, and it exposes an OpenAI-compatible endpoint, meaning the same code that talks to OpenAI talks to it, with only the base URL changed.

ollama list
# qwen2.5:3b-instruct-q4_K_M    357c53fb659c    1.9 GB

In the chatbot settings I pointed the base URL at http://localhost:11434/v1, set the model name, and left the API key field empty:

provider=compatible  base_url=http://ollama:11434/v1
model=qwen2.5:3b-instruct-q4_K_M  key_set=no

That answered in 1.56 seconds on a CPU-only box with no GPU. I timed the model call five more times to be sure: 1.73 seconds median, 1.66 to 1.82 once it’s warm.

One thing that will confuse you if nobody says it: my first request took 6.9 seconds. Ollama loads the model into memory on demand, so the first answer after an idle spell is slow and every one after it isn’t. Don’t judge the setup by that first reply.

You can also just leave it like this. If you run your own VPS, Ollama answers every chat for free, forever, and no API bill ever arrives. That is a real option, not a demo mode.

The catch is honest and worth knowing before you plan around it: this needs a machine you control with a few GB of spare RAM. Normal shared hosting won’t run it, so for most people it’s a VPS or nothing.

Here’s the other honest limit: a 3B model gives visibly weaker answers than GPT-4o or Claude. Test your plumbing locally, then judge answer quality only once you point it at a paid key. And one more thing I’d rather say than hide: my Anthropic adapter was verified against a local Anthropic-shaped mock, not against api.anthropic.com.

Step 1: the PHP snippet (and the trap that eats it)

Do this:

1. Install and activate WPCode from Plugins > Add New.
2. Go to Code Snippets > Add Snippet, choose Add Your Custom Code, and pick PHP Snippet.
3. Paste the PHP in. If you’re using my files, that’s 01-paste-into-wpcode.php.
4. In the right-hand column, set Location to Run Everywhere. This one matters more than it looks.
5. Save, then switch the snippet to Active.

That’s the whole step. The rest of this section is why, and you can skip to Step 2 if you just want the thing working.

What that PHP actually does

It registers a REST route: a URL on your own site that your chat widget can post a question to. Your snippet takes the question, adds your instructions, calls the AI model with your key, and sends the answer back.

The part everyone gets right:

register_rest_route( 'myapi/v1', '/chat-bot/', array(
    'methods'             => 'POST',
    'callback'            => 'handle_chat_bot_request',
    'permission_callback' => '__return_true',
) );

The part almost nobody does:

register_rest_route( 'myapi/v1', '/chat-bot-config', array(
    'methods'  => 'GET',
    'callback' => 'load_chat_bot_base_configuration',
    // no permission_callback at all
) );

WordPress does warn you about that second one. It just sends the warning somewhere you will never look:

curl -s -D - -o /dev/null http://yoursite.test/wp-json/myapi/v1/chat-bot-config

HTTP/1.1 200 OK
X-WP-DoingItWrong: register_rest_route (since 5.5.0; The REST API route definition for
  myapi/v1/chat-bot-config is missing the required permission_callback argument...)

With WP_DEBUG_LOG switched on, debug.log stayed at 0 bytes. Core suppresses that notice on purpose during REST requests, because a PHP warning printed mid-request would corrupt the JSON. Reasonable, but it means the one message telling you your endpoint is unprotected goes into a response header, not your log.

Why that one Location setting decides whether anything works

Skippable if yours already works. Worth reading if it doesn’t, because this is the one I’d never seen written down anywhere and it cost me an afternoon on a real build.

In WPCode, a PHP snippet has a Location. Set it to Frontend Conditional Logic and your REST route is never registered at all. No error, no log line, nothing:

Location	Route in /wp-json/	POST /chat-bot/	debug.log
Run Everywhere	listed	200	0 bytes
Frontend Only	listed	200	0 bytes
Frontend Conditional Logic	absent	404 rest_no_route	0 bytes
Admin Only	absent	404 rest_no_route	0 bytes

The code was byte-identical in all four runs. Only the location changed.

The reason is in WPCode’s own source: Run Everywhere runs your snippet on plugins_loaded, which fires on every request including REST ones. Frontend Conditional Logic runs on wp, a hook a REST request never reaches. Nothing errors, so nothing logs.

🎯 Set the location to Run Everywhere. If your chatbot does nothing at all and your log is empty, check this before you check anything else.

Step 2: the widget

This is the part visitors actually see: the bubble, the panel, and the JavaScript that sends their question to the route you just built.

Do this: three more snippets, each added the same way as Step 1, each set to Active.

Snippet type	What goes in it	Location
HTML Snippet	the markup (02-html-block.html)	Site Wide Footer
CSS Snippet	the styles (03-styles.css)	Site Wide Header
JavaScript Snippet	the widget script (04-script.js)	Site Wide Footer

Not using WPCode for these? The HTML and JavaScript go in your theme’s footer.php before </body>, and the CSS goes in Appearance > Customise > Additional CSS.

Reload any page on the front end and the launcher appears in the bottom corner.

The endpoint line, and the two ways it goes wrong

The one line to get right is the endpoint, and the mistake to avoid is hardcoding it:

// Don't do this. It's your dev machine, not your visitor's
const apiUrl = 'http://ai-chatbot.local/wp-json/myapi/v1/chat-bot/';

When I left that in, the browser console said net::ERR_NAME_NOT_RESOLVED, then TypeError: Failed to fetch, and the visitor saw a generic error with no clue what happened.

There’s a nastier version of the same mistake. If your site is on HTTPS and your endpoint URL starts with http:// on a real domain, Chrome blocks the request outright:

Mixed Content: The page at 'https://yoursite.com/' was loaded over HTTPS, but requested
an insecure resource 'http://yoursite.com/wp-json/...'. This request has been blocked.

Worth knowing: http://localhost is exempt from that rule, so this never shows up while you’re testing locally. It appears the moment you go live.

Step 3: your API key, not in the snippet

Do this:

1. Get a key. OpenAI keys come from platform.openai.com, Anthropic keys from console.anthropic.com. Running Ollama locally? Skip this step entirely, you don’t need one.
2. Open wp-config.php and add this line above /* That's all, stop editing! */:

define( 'MY_CHATBOT_API_KEY', 'sk-your-key-here' );

1. Save, reload your site, and ask the bot something.

The PHP snippet reads that constant. Don’t paste the key into the snippet itself: a key in a WPCode snippet sits in your database, and in every backup and export of it.

If you got an answer, the build is done. Everything after this is making it yours, and knowing what to do when it breaks.

Make it yours

This is the part most tutorials skip, and it’s the part you’ll actually spend time on. None of it needs a code editor if you’re on the plugin version, and all of it is one CONFIG block if you’re on the snippets.

What it says before anyone types

Three fields, and they’re the three everyone changes first.

• Window title, the heading on the panel. “Ask us anything” beats “Chatbot”.
• First message, what it greets people with.
• Quick replies, the suggestion buttons under that greeting. Two or three, phrased the way a visitor would phrase them, because most people click one of these instead of typing.

In the snippets, those are title, startup_message and quick_replies at the top of the PHP file. In the plugin, they’re the first three boxes on the settings screen.

What it knows about your business

The system prompt is the most important field there is. It’s read on the server on every request, so a visitor can’t overwrite it or talk their way past it.

Here’s the thing nobody tells you, and it surprises everyone: the bot only knows what’s in that box. It does not read your pages, your posts or your products. If you want it answering questions about your prices, put your prices in there.

You answer questions for Example Plumbing in Bristol.
Boiler service £95. Emergency callout £120 plus parts. Bathrooms quoted on site.
Open Mon to Fri 8am to 6pm, Saturday mornings by arrangement, closed Sunday.
We cover Bristol and 20 miles around it.
To book: 0117 000 0000 or the form at /contact.
Answer briefly. If you don't know, say so and point them at the contact form.
Never invent a price.

The cost of that: it’s sent on every single message, so you pay for it every time. A tight prompt is cheaper than a long one, and pasting your whole FAQ in there gets expensive at volume.

Colours

Two values, not a theme editor: an accent colour and the text colour that sits on it. They flow through the launcher, the header and the visitor’s own message bubbles. Pick your brand colour and a text colour that reads clearly on it.

Swapping the model, including to a free local one

The same screen, pointed at two different providers. On the left, a local model through Ollama with the key field empty. On the right, OpenAI with a real key.

Nothing else changes. Not the widget, not the styles, not your prompt. Your visitors see no difference at all, which is what makes “test free locally, then switch to a paid key” a real workflow rather than a slogan.

The settings that control what a bad day costs you

These are the ones worth understanding before you leave it running. Every one is enforced on your server, before the AI model is ever called, so a refused request costs nothing.

Setting	What raising it costs you
Messages per visitor (per hour)	This is the ceiling on what one person can spend. 0 means no ceiling.
Max reply length	Longer answers, more cost per message, more rambling.
Max question length	Someone can paste a whole document in and you pay to read it.
Remembered exchanges	Better memory inside a conversation, but every remembered turn is re-sent and re-paid on every later message. This is the one that quietly multiplies a long chat.
Creativity (temperature)	0.7 is a sensible default. Above 1.2 it starts inventing. If it quotes your prices, go lower.
Timeout	Too short and a slow local model fails on its first request. Too long and it ties up a PHP worker.

When it breaks: 9 symptoms, 9 fixes

Here’s the part no tutorial includes. Every row is something I actually hit in this lab, and most of them are in the screenshots above.

What you see	What’s actually wrong	Fix
Widget does nothing, log empty, route 404s	Snippet Location is Frontend Conditional Logic	Set it to Run Everywhere
“Oops!” + Unexpected token '<' in console	Permalinks set to Plain. /wp-json/ returns HTML with a 200	Change permalinks, or call /?rest_route=
“Oops!” + ERR_NAME_NOT_RESOLVED	Hardcoded dev hostname in the JS	Use your real site URL
“Oops!” + Mixed Content ... blocked	HTTPS page calling an http:// endpoint	Use https://, or a relative URL
“Oops!”, 200 response, empty log	Bad API key, wrong model name, or DNS. All three look identical	curl the route and read the message field
Wrong icons / empty squares	Your theme already loads a different FontAwesome version	Drop the snippet’s <link> and use the theme’s
Chatbot forgets the previous message (only once you move history server-side)	Session id case-mangled on the way back in by sanitize_key()	Generate session ids in lowercase hex
Header says “Offline”	Config endpoint never answered	Check the route first, then the config values
Strangers using your credit	No nonce, no rate limit	See the next section

Two things that tripped me up worth calling out. response.ok is not “it worked”. Under Plain permalinks the route returns a perfectly valid 200 carrying an HTML page, and the kit’s JavaScript believes it. And a failing API key, a bad model name and an unresolvable host produce exactly the same “Oops!” with 0 bytes in the log every time.

Common mistakes (and how to avoid them)

• Leaving the route public with no rate limit. Ten unauthenticated requests landed, 10 of 10. Anyone with the URL can spend your API credit.
• Letting the browser send the conversation history. I planted a fake earlier turn saying “My campaign code is TOPAZ-8831” and asked the bot to repeat it. With no history it said “I dont know”. With the injected history it said TOPAZ-8831. The visitor controls what your model is told.
• Trusting the system prompt to keep it on topic. My snippet said “only answer digital marketing questions”. It wrote me a poem about the sea.
• Debugging with WP_DEBUG and expecting a log. For every failure above, the log stayed empty.
• Pasting your key into the snippet. Use wp-config.php.

What you should improve next

Three changes take this from a demo to something I’d leave on a client site.

Check a nonce. Hand the widget a wp_rest nonce and verify it. Give the rejection its own error code so the widget can tell “your token expired” apart from “you’re going too fast”, fetch a fresh one and retry once. That keeps the check working on a cached page.

Add a rate limit, in front of the provider. Mine is a counter in a transient. Six requests against a limit of three gave three 200s, then three 429s, and the refused ones never reached the model, so they cost nothing.

Keep the conversation on the server. Store history in a transient keyed by session id. The browser then sends one message and an id, so it can’t rewrite what the model sees.

After those three, the same abuse test that landed 10 of 10 against the tutorial build landed zero. And when the provider genuinely fails, the visitor gets a neutral sentence while the real cause goes to the log where the owner can read it.

Frequently asked questions

Do I need a plugin for this?
No, and that’s the point of the snippet build. You need WPCode to hold the snippets, but the chatbot itself is your own code, so nothing is hidden from you.

Will it answer questions about my own pages and prices?
Only if you tell it them. It doesn’t read your site. Everything it knows comes from the system prompt field, so your prices, hours and policies have to be typed in there. Searching your actual content is a much bigger build than this one.

How much does it cost to run?
The build costs nothing. Each conversation costs whatever your provider charges per token, and the tutorial version sends the entire history on every turn with no cap, so a long chat gets expensive quietly.

Can I use Claude instead of ChatGPT?
Yes. The request shape differs, so you need a small adapter per provider rather than one function with the URL swapped.

Why does my chatbot say “Oops” with nothing in the log?
Because that one message covers at least five unrelated causes. Start with curl on your route and read the response body, not the status code. The table above maps each body to its cause.

Is it safe to leave the endpoint public?
Not as written. A public endpoint with no nonce and no rate limit is a proxy to your paid API that anyone can drive.

Take the files

Everything in this post, as something you can actually run.

Which one? If you’re comfortable pasting code and want to read every line before it runs on your site, take the snippets. If you’d rather upload a zip, tick some boxes and get on with your day, take the plugin. Both are the hardened build. Neither is a cut-down version of the other.

Wrap-up

An AI chatbot on WordPress is genuinely a 30-minute build. The hard part isn’t getting it talking, it’s the gap between “it answers” and “it’s safe to leave running”. A nonce, a rate limit and server-side history are what close it.

If you’re new to editing site files at all, start with how to edit wp-config.php before you touch anything else.

If you get stuck on any of this, come and ask me in my Discord. I’d rather answer a question there than have you give up on it.