N8N Chat UI: n8n Chatbot in die Website einbinden

Mit N8N Chat UI erhält ein n8n Chatbot eine anpassbare Oberfläche für die eigene Website. Sie gestalten das Chatfenster visuell und verbinden es mit einem vorhandenen Workflow. Das passt zu Agenturen, Website-Betreibern und Teams, die ihre Automatisierung bereits eingerichtet haben.

Einfach erklärt: Wofür ist N8N Chat UI da?

n8n erledigt die Arbeit im Hintergrund; N8N Chat UI stellt das Gesprächsfenster bereit. Eine Nachricht geht an Ihren Webhook, der Workflow verarbeitet sie und die Antwort erscheint auf der Website. Ob der Bot Termine bucht, Fragen beantwortet oder Kontaktdaten weiterleitet, bestimmt der angeschlossene Prozess.

Es handelt sich um ein eigenständiges Produkt ohne Zugehörigkeit zu n8n. Eine fertige Oberfläche ersetzt weder die Einrichtung des Modells noch die benötigten Datenquellen.

Datenfluss vor der Einbindung prüfen

Bei Standalone geht die Nachricht direkt vom Browser an Ihren Webhook. Dessen Adresse steht im Einbettungscode; Sie sichern den Endpunkt selbst. Managed leitet Nachrichten über einen Anbieter-Proxy weiter und verbirgt die eigentliche Webhook-Adresse. Dazu kommen Domain-Beschränkungen, Geofencing, Ratenlimits, Nutzungsanalyse und zentrale Einstellungen.

Laut Datenschutzerklärung speichert, protokolliert oder puffert der Anbieter keine Gesprächsinhalte. Der Proxy verarbeitet Nachrichten dennoch in Echtzeit und erfasst technische Betriebsdaten. Prüfen Sie getrennt, welche Inhalte Ihre n8n-Instanz, Datenbank und Modellanbieter speichern. Die Aussage ist kein Nachweis einer vollständig datenspeicherfreien Gesamtlösung.

Vom Webhook zum ersten Gespräch

1. Bereiten Sie einen funktionierenden Workflow mit Chat Trigger oder Webhook vor.
2. Gestalten Sie das Fenster, prüfen Sie die Vorschau und tragen Sie die Backend-Verbindung ein.
3. Bei gewöhnlichen Antworten muss der Endpunkt HTTP 200 und gültiges JSON mit dem Textfeld output liefern. Dynamische Texte müssen korrekt als JSON maskiert werden.
4. Fügen Sie den erzeugten Code auf der Website ein und vergleichen Sie eine Testantwort mit der Workflow-Ausführung.

Die Backend-Anleitung erklärt auch eigene POST-Endpunkte. Für WordPress installieren und aktivieren Sie ChatUI Widget for n8n. Unter Settings → N8N Chat UI wird die Widget-ID oder der Standalone-Webhook gespeichert; einzelne Seiten lassen sich ausschließen.

Design, Dateien und Spracheingaben

Farben, Schrift, Avatare, Begrüßung und Chat-Schaltfläche lassen sich mit Live-Vorschau anpassen. Möglich sind ein eingebettetes Fenster oder ein schwebendes Popup, auch auf Mobilgeräten und mit RTL-Layout. Folgefragen kann das Backend über followUpPrompts anbieten. Bei mehreren Fenstern helfen geplante Sitzungsschlüssel, Gesprächskontexte auseinanderzuhalten.

Dateiuploads haben einstellbare Typ-, Größen- und Mengenbegrenzungen. Auswertung und Speicherung übernimmt Ihr Workflow. Audio wird als Aufnahme weitergeleitet; eine separate Spracherkennung muss daraus Text machen. Bei Dateien und Audio wird metadata als JSON-Zeichenfolge übertragen.

Für gestreamte Antworten aktivieren Sie Streaming sowohl im Chat Trigger beziehungsweise Webhook als auch im AI Agent. Die Oberfläche allein schaltet es nicht ein.

Kosten: Guthaben und Standalone-Lizenz

Stand 28. Oktober 2026 erhalten neue Konten 100 Managed-Testcredits für 30 Tage. Anschließend werden Credits im Voraus gekauft; jede vom Proxy verarbeitete Nachricht verbraucht einen Credit. Ohne Guthaben werden neue Nachrichten nicht weiterverarbeitet. Ab dem 5. Oktober 2026 gekaufte Credits verfallen laut aktuellen Bedingungen nicht; ältere Käufe behalten ihre Laufzeit.

Standalone benötigt eine einmalige Lizenz und verbraucht keine Managed-Nachrichtencredits. Für Neukäufe sind dauerhafte Kernlizenz und optionale Support-/Updatezeiträume zu unterscheiden. Die aktuellen Angebote, Steuer- und Zahlungsbedingungen sind maßgeblich. Kosten für n8n, Modelle und Transkription kommen gesondert hinzu.

Häufige Fragen

Kann ich den Chatbot in eine bestehende Website einbinden?

Ja, per Einbettungscode oder offiziellem WordPress-Plugin. Sie benötigen Zugriff auf die Website und ein funktionsfähiges Backend.

Erstellt das Tool auch meinen n8n-Workflow?

Nein. Modell, Datenzugriff und Geschäftslogik richten Sie im Workflow beziehungsweise eigenen Backend ein.

Ist die Nutzung dauerhaft kostenlos?

Die 100 Testcredits gelten 30 Tage. Danach brauchen Sie Managed-Guthaben oder eine Standalone-Lizenz und tragen die Backend-Kosten.

Offizielle Anleitungen

• Dokumentation: Konfiguration und Sitzungen.
• WordPress-Anleitung: Installation und Seitenausschlüsse.
• MCP-Anbindung: Widgets per OAuth oder API-Schlüssel auflisten, erstellen und gestalten; Theme-Änderungen ändern keine Webhooks.
• Geschäftlicher Support: Konto- und Einrichtungsfragen.