How to Build an AI Chatbot for Your Website (With n8n + Claude)

Why Add an AI Chatbot to Your Website?

Visitors land on your site, scan for 10 seconds, and leave. That is the reality for most business websites. A well-built AI chatbot changes the dynamic entirely — it turns a passive page into an interactive conversation.

The numbers speak for themselves: 67% of consumers worldwide have interacted with a chatbot in the past year, and businesses using AI-powered chat report saving up to 30% on customer support costs. But the real advantage goes beyond cost savings.

Unlike traditional FAQ bots that match keywords to pre-written answers, an AI chatbot powered by a large language model actually understands context and natural language. A visitor can ask “do you work with Shopify stores in France?” and get a meaningful, relevant answer — not a generic “please contact us.”

• 24/7 availability — Your chatbot answers questions at 3 AM on a Sunday, across every time zone
• Lead qualification — The bot gathers project details, budget ranges, and timelines before you ever open your inbox
• Multilingual support — One chatbot handles English, French, or any language the AI model supports
• Visitor engagement — Visitors who interact with a chatbot are 2-3x more likely to convert than those who just browse

We built exactly this for the SmartFlow website — and this article walks you through the entire process, from architecture to deployment.

Choosing Your AI Backend

The AI model you choose determines the quality of every conversation your chatbot has. Here is a practical comparison of the main options available in 2026:

OpenAI GPT-4

The most well-known option. GPT-4 is powerful and widely supported, with extensive documentation and community resources. However, costs add up quickly at scale — especially if conversations run long. The API can also experience latency spikes during peak hours.

Anthropic Claude

Claude stands out for its excellent reasoning capabilities and large context window. It follows instructions precisely, which is critical when you need the bot to stay on-topic and represent your business accurately. Claude also offers native tool use, competitive pricing (especially the Haiku model for chat), and strong multilingual support.

Open-Source Models (Llama, Mistral)

Free to use, but you need to host them on your own GPU infrastructure. Running a 70B parameter model requires at least an A100 GPU ($1-2/hour), and you are responsible for uptime, scaling, and model updates. Great for privacy-critical applications, but overkill for a website chatbot.

Why We Chose Claude

For the SmartFlow chatbot, we needed a model that could:

• Follow a system prompt precisely — stay in character as a SmartFlow assistant, never drift into generic AI behavior
• Handle French and English natively — our site serves both markets, and the bot must respond in the visitor’s language
• Support tool use — so we can extend capabilities later (CRM lookups, appointment booking)
• Keep costs low — Claude Haiku delivers excellent quality at a fraction of the cost of larger models

Claude checked every box. The instruction-following accuracy alone was worth the choice — when you tell Claude “keep answers under 3 sentences for simple questions,” it actually does.

The Architecture: n8n as the Brain

The secret to building a maintainable AI chatbot is not writing a custom backend. Instead, we use n8n — an open-source workflow automation platform — as the orchestration layer between the frontend widget and the Claude API.

Here is the complete data flow:

How Each Node Works

• Webhook node — Receives POST requests from the chat widget. Each request includes the user’s message, a session ID, and the page language (EN/FR)
• Code node (Memory Manager) — Retrieves the conversation history for this session from n8n’s static data, appends the new message, trims old messages beyond the context window, and cleans up expired sessions
• HTTP Request node — Sends the full conversation (system prompt + message history) to the Claude API using Anthropic’s Messages endpoint
• Response formatter — Extracts Claude’s response text, stores the assistant message back in session memory, and returns a clean JSON response to the widget

Why n8n Over a Custom Backend

You could build this with Express.js, FastAPI, or any backend framework. But n8n offers distinct advantages for a chatbot specifically:

• Visual workflow — Every step is visible. Non-technical team members can understand the flow at a glance
• Easy prompt iteration — Change the system prompt in the n8n UI, no redeployment needed. This is critical during the first weeks of tuning
• No server code to maintain — n8n handles HTTP parsing, error handling, retries, and logging out of the box
• Built-in error handling — If the Claude API returns an error, n8n can retry, send a fallback response, or notify you via Slack
• Extensible — Want to add lead capture to a CRM? Log conversations to a database? Add another node — no refactoring

Building the Chat Widget

The frontend widget is what visitors actually see and interact with. We built ours from scratch with a few non-negotiable requirements:

Pure Vanilla JavaScript

No React. No Vue. No framework at all. The chatbot widget is a single JavaScript file that creates its own DOM elements, styles itself with injected CSS, and communicates with the n8n webhook via fetch(). Zero dependencies means:

• No conflicts with whatever stack your site uses (static HTML, WordPress, Next.js — it does not matter)
• Under 15KB total — the entire widget, including all styles and logic, loads faster than a single hero image
• No build step — edit the JS file, upload it, done

Automatic Language Detection

The widget reads the page’s lang attribute to determine whether to display the interface in English or French. Placeholder text, default greeting, and even the send button label adapt automatically. The detected language is also sent to n8n so Claude responds in the correct language.

Design Details That Matter

• Dark theme matching the site’s design system (our accent colors, border radius, Inter font)
• Typing indicator — animated dots appear while Claude is generating a response
• Auto-scroll — the chat window scrolls to the latest message smoothly
• Responsive — full-width on mobile, fixed-position popup on desktop
• Smooth open/close animation — the widget scales in from the bottom-right corner

Crafting the System Prompt

The system prompt is arguably the most important piece of the entire chatbot. A bad system prompt produces a generic, unhelpful bot. A great one produces a knowledgeable assistant that genuinely represents your business.

Key Principles We Follow

• Define the role explicitly — “You are the SmartFlow assistant, helping visitors learn about our automation and AI integration services.” Not “you are a helpful AI”
• Include business context — Services offered, pricing ranges, areas of expertise, technologies used. The more context Claude has, the better it answers
• Set clear boundaries — What the bot should and should not answer. It should not give legal advice, make up pricing, or pretend to be a human
• Multilingual instructions — “Always respond in the same language the user writes in. If the user writes in French, respond in French”
• Conciseness rules — “For simple questions, respond in 2-3 sentences maximum. Only provide detailed answers when the question warrants it”
• Include a CTA — “For serious project inquiries, guide the visitor toward the contact form at /contact”

The system prompt is not a one-time thing. Plan to iterate on it weekly for the first month. Watch real conversations, identify where the bot falls short, and refine. The difference between version 1 and version 5 of your system prompt is enormous.

Conversation Memory Without a Database

Most chatbot tutorials tell you to set up Redis or PostgreSQL for conversation memory. We skipped all of that. Here is why — and how.

n8n Static Data as Memory Store

n8n workflows have a built-in feature called static data — a persistent key-value store scoped to each workflow. We use it to store conversation histories, keyed by session ID:

• Each session ID maps to an array of message objects ({"role": "user", "content": "..."})
• A timestamp tracks when each session was last active
• The Code node reads, updates, and writes this data on every request

Session Management

• Session ID generation — The widget generates a random ID on first load and stores it in sessionStorage. This means the session persists across page navigation but resets when the browser tab closes
• Auto-cleanup — Every incoming request triggers a cleanup pass. Sessions older than 2 hours are automatically purged from static data
• Context window — We keep the last 12 messages (6 user + 6 assistant) per session. This provides enough context for coherent multi-turn conversations while keeping API costs low

Why This Works

For a website chatbot, this approach is ideal. Conversations are short-lived (most are under 5 messages), traffic is moderate (not thousands of concurrent sessions), and there is zero infrastructure to manage. No database server, no connection pooling, no schema migrations. n8n handles persistence natively.

Deploying to Every Page

Once the widget and workflow are ready, deployment is the easy part.

One Script, Every Page

The chatbot is loaded via a single line at the bottom of every HTML page:

<script src="/js/chatbot.js?v=3" defer></script>

• Single file — Update chatbot.js once and the change is live on every page instantly
• Cache busting — The ?v=3 query parameter forces browsers to fetch the latest version after updates. Increment it when you push changes
• defer attribute — The script loads without blocking page rendering. The chatbot appears after the page is fully interactive
• No build step, no bundler — It is a plain JavaScript file. Edit in any text editor, upload via SCP or SFTP, done

For a static site like ours (no framework, just HTML files served by Nginx), this is the simplest possible deployment strategy. For WordPress or other CMS platforms, you would add the script tag to the theme footer template for the same effect.

Real Costs: A Transparent Breakdown

One of the biggest concerns with AI chatbots is cost. Here is exactly what our SmartFlow chatbot costs to run:

The cost scales linearly with usage. Even at 1,000 conversations per month (which would be excellent traffic for a services website), the Claude API cost would be around $10-15/month. Still a fraction of any SaaS alternative.

Results and Next Steps

Here is what we achieved with this setup:

• Live on 33 pages — Every page on smrtflow.io, both English and French versions
• Fully bilingual — The bot detects the page language and responds accordingly. French visitors get French, English visitors get English
• Average response time: under 2 seconds — From the moment a visitor hits send to the response appearing in the chat
• Built and deployed in a single afternoon — From first webhook to live on all pages

What’s Next

The current implementation is a solid foundation. Here is what we plan to add:

• Lead capture — When a visitor shows buying intent (asks about pricing, timelines, or specific services), prompt them to leave their email directly in the chat
• CRM integration — Push qualified leads and conversation summaries into a CRM automatically via n8n
• Analytics on common questions — Log conversation topics to identify what visitors ask most, then improve site content to answer those questions proactively
• Tool use — Let Claude call real tools: check availability, pull portfolio examples, or even start a booking flow

The beauty of this architecture is that every improvement is just another n8n node. No refactoring, no redeployment of the widget, no breaking changes. The workflow grows organically as your needs evolve.

Should You Build Your Own?

If you have a static website or a simple CMS, basic comfort with APIs, and access to a VPS (or n8n Cloud), you can absolutely build this yourself. The total implementation time is 4-8 hours for someone comfortable with webhooks and JavaScript.

If you need advanced features (multi-agent routing, complex lead scoring, integration with enterprise tools), or you simply want it done right the first time without the learning curve, that is exactly the kind of project we handle at SmartFlow.

Either way, the days of paying $100+/month for a basic chatbot are over. With n8n and Claude, you get a smarter bot for a fraction of the cost — and you own every piece of it.