N8N Chat UI: een n8n chatbot voor je website

Met N8N Chat UI maak je een eigen chatvenster voor een n8n chatbot en plaats je dat op je website. De visuele editor is vooral handig voor bureaus en sitebeheerders die een werkende workflow hebben en de voorkant op hun huisstijl willen afstemmen.

Wat doet deze website in gewone taal?

Je kunt n8n zien als het proces achter de balie en N8N Chat UI als de balie voor bezoekers. Het venster stuurt een vraag naar je webhook en toont het antwoord van je workflow. Afspraken, ondersteuning of het verzamelen van leads werken alleen als die stappen in je backend zijn ingericht.

Het is een zelfstandig product zonder band met n8n. Je bouwt hiermee de interface; de automatisering erachter blijft apart nodig.

Van werkende workflow naar chat op je site

1. Zorg voor een werkende Chat Trigger- of Webhook-workflow en toegang om de website te bewerken.
2. Stel het uiterlijk en de weergavevorm in, controleer het voorbeeld en verbind je webhook.
3. Laat een gewone, niet-gestreamde reactie HTTP 200 en geldige JSON met tekst in output teruggeven. Verwerk aanhalingstekens in dynamische tekst met correcte JSON-escaping.
4. Voeg de gegenereerde code toe aan de site. Test een vraag en vergelijk het zichtbare antwoord met de uitvoering in n8n.

De backendhandleiding beschrijft ook eigen POST-endpoints. Voor WordPress installeer en activeer je ChatUI Widget for n8n. Sla bij Settings → N8N Chat UI je Widget ID of Standalone-webhook op; je kunt specifieke pagina’s uitsluiten.

Een chatvenster dat bij je huisstijl past

Pas kleuren, lettertypen, avatars, begroeting en chatknop aan met directe voorvertoning. Kies een vast venster in de pagina of een zwevende popup. De indeling past zich aan mobiele schermen aan en ondersteunt RTL-talen.

Met followUpPrompts kan de backend klikbare vervolgvragen aanbieden. Gebruik bij meerdere vensters met dezelfde workflow passende sessiesleutels om contexten te scheiden. Zo’n sleutel vervangt geen gebruikersautorisatie.

Bestanden, spraak en geleidelijke antwoorden

Bij bestandsuploads stel je type-, grootte- en aantallimieten in. De binaire bestanden gaan naar n8n; uitlezen, opslaan of analyseren moet je workflow verzorgen.

Spraakinvoer verstuurt een opname. De beschreven werkwijze gebruikt eerst een losse transcriptiedienst en daarna het agentproces. Bij bestanden en audio komt metadata als JSON-tekst binnen en moet je die ontleden om een object te krijgen.

Voor geleidelijke antwoorden moet streaming aanstaan bij zowel Chat Trigger/Webhook als AI Agent. Het venster herkent de stream; alleen de interface aanpassen is onvoldoende.

Wat kost de chatinterface?

Gecontroleerd op 28 oktober 2026: nieuwe accounts krijgen 100 Managed-testcredits, geldig gedurende 30 dagen. Daarna koop je tegoed vooraf; elk bericht dat de proxy verwerkt kost één credit. Bij een leeg saldo worden nieuwe berichten niet verwerkt. Betaalde credits vanaf 5 oktober 2026 verlopen volgens de huidige voorwaarden niet; oudere aankopen houden hun oorspronkelijke regels.

Standalone vraagt een eenmalige licentie en verbruikt geen Managed-berichtcredits. Voor nieuwe kopers staan de blijvende basislicentie en optionele ondersteunings- en updateperioden los van elkaar. Bekijk de actuele prijzen; n8n-hosting, modellen en transcriptie kosten afzonderlijk geld.

Waar gaan de gegevens naartoe?

Standalone verstuurt berichten rechtstreeks vanuit de browser naar je webhook, waarvan het adres in de clientcode staat. Managed gebruikt de proxy van de aanbieder en verbergt het achterliggende adres, met domeinbeperkingen, geofencing, snelheidslimieten, analyses en centrale instellingen.

Volgens het privacybeleid bewaart of logt de aanbieder geen chatinhoud. De proxy verwerkt de berichten wel direct en bewaart technische meetgegevens en configuratie. Controleer apart wat jouw n8n, databases en modelleveranciers bewaren.

Veelgestelde vragen

Kan de chat op een bestaande website?

Ja, via de invoegcode of de officiële WordPress-plugin. Je hebt websitebeheerrechten en een werkende backend nodig.

Bouwt de dienst ook mijn n8n-workflow?

Nee. Je stelt de modellen, gegevensbronnen en acties in n8n of je eigen compatibele backend in.

Is het gebruik onbeperkt gratis?

De 100 startcredits zijn 30 dagen geldig. Daarna heb je Managed-tegoed of een Standalone-licentie nodig, plus je backendvoorzieningen.

Officiële handleidingen

• Documentatie: instellingen en sessiebeheer.
• WordPress-handleiding: installeren en pagina’s uitsluiten.
• MCP-handleiding: via OAuth of API-sleutel widgets opvragen, maken en vormgeven; themawijzigingen veranderen geen webhooks.
• Officiële ondersteuning: account en aansluiting.