How to add an AI chatbot to your website with n8n (step by step)

Lots of people land on your website with a simple question: are you open on Saturday? How much does it cost? Do you deliver? If they can't find the answer in a few seconds, they leave. An AI chat that answers those questions with your business information, at any hour, is one of the most useful automations you can add to a small website.

In this guide we build it with n8n: the workflow receives the message from your site, hands it to an AI agent with your business instructions, and sends the reply back to the same chat window.

How it works, in one sentence

A small chat widget on your site sends each message to n8n; n8n passes it to an AI model along with your instructions and what's been said so far, and the widget shows the reply.

What you need

n8n up and running and reachable from the internet (if you don't have it yet, see how to install n8n for free with Docker).
An API key for an AI model, for example from OpenAI.
Access to edit your website's HTML (or a "custom code" slot, which almost every website builder has).

Step 1: the chat trigger

Create a new workflow and add the Chat Trigger node ("When chat message received"). This is the entry point: every message someone types on your site arrives here.

In its settings:

Turn on Make Chat Publicly Available, so your website can talk to the workflow without logging in to n8n.
Under Mode, choose Embedded Chat, because the chat will live inside your page.
Under Allowed Origins (CORS), enter your website's address (for example https://yourbusiness.com). That way only your site can use this chat.

Step 2: the AI agent

Connect an AI Agent node to the trigger. Inside it:

Chat Model: add OpenAI Chat Model (or another provider) with your API key.
Memory: add Simple Memory. It keeps the latest messages of each conversation so the chat understands follow-ups like "and on Sunday?" without the customer repeating everything.

Memory keeps conversations apart by session: each visitor gets their own, even when several are typing at once.

Step 3: your business instructions

What really decides whether the chat is useful is the agent's system message (in the AI Agent node options, "System Message"). That's where your opening hours, services, typical prices, service area and what to do when it doesn't know something go. A short example:

You are the website assistant for [BUSINESS NAME].
Reply in the customer's language, in 2-4 sentences, in a friendly tone.
Use only this information:
- Opening hours: [HOURS]
- Services and typical prices: [LIST]
- Service area: [AREA]
- Contact: [PHONE / EMAIL]
If you don't know something, or the customer wants to book or get a quote,
ask them to leave their email or phone number and say the team will get back to them.
Never make up prices, lead times or availability.

If you want to fine-tune it, the customer service AI agent prompt guide explains how to write these instructions in more detail.

Step 4: activate the workflow and copy the URL

Save the workflow and activate it. Then open the Chat Trigger node again and copy the production URL (the test URL only works while the editor is open; it's the same mistake we cover with webhooks).

Step 5: embed the chat on your website

n8n has an official chat widget, the @n8n/chat package. Paste this just before </body> on your site, replacing the URL with yours:

<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
<script type="module">
  import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';
  createChat({
    webhookUrl: 'YOUR_CHAT_TRIGGER_PRODUCTION_URL'
  });
</script>

When you reload the page, a chat button appears in the corner. The widget lets you change the welcome texts and colours; the package documentation lists every option.

Common mistakes

The chat works in the editor but not on the site. It's almost always because the test URL is being used, or the workflow isn't active.
A CORS error in the browser console. Your site's address doesn't match Allowed Origins. Check that it includes https:// and that the www matches.
Made-up answers. If the system message doesn't say what to do when information is missing, the model tends to fill the gaps. Tell it clearly not to invent anything and to ask for contact details instead.
Personal data. If the chat collects emails or phone numbers, mention it in your privacy policy and don't ask for more than you need.

Ideas to go further

Have the agent log the contacts visitors leave in Google Sheets and score them, as in qualifying leads with n8n and AI.
Let it check free slots and book, by connecting it to bookings with Google Calendar and n8n.
Reuse the same brain on WhatsApp with the AI WhatsApp agent.

Shortcut: agents that are already built

The WhatsApp support agent in the AgentKiosk pack comes with a ready-written customer service prompt, with rules to avoid making things up and to hand over to a person when needed; you can reuse that same prompt in your website chat. Everything comes as an n8n template you can import.

If you'd like to start with something free, download the WhatsApp agent and take a look at 7 AI automations for small businesses.