Intégrer un widget de chat IA sur son site avec n8n (Chat Trigger et @n8n/chat)

Un formulaire de contact ou une adresse e-mail générique reste le point de contact par défaut de la plupart des sites vitrines — mais c'est aussi celui qui répond le plus lentement. Un visiteur qui hésite entre deux packs ou qui cherche une réponse précise à 22h n'attend pas jusqu'au lendemain matin. Le node Chat Trigger de n8n, combiné au widget open source @n8n/chat, permet de poser un assistant conversationnel directement sur son site, branché sur ses propres workflows et — si on le souhaite — sur sa propre base documentaire, sans dépendre d'un SaaS de chatbot facturé à l'usage.

Pourquoi passer par n8n plutôt qu'un chatbot SaaS dédié

Des outils comme Intercom, Crisp ou Drift proposent des modules IA intégrés, mais à un abonnement mensuel qui grimpe vite dès qu'on dépasse quelques centaines de conversations, et avec un accès limité à la logique interne du bot. Un chat construit sur n8n inverse ce rapport : le coût se limite aux appels API du modèle de langage choisi (souvent quelques centimes par conversation avec un modèle économique), et le workflow qui traite chaque message reste entièrement sous votre contrôle — vous pouvez le brancher sur votre CRM, votre base Supabase, ou un pipeline RAG qui répond depuis vos propres documents plutôt que depuis les connaissances génériques du modèle.

L'intérêt d'un chatbot bien conçu n'est pas qu'anecdotique. Une étude de Zarouali et ses coauteurs, publiée en 2018 dans Cyberpsychology, Behavior, and Social Networking (lien vers l'étude), montre que l'utilité perçue et l'utilité affective ressenties par l'utilisateur pendant l'échange conditionnent directement son attitude envers la marque — un chatbot qui répond vite et juste améliore la perception globale du site, pas seulement la conversation elle-même.

Le node Chat Trigger : deux façons de publier un chat

n8n distingue deux modes d'usage pour un workflow déclenché par le node Chat Trigger :

• Hosted Chat : n8n sert directement une page de chat, avec une URL dédiée que vous pouvez partager telle quelle (utile pour un support interne ou un test rapide) ;
• Embedded Chat : votre propre page web appelle le webhook du Chat Trigger via le widget @n8n/chat (ou une interface que vous codez vous-même) — c'est le mode pertinent pour un assistant intégré au design de votre site.

Dans les deux cas, le workflow derrière le node reste identique : un déclencheur qui reçoit chaque message, généralement suivi d'un node AI Agent qui génère la réponse.

Étape 1 — Configurer le node Chat Trigger

Dans le canvas n8n, ajoutez un node Chat Trigger en entrée de workflow et réglez trois champs avant toute publication :

• Authentication : None pour un chat public sans restriction, Basic Auth pour un identifiant/mot de passe partagé (utile pour un chat de démo réservé à un client), ou n8n User Auth pour restreindre l'accès aux utilisateurs connectés à votre instance ;
• Public availability : laissez ce réglage désactivé pendant que vous construisez et testez le workflow depuis l'interface de chat manuelle de n8n, puis activez-le seulement une fois le comportement validé — c'est le réglage qui rend l'URL réellement accessible depuis l'extérieur ;
• Allowed Origins (CORS) : listez explicitement le ou les domaines depuis lesquels le widget sera appelé. Un champ laissé à * fonctionne en test mais expose le webhook à n'importe quel site tiers en production — voir notre guide de sécurisation des webhooks n8n pour les bonnes pratiques équivalentes côté HTTP classique.

Une fois activé, le node affiche une Chat URL : c'est ce webhook que le widget interrogera.

Étape 2 — Brancher un AI Agent avec mémoire, et idéalement du RAG

En sortie du Chat Trigger, un node AI Agent génère la réponse. Deux réglages changent tout dans la qualité perçue de l'assistant :

• La mémoire de conversation (Postgres Chat Memory ou Simple Memory selon le volume, voir notre comparatif Simple Memory vs Postgres Chat Memory), pour que l'agent se souvienne de l'échange en cours et ne redemande pas une information déjà donnée trois messages plus tôt ;
• Le branchement sur une base vectorielle Supabase pgvector plutôt que sur la seule connaissance générale du modèle, pour que l'agent réponde depuis vos documents (FAQ, catalogue, procédures) plutôt que d'inventer une réponse plausible. Le principe, formalisé sous le nom de Retrieval-Augmented Generation, vient d'un article de référence de Lewis et al., publié à NeurIPS 2020 (page Google Scholar) : coupler un modèle génératif à un module de recherche documentaire réduit nettement le risque d'hallucination par rapport à un modèle qui répond uniquement depuis ses paramètres internes. Notre guide RAG avec Supabase pgvector détaille la mise en place de bout en bout, et notre article sur le chunking des documents évite l'écueil le plus fréquent (des chunks mal découpés qui cassent le contexte).

Étape 3 — Embarquer le widget @n8n/chat sur votre page

Le moyen le plus rapide d'afficher un chat sur une page HTML classique est le CDN, sans build ni installation :

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

Pour un projet React, Vue ou Next.js déjà outillé en build, l'installation via npm (npm i @n8n/chat) donne accès à davantage d'options de configuration : mode window (bouton flottant qui ouvre une fenêtre de chat) ou fullscreen (le chat occupe tout son conteneur, utile sur une page dédiée « Assistant »), messages d'accueil personnalisés (initialMessages), et personnalisation visuelle via variables CSS pour reprendre les couleurs de votre charte.

Sécuriser un widget public

Un chat public reste un point d'entrée exposé sur internet, avec les mêmes précautions qu'un webhook classique :

• Restreindre Allowed Origins à votre domaine réel plutôt qu'à un joker, pour éviter qu'un site tiers n'embarque discrètement votre webhook et ne consomme votre quota d'appels IA ;
• Surveiller le volume d'appels au modèle de langage pour détecter un usage anormal — notre article sur les rate limits des API OpenAI et Anthropic explique comment réagir proprement à une erreur 429 plutôt que de laisser le workflow échouer en silence ;
• Éviter de faire remonter, dans le prompt système de l'agent, des données sensibles que n'importe quel visiteur pourrait faire ressortir en posant les bonnes questions — c'est le même risque que celui décrit dans notre guide sur la prompt injection dans un agent IA n8n.

Et si vos utilisateurs préfèrent WhatsApp ou un canal existant

Le widget sur site convient à un visiteur qui découvre votre offre, mais une partie de votre audience préfère parfois continuer une conversation sur un canal qu'elle a déjà ouvert. Le même AI Agent RAG peut être exposé en parallèle sur WhatsApp — voir notre tutoriel chatbot RAG sur WhatsApp — sans dupliquer la logique métier : seul le déclencheur change, le node AI Agent et la base de connaissances restent identiques.

Construire le vôtre sans repartir de zéro

Monter ce pipeline de bout en bout — Chat Trigger, mémoire, base vectorielle Supabase, prompt de réponse sourcée — représente plusieurs heures de configuration et de tests la première fois. Le Pack Assistant RAG fournit les quatre workflows déjà construits (ingestion PDF, chatbot avec citations, synchronisation Notion, API question-réponse), prêts à importer et à brancher sur ce widget en quelques réglages plutôt qu'en partant d'un canvas vide.