Met de vormgevingsinstellingen bepaal je hoe de chatwidget van je chatbot eruitziet voor bezoekers op je website - de header, de kleuren en lettertypen van berichten, het starticoon (launcher icon), het welkomstscherm, de widgetgrootte en meer. Hier stem je de widget af op jouw merk.
Je hebt een chatbot nodig voordat je de stijl ervan kunt aanpassen. Als je er nog geen hebt gemaakt, begin dan met Hoe je jouw eerste chatbot maakt.
Waar vind je de instellingen voor vormgeving?
Selecteer je chatbot en ga naar Settings > Appearance (Instellingen > Vormgeving). Klik op de hoofdpagina van ChatLab op Chatbots, open je chatbot, ga naar het tabblad Settings en kies vervolgens Appearance in het linkermenu.
Aan de rechterkant van de pagina verschijnt een live voorvertoning van je widget, die meteen wordt bijgewerkt wanneer je instellingen aanpast.
Chat Header
Stel in hoe het bovenste deel van je chatwidget eruitziet:
- Chatbot name (Naam chatbot) - de weergavenaam in de header van de chat (maximaal 60 tekens)
- Tagline (Ondertitel) - optionele ondertitel onder de naam van de chatbot (maximaal 60 tekens)
- Avatar - upload een eigen afbeelding die klanten zien tijdens het gesprek met de chatbot. Gebruik de knop Remove (Verwijderen, hieronder gemarkeerd) om de huidige afbeelding te wissen.
- Background (Achtergrond) - achtergrondkleur van het headergedeelte
- Name color (Kleur naam) - tekstkleur van de naam van de chatbot
- Tagline color (Kleur ondertitel) - tekstkleur van de ondertitel
- Reset conversation tooltip (Tooltip gesprek resetten) - tooltiptekst die verschijnt wanneer bezoekers met de muis over de knop voor het resetten van het gesprek in de widgetheader bewegen (maximaal 40 tekens, standaard "Reset conversation")
Message
Pas het invoerveld voor berichten en het uiterlijk van de gespreksberichten aan:
- Input placeholder (Plaatsaanduiding invoerveld) - tekst in het invoerveld voor nieuwe berichten onderaan de widget (maximaal 50 tekens, standaard "Type a message..."). Gebruik dit om bezoekers aan te moedigen een bericht te typen.
- User background (Achtergrond gebruiker) - achtergrondkleur van berichten die door de bezoeker zijn verzonden
- User text (Tekst gebruiker) - tekstkleur van bezoekersberichten
- Resp. background (Achtergrond reactie) - achtergrondkleur van antwoorden van de chatbot
- Response text (Tekst reactie) - tekstkleur van antwoorden van de chatbot
De tekstgrootte van berichten stel je in bij het onderdeel Typografie, samen met het lettertype van de widget.
Suggested Questions
Aanbevolen vragen (Suggested Questions) zijn kant-en-klare prompts waarop een bezoeker kan tikken om een gesprek te starten. Je schrijft de vragen zelf in Settings > Chat Conversation (Instellingen > Chatgesprek); hier bepaal je het uiterlijk van de knoppen:
- Background (Achtergrond) - achtergrondkleur van de knoppen voor aanbevolen vragen
- Text (Tekst) - tekstkleur van de knoppen voor aanbevolen vragen
- Stack (Stapelen) - wanneer ingeschakeld, worden langere aanbevolen vragen verticaal onder elkaar gestapeld in plaats van een horizontale schuifbalk te tonen
De tekstgrootte van de aanbevolen vragen stel je in bij het onderdeel Typografie.
Minimized-Mode Settings
Bepaal hoe de chatwidget eruitziet wanneer deze geminimaliseerd is (voordat de bezoeker de chat opent):
- Minimized display mode (Geminimaliseerde weergavemodus) - kies uit:
- Icon (Icoon) - standaard rond chatstarticoon (standaard)
- Minified chat bar (Geminimaliseerde chatbalk) - compacte tekstinvoerbalk onderaan de pagina
- Icon with text (Icoon met tekst) - een bredere, pilvormige starter: het icoon plus een kort bijschrift van twee regels
- Icon color / Mini bar color (Kleur icoon / Kleur minibalk) - kleur van het starticoon of de achtergrond van de minibalk
- Custom chat icon (Aangepast chaticoon, alleen in de icoonmodus) - schakel dit in om eigen iconen voor het openen en sluiten van de chat te uploaden
- Position on screen (Positie op scherm) - plaats de widget aan de linker- of rechterkant van het scherm
- Move up chat icon/bar by (Chaticoon/-balk omhoog verplaatsen met) - verticale verschuiving in pixels vanaf de onderrand
- Move icon/bar left/right by (Icoon/balk naar links/rechts verplaatsen met) - horizontale verschuiving in pixels vanaf de dichtstbijzijnde schermrand
Icon with Text
De modus Icon with text geeft de starter een kort bijschrift, zodat bezoekers kunnen zien waar de chat voor bedoeld is voordat ze deze openen. Dit is handig wanneer een los icoon niet duidelijk genoeg is - bijvoorbeeld "Stuur ons een bericht / We antwoorden direct" of "Hulp nodig? / Vraag het onze assistent".
Wanneer je deze modus kiest, komen er vier instellingen bij:
- Label line 1 (Labelregel 1) - de eerste, vettere regel van het bijschrift (maximaal 60 tekens)
- Label line 2 (Labelregel 2) - de tweede, lichtere regel (maximaal 60 tekens). Laat dit veld leeg voor een starter met één regel
- Text color (Tekstkleur) - kleur van het bijschrift. Laat dit ongewijzigd en ChatLab kiest automatisch zwart of wit, afhankelijk van hoe licht of donker de kleur van je starter is
- Show close cross (Sluitkruisje tonen) - voegt een klein kruisje toe aan de starter zodat bezoekers deze kunnen verbergen
Beide regels worden ingekort met een beletselteken (...) als ze niet passen, zodat de starter nooit breder wordt dan het scherm. De starter klapt weer in tot een cirkel zolang de chat geopend is.
Als je chatbot meertalig is, worden beide regels van het bijschrift vertaald, net als de rest van de teksten voor bezoekers. Zo ziet elke bezoeker het bijschrift in zijn of haar eigen taal.
Show close cross staat standaard uit en is alleen beschikbaar in deze modus. Wanneer ingeschakeld, verbergt een bezoeker die op het kruisje klikt de starter voor de rest van de browsersessie - deze blijft verborgen tijdens het navigeren tussen pagina's en keert pas terug bij een volgend bezoek of in een nieuw tabblad. Een chatbot die is ingesteld om automatisch te openen, respecteert die keuze en opent niet opnieuw nadat de bezoeker deze heeft weggeklikt.
Auto Open Chat Widget After Page Load
Stel in dat de chat automatisch uitklapt wanneer bezoekers de pagina laden:
- Auto open on mobile (Automatisch openen op mobiel) - opent de chat automatisch op mobiele apparaten
- Auto open on desktop (Automatisch openen op desktop) - opent de chat automatisch op desktopschermen
- Open chat with delay (Chat openen met vertraging) - stelt een vertraging in vóór het automatisch openen (alleen beschikbaar wanneer automatisch openen is ingeschakeld)
- Delay by (Vertragen met) - aantal seconden dat wordt gewacht met openen (0-60 seconden)
Human-Like Messaging
Simuleert menselijk typgedrag door antwoorden op te splitsen in meerdere berichtbubbels, die geleidelijk zin voor zin worden getoond:
- Human-Like Messaging - schakelaar om de functie in of uit te schakelen
- Delay Between Bubbles (Vertraging tussen bubbels) - tijd in seconden tussen de weergave van elke berichtbubbel (0-200 seconden)
Welcome Message Bubble
Toon het welkomstbericht in een tekstballon boven het chatstarticoon om bezoekers te helpen de chat op te merken. Deze functie is alleen beschikbaar in de icoonmodus en werkt niet in iframe-modus of wanneer automatisch openen is ingeschakeld.
- Show on desktop (Tonen op desktop) - toon de welkomstberichtbubbel op desktop
- Show on mobile (Tonen op mobiel) - toon de welkomstberichtbubbel op mobiele apparaten
- Delay (Vertraging) - aantal seconden na het laden van de pagina voordat de bubbel wordt getoond (0-60 seconden)
Als je meerdere welkomstberichten hebt, worden ze boven elkaar gestapeld boven het chaticoon weergegeven.
Spraakinvoer (de microfoonknop in het tekstvak van de chat) stel je in via Settings > Chat Conversation, niet hier bij Appearance.
Welcome Screen
Schakel de widget over naar een speciale openingsweergave die nieuwe bezoekers begroet met een groot welkomstbericht en de aanbevolen vragen gestapeld op een gecentreerde witte kaart. Het welkomstscherm verschijnt alleen aan het begin van een nieuwe sessie en schakelt over naar de standaard chatweergave zodra de bezoeker het eerste bericht stuurt.
- Special Welcome Screen (Speciaal welkomstscherm) - schakelt de welkomstschermmodus in of uit (standaard uitgeschakeld)
- Suggested questions intro (Introductie aanbevolen vragen) - kort label dat boven de kaart met aanbevolen vragen op het welkomstscherm wordt getoond (bijvoorbeeld "Kies een optie of typ een bericht"). Laat dit leeg om het label te verbergen. Vereist dat er aanbevolen vragen zijn ingesteld in Settings > Chat Conversation.
- Hide Human Contact Form (Contactformulier voor mensen verbergen) - verbergt de contactformulieractie in de header zolang het welkomstscherm wordt getoond
- Hide Live Chat (Live Chat verbergen) - verbergt de livechatactie in de header zolang het welkomstscherm wordt getoond
Het welkomstscherm werkt ook samen met Lead Collection (Leads verzamelen) en Privacy Policy consent (Toestemming privacybeleid) - als een van beide vereist is bij de start van het gesprek, wordt het formulier of het toestemmingsverzoek getoond op de welkomstkaart in plaats van de aanbevolen vragen.
Voor alle details, lay-outvarianten en screenshots aan de bezoekerszijde, zie Welkomstscherm.
Header Actions
Bepaalt hoe Live Chat en het Human Contact Form worden aangeboden in de header van de chatwidget.
- Separate icons (Aparte iconen) - elke actie krijgt een eigen icoon in de header, naast de sluitknop
- Menu (dropdown) - beide acties verhuizen naar het headermenu (het pictogram met drie puntjes), samen met opties zoals "Reset conversation" en de taalkeuze wanneer deze zijn ingeschakeld
Nieuwe chatbots gebruiken het menu, waardoor de header overzichtelijk blijft wanneer er meer acties worden toegevoegd. Chatbots die vóór 2 september 2026 zijn gemaakt, behouden aparte iconen, zodat er voor hun bezoekers niets verandert. Je kunt op elk moment wisselen - de instelling heeft alleen invloed op de presentatie, niet op wat de acties doen.
Typography
Bepaalt het lettertype en de tekstgroottes die over de hele widget worden gebruikt - berichten, aanbevolen vragen, header, formulieren en het bijschrift van de starter.
- Widget font (Lettertype widget) - keuze uit acht lettertypen: System default (Systeemstandaard), Inter, Nunito, Lato, Montserrat, Poppins, Source Serif en JetBrains Mono
- Message font size (Tekstgrootte berichten) - grootte van de berichttekst (12-24 px)
- Suggested questions font size (Tekstgrootte aanbevolen vragen) - grootte van de knoppen voor aanbevolen vragen (12-24 px)
Inter is de standaard en komt overeen met hoe elke chatbot eruitzag voordat deze instelling bestond, dus er verandert niets totdat je een ander lettertype kiest.
System default downloadt helemaal niets - de widget gebruikt het lettertype dat al op het apparaat van de bezoeker is geïnstalleerd. Dat maakt het de snelste optie en het sluit naadloos aan op websites die zelf ook het systeemlettertype gebruiken, maar de chat ziet er op Windows, macOS en Android wel net iets anders uit. De overige zeven opties zijn Google Fonts, die eenmalig worden gedownload door de browser van de bezoeker. Elk lettertype heeft een alternatief (fallback), zodat de tekst leesbaar blijft en de lay-out niet breekt als het netwerk van een bezoeker Google Fonts blokkeert.
Het lettertypebestand wordt ingeladen in het chatvenster zelf. Het wordt alleen aan je eigen pagina toegevoegd wanneer de widget tekst buiten het chatvenster toont - zoals bij de starter Icon with text, de geminimaliseerde chatbalk of de welkomstberichtbubbels. Een chatbot die de standaard icoonstarter gebruikt, veroorzaakt geen extra laadverzoeken op je pagina.
Widget Size
Pas aan hoe groot de geopende chatwidget wordt weergegeven op desktop en mobiele apparaten. Elke schuifregelaar heeft een knop Default (Standaard) die de ingebouwde afmetingen herstelt.
- Desktop width (Desktopbreedte) - widgetbreedte in desktopbrowsers, in pixels (330-800, standaard 448)
- Desktop height (Desktophoogte) - widgethoogte in desktopbrowsers, in pixels (300-770, standaard 660)
- Mobile size (Mobiele grootte) - widgetgrootte op mobiele apparaten, als percentage van het scherm (60-100%, standaard 100%)
Bij de standaardwaarde gebruikt de widget de ingebouwde responsieve afmetingen van ChatLab. Elke andere waarde stelt een vaste grootte in.
Op mobiel zorgt de standaardwaarde (100%) ervoor dat de geopende chat het volledige scherm beslaat. Als je een lager percentage kiest, wordt de widget verkleind tot dat deel van het scherm en gecentreerd in het weergavevenster (viewport), zodat bezoekers de pagina rondom de chat nog kunnen zien.
Naast de schuifregelaars vind je twee Save & Preview-knoppen (Opslaan en voorvertoning, hieronder gemarkeerd) - één voor de desktoprijen en één voor de mobiele rij. Als je op een knop klikt, worden niet-opgeslagen wijzigingen opgeslagen en opent de chat in een voorvertoningsvenster met je huidige instellingen:
- De desktopknop opent een normaal browservenster, zodat je de exacte grootte op een desktopscherm kunt zien.
- De mobiele knop opent een compacte pop-up (400 x 700) waarin de widget in zijn mobiele lay-out wordt getoond. Dat is handig wanneer je de schuifregelaar Mobile size vanaf een desktopcomputer instelt.
Drawer Mode
Met Drawer mode (Lademodus) kan de bezoeker de chat veranderen van een zwevend venster in een paneel over de volledige hoogte dat aan de rand van het scherm is vastgemaakt, terwijl je pagina ernaast zichtbaar blijft. Dit is ideaal voor gesprekken die de bezoeker voert tijdens het lezen van de pagina - zoals lange antwoorden, productvergelijkingen, formulieren of alles met veel tekst.
Schakel dit in en er verschijnt een knop in de chatheader; de bezoeker bepaalt zelf of deze wordt gebruikt. De keuze van de bezoeker wordt onthouden voor de rest van de browsersessie.
- Het paneel is half zo breed als het browservenster, tot maximaal 720 px, en beslaat altijd de volledige hoogte. Het dockt aan dezelfde kant als je starter; een widget aan de linkerkant opent dus een lade aan de linkerkant.
- Desktop width en Desktop height zijn hier niet van toepassing - die bepalen alleen de afmetingen van het normale zwevende venster.
- De knop wordt alleen getoond op desktopschermen van minimaal 1200 px breed met een muis. Op telefoons en tablets verschijnt deze nooit, omdat de chat daar het scherm al volledig vult. Als een bezoeker het browservenster smaller maakt dan die breedte, klapt het paneel automatisch weer in naar het normale venster.
- De starter is verborgen zolang het zijpaneel open is; de bezoeker sluit het paneel via de header of verlaat de lademodus met dezelfde knop.
Drawer mode staat standaard uit, dus er verandert niets voor je bezoekers totdat je het inschakelt.
Other Appearance Settings
- Widget Shadow (Schaduw widget) - schakel een schaduw rond de chatwidgetcontainer in of uit
- Open links in (Links openen in) - kies of links in chatberichten openen in een nieuw tabblad of hetzelfde tabblad
Er wordt op desktop ook een sluitknop (X) getoond in de chatheader, zodat bezoekers de chat kunnen inklappen naar de starter zonder de pagina opnieuw te laden. De sluitknop blijft verborgen wanneer de chat is ingesloten als iframe of in de modus voor volledig scherm wordt weergegeven.
Custom Chat Footer
Voeg een eigen tekst toe die onderaan de chatwidget wordt weergegeven (maximaal 250 tekens). Markdown wordt ondersteund voor het toevoegen van links. Een veelgebruikte toepassing is een link naar je privacybeleid of algemene voorwaarden.
Voorbeeld van markdown:
By chatting you accept our [Privacy Policy](https://www.example.com)
Custom CSS
Voeg aangepaste CSS-stijlen toe om het uiterlijk van je chatwidget verder te personaliseren (maximaal 5000 tekens):
Gerelateerde artikelen
- Hoe je jouw eerste chatbot maakt
- Gespreksinstellingen - schrijf het welkomstbericht en de aanbevolen vragen
- Welkomstscherm - de openingslay-out op volledig scherm en de varianten voor bezoekers
- Aangepaste formulieren - verzamel gegevens van bezoekers binnen de chat
- Leads verzamelen