N8N Chat UI : intégrer un chatbot n8n à son site

N8N Chat UI sert à créer l’interface d’un chatbot n8n, puis à l’intégrer dans un site existant. L’éditeur visuel s’adresse aux équipes, indépendants et agences qui disposent déjà d’un workflow et souhaitent proposer un chat aux couleurs de leur marque.

À quoi sert ce site, tout simplement ?

Le workflow n8n fait le travail en coulisses ; N8N Chat UI fournit le guichet où le visiteur pose sa question. Le message part vers votre webhook, le traitement s’exécute, puis la réponse revient dans la fenêtre.

Un chat de support, de prise de rendez-vous ou de recherche documentaire nécessite les connexions correspondantes dans le backend. Ce produit indépendant, sans affiliation avec n8n, apporte l’interface : il ne construit pas automatiquement la logique métier.

Créer une interface cohérente avec votre marque

La prévisualisation permet de régler couleurs, polices, avatars, texte d’accueil et bouton d’ouverture. Vous pouvez afficher une bulle flottante ou intégrer le chat au contenu de la page. L’interface s’adapte au mobile et prend en charge les langues de droite à gauche.

Le backend peut envoyer followUpPrompts pour proposer des questions cliquables. Avec plusieurs widgets reliés au même workflow, prévoyez des clés de session adaptées pour séparer les contextes ; cela ne constitue pas une authentification.

Relier le widget au workflow n8n

1. Préparez un workflow fonctionnel avec Chat Trigger ou Webhook et un accès permettant d’ajouter du code au site.
2. Personnalisez la fenêtre, vérifiez l’aperçu et connectez le webhook.
3. Pour une réponse classique, renvoyez HTTP 200 et un JSON valide comportant le texte output. Les guillemets du texte généré doivent être correctement échappés.
4. Collez le code d’intégration et testez une conversation en contrôlant également l’exécution dans n8n.

Le guide du backend couvre aussi les endpoints POST personnalisés. Sur WordPress, installez et activez ChatUI Widget for n8n, puis enregistrez l’identifiant du widget Managed ou le webhook Standalone dans Settings → N8N Chat UI. Des exclusions évitent l’affichage sur certaines pages.

Envoyer des fichiers et des messages vocaux

Les envois de fichiers disposent de restrictions de type, taille et nombre. Les données binaires arrivent dans n8n ; lecture des documents, stockage et analyse restent à configurer.

Les messages vocaux sont transmis comme enregistrements. Le parcours documenté ajoute un service de transcription avant de transmettre le texte à l’agent. Avec des fichiers ou de l’audio, metadata est une chaîne JSON à analyser si vous voulez l’utiliser comme objet.

Pour afficher une réponse progressivement, activez le streaming sur l’entrée Chat Trigger/Webhook et sur la sortie AI Agent. Le widget détecte cette configuration.

Choisir entre crédits et licence autonome

Vérification du 28 octobre 2026 : un nouveau compte reçoit 100 crédits Managed valables 30 jours. Ensuite, chaque message traité par le proxy consomme un crédit prépayé ; les nouveaux messages s’arrêtent à épuisement du solde. Les crédits achetés depuis le 5 octobre 2026 n’expirent pas selon les conditions actuelles ; les anciens achats conservent leurs règles.

Standalone repose sur une licence à paiement unique, sans crédits de messages Managed. Pour les nouveaux acheteurs, la licence de base permanente se distingue des périodes facultatives de support et de mises à jour. Consultez les offres en cours et les conditions du paiement. Hébergement n8n, modèles et transcription restent à budgéter séparément.

Comprendre le traitement des données

En Standalone, le navigateur contacte directement le webhook, visible dans le code client. Managed passe par le proxy du fournisseur et masque l’adresse amont ; il ajoute restrictions de domaine, géographiques, limitation de débit, statistiques et gestion centralisée.

La politique de confidentialité indique que le fournisseur ne conserve, ne met en cache et ne journalise pas les conversations. Le proxy les traite néanmoins en temps réel et conserve des métriques techniques ainsi que la configuration. Cette déclaration ne couvre pas automatiquement vos journaux n8n, bases de données ou prestataires de modèles.

Questions fréquentes

Peut-on ajouter le widget à un site existant ?

Oui, avec le code d’intégration ou le plugin WordPress officiel, sous réserve de pouvoir modifier le site et de disposer d’un backend opérationnel.

Le service crée-t-il aussi le workflow n8n ?

Non. Les modèles, sources de données et actions doivent être configurés dans n8n ou dans votre backend compatible.

L’utilisation est-elle gratuite sans limite ?

Les 100 crédits d’inscription expirent après 30 jours. La suite nécessite des crédits Managed ou une licence Standalone, ainsi que les services du backend.

Documentation officielle

• Documentation : configuration et gestion des sessions.
• Plugin WordPress : installation et exclusions.
• Connexion MCP : OAuth ou clé API pour lister, créer et personnaliser les widgets ; la modification du thème ne change pas les webhooks.
• Support officiel : compte et intégration.