De standaard chatbot is functioneel, maar oogt neutraal. In dit deel leer je hoe je het uiterlijk van de chatbot volledig aanpast aan jouw huisstijl: van kleuren en tekst tot de positie van de chatknop en het toevoegen van een logo. Ook bekijken we hoe je de chatbot uitbreidt met extra functies zoals gebruikersdata, mobiele optimalisatie en conditionele weergave.
themeDe @n8n/chat-module ondersteunt twee manieren om het uiterlijk aan te passen:
Via CSS-variabelen (in een <style> blok)
Via de theme-instellingen in de createChat() functie
Je kunt beide methoden combineren.
| Element | CSS Variabele | Voorbeeldwaarde |
|---|---|---|
| Primaire kleur | --chat--color-primary | #ffc000 |
| Gebruikerberichtkleur | --chat--message--user--background | #20b69e |
| Botberichtkleur | --chat--message--bot--background | #ffffff |
| Tekstkleur van de bot | --chat--message--bot--color | #2d2d2d |
| Rand-afronding | --chat--border-radius | 25px |
| Knopkleur (chat openen) | --chat--toggle--background | #ffc000 |
Je kunt deze variabelen instellen via:
En in je createChat() code:
Wil je dat de chatbot als een zwevend venster rechtsonder in beeld verschijnt? Dan geef je de container position: fixed mee in je CSS:
Zorg ervoor dat je de ID van het element aanpast in de target van je createChat() functie:
Je kunt de taal en tekst in de chat wijzigen via het i18n-object in createChat():
Let op: momenteel wordt alleen Engels ondersteund als sleutel (en), maar je kunt daar gewoon Nederlandse tekst in zetten.
Als je wilt dat de chatbot ook bepaalde gegevens van de gebruiker ontvangt, zoals naam of e-mailadres, kun je deze meesturen via het veld metadata:
Deze data wordt meegestuurd naar je n8n-workflow via de Webhook en kan daar verwerkt worden.
Gebruik je Elementor of een conditionele plugin? Dan kun je instellen dat de HTML-code alleen op bepaalde pagina’s zichtbaar is. Handig als je de chatbot alleen op productpagina’s, de contactpagina of de homepage wilt tonen.
Plugins die je hiervoor kunt gebruiken:
Elementor Display Conditions
WPCode
Conditional Blocks
| Probleem | Oplossing |
|---|---|
| De chatbot verschijnt niet | Controleer of je de code in de footer of een HTML-widget hebt geplaatst. |
| Webhook reageert niet | Zorg dat je workflow in n8n is geactiveerd en de Webhook-URL correct is. |
| Logo wordt niet getoond | Voeg het logo toe via het avatar veld in theme. |
| Chatvenster past niet goed op mobiel | Gebruik responsive CSS of zet mode: 'fullscreen' in createChat(). |
| Teksten blijven in het Engels | Gebruik het i18n-object om je eigen teksten te definiëren. |
Documentatie van @n8n/chat op npm
Het opzetten van een werkende AI-chatbot kan technisch zijn en tijd kosten. Bij Custers Digital Solutions helpen we bedrijven en organisaties graag om dit proces te versnellen en foutloos te laten verlopen. Of het nu gaat om een eenvoudige klantenservicebot of een geavanceerde AI-integratie met CRM, agenda’s of e-commerce systemen — wij zorgen voor een naadloze implementatie op jouw website of platform.
Laat ons het werk doen, zodat jij je kunt richten op je klanten, niet op de techniek.
Neem contact met ons op voor:
Volledige installatie en configuratie van AI-chatbots in n8n
Integratie met je WordPress-, Shopify- of maatwerkwebsite
Advies en maatwerkoplossingen op het gebied van AI, automatisering en slimme workflows
Custers.eu All Rights Served 2025