Met Appearance settings (Uiterlijkinstellingen) bepaal je hoe de chatwidget van je chatbot eruitziet voor bezoekers op je website - de header, de kleuren en lettertypen van berichten, het startpictogram (launcher icon), het welkomstscherm, de widgetgrootte en meer. Hier stem je de widget af op je eigen merkstijl.
Je hebt een chatbot nodig voordat je deze kunt vormgeven. Als je er nog geen hebt gemaakt, begin dan met Je eerste chatbot maken.
Waar vind je de instellingen voor Appearance?
Selecteer je chatbot en ga naar Settings > Appearance (Instellingen > Uiterlijk). 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 voorbeeld van je widget, dat direct wordt bijgewerkt wanneer je instellingen wijzigt.
Chat Header
Stel in hoe het bovenste gedeelte van je chatwidget eruitziet:
- Chatbot name (Chatbotnaam) - de weergavenaam in de chatheader (max. 60 tekens)
- Tagline (Ondertitel) - optionele subtitel die onder de chatbotnaam wordt getoond (max. 60 tekens)
- Avatar - upload een eigen afbeelding die bezoekers zien tijdens het gesprek met de chatbot. Gebruik de knop Remove (Verwijderen, hieronder gemarkeerd) om de huidige afbeelding te wissen.
- Background (Achtergrond) - achtergrondkleur van de header
- Name color (Naamkleur) - tekstkleur van de chatbotnaam
- Tagline color (Ondertitelkleur) - tekstkleur van de ondertitel
- Reset conversation tooltip (Tooltip gesprek resetten) - tooltiptekst die verschijnt wanneer bezoekers de muisaanwijzer op de resetknop in de widgetheader plaatsen (max. 40 tekens, standaard "Reset conversation")
Message
Pas het invoerveld voor berichten en de weergave van chatberichten aan:
- Input placeholder (Plaatsaanduiding invoer) - tijdelijke aanduiding in het invoerveld voor nieuwe berichten onderaan de widget (max. 50 tekens, standaard "Type a message..."). Gebruik dit om bezoekers aan te moedigen een bericht te typen.
- User background (Gebruikersachtergrond) - achtergrondkleur van berichten die door de bezoeker worden verzonden
- User text (Gebruikerstekst) - tekstkleur van berichten van bezoekers
- Resp. background (Antwoordachtergrond) - achtergrondkleur van antwoorden van de chatbot
- Response text (Antwoordtekst) - tekstkleur van antwoorden van de chatbot
De tekstgrootte van berichten stel je in onder Typography, samen met het lettertype van de widget.
Suggested Questions
Suggested questions (Voorgestelde vragen) zijn kant-en-klare prompts waarop een bezoeker kan tikken om een gesprek te starten. De inhoud van de vragen stel je in via Settings > Chat Conversation (Instellingen > Gesprek); hier bepaal je hoe de knoppen eruitzien:
- Background (Achtergrond) - achtergrondkleur van de knoppen voor voorgestelde vragen
- Text (Tekst) - tekstkleur van de knoppen voor voorgestelde vragen
- Stack (Stapelen) - wanneer ingeschakeld, worden langere voorgestelde vragen verticaal onder elkaar gestapeld in plaats van een horizontale schuifbalk weer te geven
De tekstgrootte van voorgestelde vragen stel je in onder Typography.
Minimized-Mode Settings
Beheer hoe de chatwidget eruitziet wanneer deze geminimaliseerd is (voordat de bezoeker de chat opent):
- Minimized display mode (Geminimaliseerde weergavemodus) - kies uit:
- Icon (Pictogram) - standaard rond chat-startpictogram (standaard)
- Minified chat bar (Compacte chatbalk) - compacte tekstinvoerbalk onderaan de pagina
- Icon with text (Pictogram met tekst) - een bredere, capsulevormige launcher: het pictogram plus een korte tekst van twee regels
- Icon color / Mini bar color (Pictogramkleur / Minibalkkleur) - achtergrondkleur van het startpictogram of de minibalk
- Custom chat icon (Aangepast chatpictogram - alleen in pictogrammodus) - schakel in om eigen pictogrammen voor het openen/sluiten van de chat te uploaden
- Position on screen (Positie op het scherm) - plaats de widget aan de linker- of rechterkant van het scherm
- Move up chat icon/bar by (Chatpictogram/-balk omhoog verplaatsen met) - verticale afstand in pixels vanaf de onderrand
- Move icon/bar left/right by (Pictogram/balk naar links/rechts verplaatsen met) - horizontale afstand in pixels vanaf de dichtstbijzijnde schermrand
Icon with Text
De modus Icon with text geeft de launcher een korte tekst, zodat bezoekers al vóór het openen zien waarvoor de chat bedoeld is. Dit is handig wanneer een los pictogram niet duidelijk genoeg is - bijvoorbeeld "Stuur ons een bericht / We antwoorden direct" of "Hulp nodig? / Vraag het onze assistent".
Wanneer je deze modus kiest, worden er vier instellingen toegevoegd:
- Label line 1 (Labelregel 1) - de eerste, vettere regel van de tekst (max. 60 tekens)
- Label line 2 (Labelregel 2) - de tweede, lichtere regel (max. 60 tekens). Laat dit veld leeg voor een launcher met een enkele regel
- Text color (Tekstkleur) - kleur van de tekst. Als je dit niet aanpast, kiest ChatLab automatisch zwart of wit op basis van hoe licht of donker de kleur van je launcher is
- Show close cross (Sluitkruisje tonen) - voegt een klein kruisje toe aan de launcher zodat bezoekers deze kunnen verbergen
Beide regels worden ingekort met een beletselteken (...) als ze niet passen, zodat de launcher nooit breder wordt dan het scherm. De launcher verandert weer in een cirkel zolang de chat geopend is.
Als meertalige ondersteuning is ingeschakeld, worden beide tekstregels net zoals de rest van de teksten voor bezoekers vertaald.
Show close cross staat standaard uit en is alleen beschikbaar in deze modus. Wanneer ingeschakeld, kan een bezoeker op het kruisje klikken om de launcher voor de rest van de browsersessie te verbergen - 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 met vertraging openen) - activeert een wachttijd vóór het automatisch openen (alleen beschikbaar als automatisch openen is ingeschakeld)
- Delay by (Vertragen met) - aantal seconden wachttijd voor het openen (0-60 seconden)
Human-Like Messaging
Simuleert een menselijke manier van typen door antwoorden op te splitsen in meerdere berichtbubbels, die geleidelijk zin voor zin worden getoond:
- Human-Like Messaging (Mensachtige berichten) - 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 startpictogram van de chat, zodat bezoekers de chat sneller opmerken. Deze functie is alleen beschikbaar in de pictogrammodus 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 het chatpictogram opgestapeld weergegeven.
Spraakinvoer (de microfoonknop in het tekstvak van de chat) wordt geconfigureerd in Settings > Chat Conversation, niet hier in Appearance.
Welcome Screen
Schakel de widget over naar een speciale welkomstindeling die nieuwe bezoekers begroet met een groot welkomstbericht en de voorgestelde vragen op een gecentreerde witte kaart toont. Het welkomstscherm verschijnt alleen aan het begin van een nieuwe sessie en schakelt over naar de standaard chatweergave zodra de bezoeker zijn eerste bericht verstuurt.
- Special Welcome Screen (Speciaal welkomstscherm) - schakelt het welkomstscherm in of uit (standaard uitgeschakeld)
- Suggested questions intro (Intro voorgestelde vragen) - korte tekst boven de kaart met voorgestelde vragen op het welkomstscherm (bijvoorbeeld "Kies een optie of typ een bericht"). Laat dit leeg om de tekst te verbergen. Vereist dat voorgestelde vragen zijn geconfigureerd in Settings > Chat Conversation.
- Hide Human Contact Form (Contactformulier verbergen) - verbergt de contactformulier-optie in de header zolang het welkomstscherm actief is
- Hide Live Chat (Live Chat verbergen) - verbergt de livechat-optie in de header zolang het welkomstscherm actief is
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 op de welkomstkaart getoond in plaats van de voorgestelde vragen.
Zie Welcome Screen voor alle details, lay-outvarianten en voorbeelden van hoe dit eruitziet voor bezoekers.
Header Actions
Bepaalt hoe Live Chat en het Human Contact Form (Contactformulier) worden aangeboden in de header van de chatwidget.
- Separate icons (Aparte pictogrammen) - elke actie krijgt een eigen pictogram in de header, naast de sluitknop
- Menu (dropdown) (Menu (dropdown)) - beide acties worden ondergebracht in het headermenu (het pictogram met de drie puntjes), samen met opties zoals "Reset conversation" en de taalschakelaar wanneer deze zijn ingeschakeld
Nieuwe chatbots maken standaard gebruik van het menu. Dit houdt de header overzichtelijk naarmate er meer acties bijkomen. Chatbots die vóór 2 september 2026 zijn aangemaakt, behouden de afzonderlijke pictogrammen, zodat er voor hun bezoekers niets verandert. Je kunt op elk gewenst moment wisselen - deze instelling heeft alleen invloed op de weergave, niet op de functionaliteit van de acties.
Typography
Bepaalt het lettertype en de tekstgroottes voor de gehele widget - berichten, voorgestelde vragen, de header, formulieren en de tekst op de launcher.
- Widget font (Widgetlettertype) - 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 voorgestelde vragen) - grootte van de knoppen voor voorgestelde vragen (12-24 px)
Inter is de standaardwaarde en komt overeen met de weergave van elke chatbot voordat deze instelling bestond; er verandert dus 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. Dit maakt het de snelste optie en sluit naadloos aan bij websites die zelf ook het systeemlettertype gebruiken, al kan de chat er hierdoor net iets anders uitzien op Windows, macOS en Android. De overige zeven zijn Google Fonts, die eenmalig door de browser van de bezoeker worden gedownload. Elk lettertype heeft een fallback, zodat de tekst leesbaar blijft en de lay-out intact blijft als het netwerk van de bezoeker Google Fonts blokkeert.
Het lettertypebestand wordt alleen in het chatvenster zelf ingeladen. Het wordt pas aan je eigen pagina toegevoegd wanneer de widget tekst buiten het chatvenster toont - zoals bij de launcher Icon with text, de compacte chatbalk of de welkomstberichtbubbels. Een chatbot die het gewone pictogram gebruikt, veroorzaakt geen extra netwerkverzoeken op je pagina.
Widget Size
Pas aan hoe groot de geopende chatwidget wordt weergegeven op desktop en mobiele apparaten. Elke schuifregelaar heeft een Default-knop (Standaard) waarmee je de oorspronkelijke 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 maakt de widget gebruik van de ingebouwde responsieve afmetingen van ChatLab. Elke andere waarde stelt een vaste afmeting in.
Op mobiele apparaten zorgt de standaardwaarde (100%) ervoor dat de geopende chat het volledige scherm bedekt. Als je een lager percentage kiest, wordt de widget verkleind tot dat deel van het scherm en gecentreerd in de viewport, zodat bezoekers de pagina rondom de chat nog kunnen zien.
Naast de schuifregelaars vind je twee knoppen met Save & Preview (Opslaan en voorbeeld, hieronder gemarkeerd) - één voor de desktopinstellingen en één voor de mobiele instellingen. Door op een knop te klikken worden eventuele niet-opgeslagen wijzigingen bewaard en wordt de chat direct geopend in een voorbeeldvenster met je huidige instellingen:
- De desktopknop opent een normaal browservenster, zodat je de exacte afmetingen op een desktopscherm kunt controleren.
- De mobiele knop opent een compact pop-upvenster (400 x 700) waarin de widget in de mobiele lay-out wordt getoond. Dit is handig wanneer je de schuifregelaar Mobile size instelt vanaf een desktopcomputer.
Maximise Button (Drawer Mode)
Met Drawer mode (Lademodus) kan de bezoeker de chat transformeren van een zwevend venster naar een paneel over de volledige hoogte dat aan de zijkant van het scherm is vastgemaakt, terwijl je webpagina ernaast zichtbaar blijft. Dit is ideaal voor interacties waarbij de bezoeker meeleest op de pagina - zoals lange antwoorden, productvergelijkingen, formulieren of teksten met veel inhoud.
Schakel Maximise button (Maximaliseerknop) in onder Widget Size en er verschijnt een knop in de chatheader; de bezoeker bepaalt zelf of hij deze gebruikt. Deze keuze wordt onthouden voor de rest van de browsersessie.
- Het paneel is half zo breed als het browservenster (tot maximaal 720 px) en neemt altijd de volledige schermhoogte in. Het paneel dockt aan dezelfde kant als je launcher: een widget die links is geplaatst, opent dus ook een paneel aan de linkerkant.
- Desktop width en Desktop height zijn hier niet van toepassing - deze bepalen uitsluitend 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 de knop niet, omdat de chat daar al het hele scherm vult. Als een bezoeker het browservenster smaller maakt dan die breedte, klapt het paneel automatisch weer terug naar het normale venster.
- De launcher is verborgen zolang het paneel geopend 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 deze functie inschakelt.
Other Appearance Settings
- Widget Shadow (Widgetschaduw) - schakel de schaduw rond de container van de chatwidget in of uit
- Open links in (Links openen in) - kies of links in chatberichten openen in een new tab (nieuw tabblad) of in het same tab (zelfde tabblad)
Op desktop wordt in de chatheader ook een sluitknop (X) weergegeven, zodat bezoekers de chat kunnen inklappen naar de launcher zonder de pagina opnieuw te laden. Deze sluitknop blijft verborgen wanneer de chat is ingesloten als iframe of in de modus Volledig scherm wordt weergegeven.
Custom Chat Footer
Voeg een eigen voettekst toe die onderaan de chatwidget wordt getoond (max. 250 tekens). Markdown wordt ondersteund voor het toevoegen van links. Dit wordt vaak gebruikt om te linken naar je privacybeleid of algemene voorwaarden.
Voorbeeld in markdown:
By chatting you accept our [Privacy Policy](https://www.example.com)
Custom CSS
Voeg aangepaste CSS toe om het uiterlijk van je chatwidget verder aan te passen (max. 5000 tekens):
Related Articles
Wijzigingen worden automatisch opgeslagen. Wacht op de melding Saved (Opgeslagen) en controleer vervolgens het resultaat via Overview (Overzicht) en op de ingesloten widget op desktop en mobiel. Het voorbeeld in de instellingen toont het chatvenster; de plaatsing van de launcher en het automatische openingsgedrag op paginaniveau kun je het beste controleren op je website-insluiting.
- Je eerste chatbot maken
- Gespreksinstellingen - stel het welkomstbericht en de voorgestelde vragen in
- Welcome Screen - de paginavullende welkomstindeling en varianten voor bezoekers
- Aangepaste formulieren - verzamel gegevens van bezoekers direct in de chat
- Leads verzamelen