🇫🇷 Chat Trigger

Contacter Ocade Fusion

Le nœud Chat Trigger transforme vos workflows N8N en interfaces conversationnelles interactives. Que vous souhaitiez créer un chatbot interne pour tester vos automatisations, une page de chat hébergée par N8N, ou intégrer un assistant IA directement sur votre site web, ce nœud est la porte d’entrée vers l’interaction utilisateur. Ce guide vous accompagne dans la configuration complète des modes Hosted Chat et Embedded Chat, la personnalisation de l’interface, et l’intégration dans WordPress ou tout autre CMS.

Qu’est-ce que le nœud Chat Trigger ?

Le Chat Trigger est un nœud déclencheur N8N qui permet d’établir une communication bidirectionnelle entre un utilisateur et un workflow. Contrairement aux triggers classiques (webhook, cron, événement), le Chat Trigger ouvre un canal de conversation : l’utilisateur envoie un message, le workflow le traite, et une réponse est retournée dans l’interface de chat.

Ce nœud est la brique essentielle pour construire des chatbots intelligents avec N8N. Associé à un nœud LLM Chain ou un Agent IA, il permet de créer des assistants conversationnels capables de répondre à des questions, d’exécuter des actions, ou de collecter des informations auprès des utilisateurs.

Les trois modes du Chat Trigger

Le Chat Trigger propose trois niveaux d’exposition de votre chatbot, du plus privé au plus public.

Mode privé : chat interne N8N

Par défaut, l’option Make Chat Publicly Available est désactivée. Le chat est alors accessible uniquement depuis l’interface N8N, via le bouton « Chat » dans la barre d’outils du workflow. Ce mode est idéal pour tester vos automatisations IA sans exposer le chatbot à l’extérieur.

Dans ce mode, vous pouvez activer l’option Allow File Uploads pour autoriser l’envoi de fichiers. Le champ Allowed File MIME Types permet de filtrer les types de fichiers acceptés : * pour tout accepter, ou des types spécifiques comme application/pdf, text/*, image/*.

Mode Hosted Chat : page hébergée par N8N

En activant Make Chat Publicly Available et en sélectionnant le mode Hosted Chat, N8N génère une URL dédiée pour votre chatbot. Cette page est hébergée directement par N8N et accessible à quiconque possède le lien (ou s’authentifie si vous configurez une protection).

Ce mode convient pour partager rapidement un chatbot avec des collaborateurs ou des clients sans intégration technique dans un site existant.

Mode Embedded Chat : intégration site web

Le mode Embedded Chat permet d’intégrer le chatbot directement dans n’importe quel site web via un snippet de code JavaScript. Le chatbot apparaît alors comme une fenêtre modale en bas à droite de la page, ou en plein écran selon la configuration choisie.

C’est le mode à privilégier pour déployer un assistant IA sur votre site WordPress, votre application React, ou toute autre plateforme web.

Configurer le Hosted Chat

Le Hosted Chat offre une page de chatbot clé en main, personnalisable et sécurisable.

Authentification

Par défaut, l’authentification est sur None : la page est accessible à tous. Vous pouvez activer Basic Auth pour protéger l’accès avec un couple utilisateur/mot de passe. Pour un chatbot public destiné à vos visiteurs, laissez l’authentification désactivée.

Message initial

Le champ Initial Message définit le message de bienvenue affiché à l’ouverture du chat. Ce message apparaît comme s’il avait été envoyé par le bot, avant même que l’utilisateur n’interagisse. Exemple : « Bonjour ! Comment puis-je vous aider aujourd’hui ? »

Options avancées

• Allowed Origins (CORS) : définit les domaines autorisés à interagir avec le workflow. Par défaut * accepte toutes les origines. Pour plus de sécurité, spécifiez votre domaine.
• Input Placeholder : texte affiché dans le champ de saisie avant que l’utilisateur ne tape. Exemple : « Posez votre question… »
• Load Previous Session : permet de conserver l’historique des conversations. Options : Off (pas de mémoire), From Memory (sauvegarde en mémoire), Manually (gestion manuelle).
• Response Mode : When Last Node Finishes attend la fin du workflow pour répondre. Using Respond to Webhook Node permet de personnaliser la réponse via un nœud dédié.

Personnalisation de l’interface

• Title et Subtitle : modifient le titre et le sous-titre affichés en haut de la fenêtre de chat.
• Start Conversation Button Text : texte du bouton pour démarrer une nouvelle conversation (par défaut « New Conversation »).
• Button Click to Start : si activé, l’utilisateur doit cliquer sur un bouton avant de pouvoir écrire.
• Custom Chat Styling : permet d’injecter du CSS personnalisé via les variables :root pour modifier les couleurs et l’apparence du chatbot.

Intégrer le chatbot sur un site web

Le mode Embedded Chat est la solution pour déployer votre chatbot N8N sur votre site. L’intégration se fait en quelques lignes de code.

Code d’intégration de base

N8N fournit un snippet à copier-coller dans votre site. Le code minimal ressemble à ceci :

<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: 'VOTRE_URL_WEBHOOK'
  });
</script>

Remplacez VOTRE_URL_WEBHOOK par l’URL fournie dans les paramètres du Chat Trigger. C’est le seul paramètre obligatoire.

Options de configuration

• mode : window (fenêtre modale en bas à droite) ou fullscreen (plein écran).
• showWelcomeScreen : si false, le chat s’ouvre directement sans écran d’accueil. Recommandé pour une meilleure expérience utilisateur.
• defaultLanguage : fr pour un site francophone.
• initialMessages : tableau de messages de bienvenue affichés à l’ouverture.
• i18n : objet de traduction pour personnaliser tous les textes de l’interface.
• metadata : données supplémentaires envoyées avec chaque message (email utilisateur, ID session, etc.).

Intégration dans WordPress

Dans WordPress, insérez le code via un bloc HTML personnalisé dans votre page ou votre footer. Vous pouvez également l’ajouter dans le fichier footer.php de votre thème ou via un plugin d’injection de scripts.

L’avantage de WordPress : vous pouvez utiliser les fonctions PHP pour injecter dynamiquement des données utilisateur dans le champ metadata. Si l’utilisateur est connecté, récupérez son email, son nom, ou tout autre attribut pour enrichir le contexte du workflow.

Personnalisation CSS

Le chatbot N8N expose des variables CSS que vous pouvez surcharger pour adapter l’apparence à votre charte graphique. Ajoutez une balise <style> après le script d’intégration :

<style>
:root {
  --chat--color-primary: #6366f1;
  --chat--color-secondary: #f1f5f9;
  --chat--color-text: #1e293b;
  --chat--border-radius: 12px;
}
</style>

Modifiez uniquement les valeurs des couleurs et dimensions, pas les noms des variables qui sont utilisés dynamiquement par le composant.

Gérer la réponse du workflow

Lorsqu’un utilisateur envoie un message, le workflow s’exécute et doit retourner une réponse. Deux méthodes sont disponibles.

Méthode 1 : When Last Node Finishes

Avec ce mode, N8N attend que le dernier nœud du workflow s’exécute, puis retourne automatiquement son output comme réponse au chat. Ajoutez un nœud Edit Fields en fin de workflow avec un champ output contenant le texte de réponse.

C’est la méthode la plus simple pour des workflows linéaires où la réponse est générée en fin de chaîne (par exemple, après un LLM Chain).

Méthode 2 : Respond to Webhook Node

Pour plus de contrôle, utilisez le mode Using Respond to Webhook Node. Ajoutez un nœud Respond to Webhook à l’endroit où vous souhaitez envoyer la réponse. Ce mode permet de retourner des fichiers, des redirections, ou des réponses JSON complexes.

Exploiter les données du chat dans le workflow

Le Chat Trigger fournit plusieurs données exploitables dans la suite du workflow :

• chatInput : le message envoyé par l’utilisateur.
• sessionId : identifiant unique de la session de conversation.
• metadata : données supplémentaires envoyées depuis le code d’intégration (email, nom, etc.).
• files : fichiers uploadés par l’utilisateur (si autorisé).

Ces données sont accessibles via les expressions N8N : {{ $json.chatInput }}, {{ $json.sessionId }}, etc. Utilisez-les pour personnaliser le traitement, stocker l’historique en base de données, ou enrichir le contexte envoyé à un LLM.

Bonnes pratiques pour un chatbot efficace

• Désactivez le Welcome Screen sur les sites web : le bouton « New Conversation » ajoute un clic inutile. Ouvrez directement la fenêtre de chat.
• Personnalisez le message initial : accueillez l’utilisateur avec un message clair indiquant ce que le chatbot peut faire.
• Sécurisez avec CORS : en production, remplacez * par votre domaine spécifique pour éviter les appels non autorisés.
• Utilisez les metadata : passez le contexte utilisateur (email, page visitée, historique) pour enrichir les réponses du LLM.
• Activez le workflow : un workflow inactif rend l’URL du chatbot inaccessible. Pensez à l’activer avant de tester ou déployer.

Comment intégrer un chatbot N8N sur votre site WordPress ?

Exportez le chatbot au format iframe depuis N8N, puis collez le code iframe dans un bloc WordPress. Le chatbot se synchronise automatiquement avec votre workflow. Activez 'Make Chat Publicly Available' en mode 'Embedded Chat', copiez l'URL webhook fournie par N8N, puis insérez le snippet JavaScript dans un bloc HTML personnalisé de WordPress en remplaçant la valeur webhookUrl par votre URL. Créez une page dédiée dans WordPress, ajoutez un shortcode [n8n_chat] fourni par N8N, puis configurez les paramètres du chatbot directement dans l'éditeur Gutenberg. Installez le plugin officiel N8N pour WordPress, connectez-le à votre compte N8N via OAuth, puis sélectionnez le workflow contenant le Chat Trigger dans les réglages du plugin.

Conclusion

Le nœud Chat Trigger est la fondation de tout chatbot N8N. Que vous testiez en interne, partagiez une page hébergée, ou intégriez un assistant IA sur votre site web, ce nœud offre la flexibilité nécessaire pour couvrir tous les cas d’usage. Associé à un LLM Chain ou un Agent IA, il transforme vos workflows en véritables interfaces conversationnelles.

Le point clé à retenir : choisissez le mode adapté à votre besoin (privé, hosted, embedded), personnalisez l’interface pour l’aligner avec votre marque, et n’oubliez pas d’activer le workflow avant de partager l’URL. Pour aller plus loin, explorez nos autres ressources N8N ou contactez notre équipe pour concevoir un chatbot intelligent adapté à vos besoins métier.

Vous recherchez d’autres contenus ?