Embedding an AI chat widget on your site with n8n (Chat Trigger and @n8n/chat)

A contact form or a generic inbox is still the default point of contact on most marketing sites — and it is also the slowest one to respond. A visitor torn between two packs, or looking for a precise answer at 10pm, won't wait until the next morning. n8n's Chat Trigger node, paired with the open-source @n8n/chat widget, lets you put a conversational assistant directly on your site, wired to your own workflows and — if you want — to your own knowledge base, without depending on a usage-billed chatbot SaaS.

Why go through n8n instead of a dedicated chatbot SaaS

Tools like Intercom, Crisp, or Drift offer built-in AI modules, but at a monthly subscription that climbs quickly past a few hundred conversations, with limited access to the bot's internal logic. A chat built on n8n flips that relationship: cost is limited to the API calls of whichever language model you pick (often a fraction of a cent per conversation with an economical model), and the workflow processing each message stays entirely under your control — you can wire it to your CRM, your Supabase database, or a RAG pipeline that answers from your own documents rather than from the model's generic training knowledge.

The value of a well-built chatbot isn't just anecdotal. A study by Zarouali and co-authors, published in 2018 in Cyberpsychology, Behavior, and Social Networking (study link), shows that perceived usefulness and the affective usefulness a user feels during the exchange directly shape their attitude toward the brand — a chatbot that answers fast and accurately improves the perception of the whole site, not just the conversation itself.

The Chat Trigger node: two ways to publish a chat

n8n distinguishes two usage modes for a workflow triggered by the Chat Trigger node:

• Hosted Chat: n8n serves the chat page directly, with a dedicated URL you can share as-is (handy for internal support or a quick test);
• Embedded Chat: your own web page calls the Chat Trigger's webhook through the @n8n/chat widget (or an interface you build yourself) — this is the relevant mode for an assistant integrated into your site's design.

In both cases, the workflow behind the node stays the same: a trigger that receives each message, usually followed by an AI Agent node that generates the reply.

Step 1 — Configure the Chat Trigger node

In the n8n canvas, add a Chat Trigger node as your workflow's entry point and set three fields before publishing anything:

• Authentication: None for an unrestricted public chat, Basic Auth for a shared username/password (useful for a demo chat reserved for one client), or n8n User Auth to restrict access to users logged into your instance;
• Public availability: leave this off while you build and test the workflow from n8n's manual chat interface, then turn it on only once the behavior is validated — this is the setting that makes the URL actually reachable from outside;
• Allowed Origins (CORS): list explicitly the domain(s) the widget will be called from. Leaving this field at * works fine in testing but exposes the webhook to any third-party site in production — see our n8n webhook security guide for the same best practices applied to a classic HTTP webhook.

Once enabled, the node displays a Chat URL: that's the webhook the widget will call.

Step 2 — Wire up an AI Agent with memory, and ideally RAG

Downstream of the Chat Trigger, an AI Agent node generates the reply. Two settings change everything in how capable the assistant feels:

• Conversation memory (Postgres Chat Memory or Simple Memory depending on volume, see our Simple Memory vs Postgres Chat Memory comparison), so the agent remembers the ongoing exchange instead of asking again for information given three messages earlier;
• Wiring it to a Supabase pgvector database rather than relying solely on the model's general knowledge, so the agent answers from your own documents (FAQ, catalog, procedures) instead of inventing a plausible-sounding answer. This principle, formalized as Retrieval-Augmented Generation, comes from a landmark paper by Lewis et al., published at NeurIPS 2020 (Google Scholar page): pairing a generative model with a document-retrieval module measurably reduces the risk of hallucination compared to a model answering purely from its internal parameters. Our RAG guide with Supabase pgvector walks through the full setup, and our article on document chunking avoids the most common pitfall (poorly split chunks that break the context).

Step 3 — Embed the @n8n/chat widget on your page

The fastest way to display a chat on a plain HTML page is via CDN, with no build step or install:

<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: 'https://your-n8n-instance.example.com/webhook/xxxxxxxx-chat',
  });
</script>

For a React, Vue, or Next.js project that already has a build pipeline, installing via npm (npm i @n8n/chat) unlocks more configuration options: window mode (a floating button that opens a chat panel) or fullscreen mode (the chat fills its whole container, handy on a dedicated "Assistant" page), custom welcome messages (initialMessages), and visual customization through CSS variables to match your brand colors.

Securing a public widget

A public chat is still an entry point exposed to the internet, and it deserves the same precautions as a regular webhook:

• Restrict Allowed Origins to your actual domain rather than a wildcard, to stop a third-party site from quietly embedding your webhook and burning through your AI usage quota;
• Monitor the volume of calls to the language model to catch abnormal usage — our article on rate limits for the OpenAI and Anthropic APIs explains how to handle a 429 error cleanly instead of letting the workflow fail silently;
• Avoid feeding sensitive data into the agent's system prompt that any visitor could surface by asking the right questions — the same risk described in our guide on prompt injection in an n8n AI agent.

What if your users prefer WhatsApp or an existing channel

An on-site widget works well for a visitor discovering your offer, but part of your audience sometimes prefers to keep talking on a channel they've already got open. The same RAG-powered AI Agent can be exposed in parallel on WhatsApp — see our RAG chatbot on WhatsApp tutorial — without duplicating the business logic: only the trigger changes, the AI Agent node and the knowledge base stay identical.

Build yours without starting from scratch

Setting up this pipeline end to end — Chat Trigger, memory, Supabase vector database, source-cited response prompt — takes several hours of configuration and testing the first time around. The RAG Assistant Pack ships the four workflows already built (PDF ingestion, chatbot with citations, Notion sync, question-answering API), ready to import and wire up to this widget with a few settings instead of an empty canvas.