Building an AI Customer Service Chatbot for WordPress

🇹🇷 Türkçe: Bu yazının Türkçesini oku →

Most “AI chatbot” plugins for WordPress are glorified FAQ search bars. A genuinely useful chatbot needs to understand your specific products, policies, and business context. This requires RAG (Retrieval-Augmented Generation) — grounding the AI in your actual content before it generates a response.

I want to set expectations before you write a line of code, because I have watched this project get sold wrong more than once. A chatbot is not a brain you install. It is a very good librarian sitting in front of your content, and it can only be as good as the shelf you built for it. Every failure I have seen in production traces back to that one sentence: someone expected intelligence and shipped a thin knowledge base. Get the content right and the rest of this is plumbing you can trust.

The illusion of intelligence lives in the content

Let me date myself, because it is the whole point. Long before “RAG” was an acronym, I built interactive kiosks and multi-user experiences in Macromedia Director and Lingo — trade-show installations where a visitor would type a question and the screen would answer as if it understood them. It did not understand anything. Every convincing answer was something my team had authored into the cast beforehand; the “intelligence” was a lookup dressed up in motion and sound. The day a visitor asked something we had not scripted, the illusion collapsed into a canned apology, and everyone in the booth felt it.

Thirty years and a genuine language model later, the architecture is smarter but the law has not changed. Claude is a far better improviser than a Lingo script — but ground it in a five-page FAQ and you have rebuilt the same brittle kiosk with a bigger electricity bill. The retrieval layer is the modern cast library. That is why I spend the first half of every one of these builds on the knowledge base and only the second half on the model. Reverse that order and you will ship something that demos beautifully and falls over on its third real customer.

Architecture Overview

Customer Message
→ Embed query (vector)
→ Search knowledge base (similarity)
→ Retrieve relevant context (products, policies, FAQ)
→ Send to Claude with context
→ Return answer
→ Log conversation

The key insight: the AI doesn’t memorize your product catalog. For every customer question, it searches your content, finds the relevant pieces, and generates a response based on what it found.

Step 1: Build Your Knowledge Base

Your chatbot is only as good as the content it can search. Extract and structure:

Product data (from WooCommerce):

async function extractProductKnowledge() {
const products = await wooApi.get('products', { per_page: 100 });
return products.data.map(p => ({
type: 'product',
title: p.name,
content: ${p.name}. ${stripHtml(p.description)}. Price: $${p.price}. ${p.stock_status === 'instock' ? 'In stock' : 'Out of stock'}. Categories: ${p.categories.map(c => c.name).join(', ')}.,
metadata: { id: p.id, sku: p.sku, url: p.permalink }
}));
}

Policies (shipping, returns, FAQ pages):

async function extractPolicyPages() {
const pageIds = [123, 456, 789]; // Shipping, Returns, FAQ page IDs
const pages = await Promise.all(
pageIds.map(id => wpApi.get(pages/${id}))
);
return pages.map(p => ({
type: 'policy',
title: p.data.title.rendered,
content: stripHtml(p.data.content.rendered),
metadata: { id: p.data.id, url: p.data.link }
}));
}

Step 2: Create Vector Embeddings

Convert your knowledge base into vector embeddings for semantic search:

const { PineconeClient } = require('@pinecone-database/pinecone');

async function indexKnowledge(documents) {
const pinecone = new PineconeClient();
await pinecone.init({ apiKey: process.env.PINECONE_API_KEY });
const index = pinecone.Index('wordpress-chatbot');

for (const doc of documents) {
// Generate embedding via OpenAI or Voyage AI
const embedding = await generateEmbedding(doc.content);

await index.upsert([{
id: ${doc.type}-${doc.metadata.id},
values: embedding,
metadata: {
type: doc.type,
title: doc.title,
content: doc.content.substring(0, 1000),
url: doc.metadata.url
}
}]);
}
}

Step 3: The Chat Endpoint

app.post('/api/chat', async (req, res) => {
const { message, session_id } = req.body;

// 1. Search knowledge base
const queryEmbedding = await generateEmbedding(message);
const searchResults = await pineconeIndex.query({
vector: queryEmbedding,
topK: 5,
includeMetadata: true
});

// 2. Build context from results
const context = searchResults.matches
.map(m => [${m.metadata.type}] ${m.metadata.title}: ${m.metadata.content})
.join('\n\n');

// 3. Get conversation history
const history = await getConversationHistory(session_id);

// 4. Generate response with Claude
const response = await anthropic.messages.create({
model: 'claude-sonnet-4-20250514',
max_tokens: 500,
system: You are a helpful customer service agent for [Store Name].

Answer questions using ONLY the provided context. If the context doesn't contain
the answer, say you'll connect them with a human agent.
Never make up product details, prices, or policies.
Be concise and friendly.

Context:
${context},
messages: [
...history,
{ role: 'user', content: message }
]
});

const answer = response.content[0].text;

// 5. Save to conversation history
await saveMessage(session_id, 'user', message);
await saveMessage(session_id, 'assistant', answer);

res.json({ answer, session_id });
});

Step 4: The Frontend Widget

A simple chat widget embedded via WordPress shortcode or plugin:

class ChatWidget {
constructor(container, apiUrl) {
this.container = container;
this.apiUrl = apiUrl;
this.sessionId = this.getSessionId();
this.render();
}

getSessionId() {
let id = sessionStorage.getItem('chat_session');
if (!id) {
id = crypto.randomUUID();
sessionStorage.setItem('chat_session', id);
}
return id;
}

async sendMessage(message) {
this.addMessage('user', message);
this.showTyping();

const response = await fetch(this.apiUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
message,
session_id: this.sessionId
})
});

const data = await response.json();
this.hideTyping();
this.addMessage('assistant', data.answer);
}
}

Handling Edge Cases

Product availability questions:

The chatbot checks real-time stock via the WooCommerce API rather than relying on cached knowledge base data.

Price inquiries:

Always pull current prices from WooCommerce. Cached prices in the vector DB may be stale.

Order status:

Require authentication before showing order details. Never expose order information based on email alone.

Human handoff:

When the AI can’t help or the customer is frustrated, escalate:

const HANDOFF_TRIGGERS = [
'speak to a human', 'real person', 'manager',
'this is not helpful', 'complaint'
];

if (HANDOFF_TRIGGERS.some(t => message.toLowerCase().includes(t))) {
return { answer: "I'll connect you with our team right away.", handoff: true };
}

Measuring Success

Track these metrics:

Cost Considerations

Compare this to a human agent handling 1,000 conversations: $2,000-4,000/month.

When I would not build this

A consultant earns their fee as much by talking clients out of projects as into them, so here is the honest counter-case. I would not build this if your store has fewer than a few hundred support conversations a month — the payback does not clear the maintenance cost, and a well-written FAQ page plus a contact form will serve you better with none of the moving parts. I would not build it if your policies change weekly and nobody owns re-indexing; a chatbot confidently quoting last month’s return window is worse than no chatbot at all. And I would not let it anywhere near order data, refunds, or account changes without hard authentication and a human in the loop — the handoff triggers above are a courtesy, not a security boundary.

The build below is genuinely worth it when you have steady volume, a repetitive question mix (sizing, shipping windows, compatibility, “do you have this in stock”), and someone accountable for keeping the knowledge base current. Those three conditions, in my experience, separate the deployments that quietly pay for themselves from the ones that get switched off after a bad week.

Conclusion

A RAG-powered chatbot grounded in your actual WordPress/WooCommerce content delivers genuine value — real answers about real products based on real policies. The technical stack (vector search + Claude) is mature and affordable. The key is data quality: your chatbot is only as good as the content you feed it. Start with products and FAQ, measure resolution rates, and expand coverage based on the questions it can’t answer. Treat the knowledge base as the product and the model as a component, and you will be on the right side of that line.