Het Uiterlijk van je Chat Widget Aanpassen
Laat de chat-widget aansluiten bij je merk — configureer kleuren, knopstijl & pictogram, homescreen-teksten, e-mailtab, taal en logo met een live voorbeeld.
Uiterlijk Instellingen
Navigeer naar Channels → Website Chat → Appearance-tabblad. De pagina is opgesplitst in twee kolommen: instellingen links en een live voorbeeld rechts dat automatisch bijwerkt bij wijzigingen (auto-opgeslagen).
Kleuren
In de kaart Colors configureer je deze kleurkiezers:
- Primary Color — bepaalt de gradiënt-hero op het homescreen, de CTA-knop, de e-mailtab hero en de zwevende chatknop. Standaard:
#3B82F6(blauw) - Button Text Color — tekst- en pictogramkleur op de zwevende knop. Standaard:
#FFFFFF(wit) - Message Text Color — tekstkleur in berichtballonnen van bezoekers. Standaard:
#FFFFFF - Welcome Header Text Color — titelkleur in de witte chatheader. Standaard:
#1F2937(donkergrijs) - Chat Background — de achtergrond van het chatgespreksgebied. Standaard:
#FFFFFF
Elk veld heeft een kleurkiezer en een tekstveld zodat je exacte hexwaarden kunt typen.
Knopinstellingen
Configureer de zwevende chatknop:
- Position — dropdown: Right (standaard) of Left kant van het scherm
- Horizontal Margin (px) — afstand tot de rand. Standaard:
20 - Vertical Margin (px) — afstand tot de onderkant. Standaard:
20
Knopstijl
Kies de vorm van de zwevende chatknop uit vijf stijlen:
- Rond — volledig ronde knop (standaard)
- Afgerond — vierkant met afgeronde hoeken (14px radius)
- Vierkant — bijna scherpe hoeken (4px radius)
- Pill — brede capsulevorm met pictogram + "Chat"-tekst
- Zwevend — ronde knop met een gekleurde gloed-schaduw
Knoppictogram
Kies het pictogram in de zwevende knop uit zes opties:
- Chat — chatbubbel met drie puntjes (standaard)
- Bubbel — eenvoudige chatbubbel zonder puntjes
- Bericht — envelop / e-mailpictogram
- Support — headset-pictogram
- Snel — bliksemschicht-pictogram
- Zwaai — zwaaiend hand-pictogram
Welkomstbericht & Configureerbare Teksten
Configureer de teksten die bezoekers zien op de drie schermen van de widget:
- Titel — de begroeting in de header en homescreen-hero. Standaard:
Hi! 👋 - Bericht — de welkomsttekst onder de titel. Standaard:
How can we help you today? - Homescreen Titel — de hoofdkop op het homescreen, onder de gradiënt-hero. Standaard:
Hoe kunnen we je helpen? - Chat Knoptekst — tekst op de CTA-knop om een chat te starten. Standaard:
Laten we chatten - E-mail Tab Subtitel — ondertitel op het e-mail contactformulier. Standaard:
Stuur ons een e-mail - Input Placeholder — placeholder in het berichtenveld. Standaard:
Type your message... - Begroetingsbericht — het bericht dat direct wordt getoond als iemand de chat opent, nog voordat ze een bericht sturen. Dit staat los van de autoresponder. Standaard:
Welkom! Waarmee kunnen we je helpen? 😊 - Standaardtaal — dropdown: Nederlands, English of Deutsch. Bepaalt alle UI-labels in de widget (knoppen, formuliervelden, systeemberichten) voor bezoekers die geen andere taal hebben gekozen.
Meertalige ondersteuning (Pro & Enterprise)
Op de Pro- en Enterprise-plannen kun je je chat widget in meerdere talen aanbieden. Vink onder Deze talen ook aanbieden (onder het veld Standaardtaal) de extra talen aan die je wil ondersteunen.
Zodra dit aan staat, zien bezoekers een klein vlaggetje met dropdown in de bovenhoek van de widget (op het home-, chat- en e-mailscherm) om van taal te wisselen. Bij het wisselen worden vertaald:
- Alle UI-teksten van de widget — knoppen, koppen, placeholders en systeemberichten
- Je FAQ-items
- Aangepaste formuliervelden — labels, placeholders en opties
Vertalingen worden automatisch gegenereerd met AI zodra een taal voor het eerst nodig is, en daarna gecachet — er is dus geen handmatig vertaalwerk nodig. Als je een tekst, FAQ of formulierveld aanpast, wordt de gecachete vertaling automatisch ververst zodra die taal weer wordt opgevraagd.
De door de bezoeker gekozen taal zie je terug in de inbox, in de gespreksheader naast de naam (als vlaggetje) — zo weet je team direct in welke taal ze moeten reageren.
Op het Starter-plan is alleen je standaardtaal beschikbaar en wordt er geen taalkiezer getoond.
Logo
Voer een Logo URL in om je logo te tonen in de homescreen-hero, de agentkaart, de chatheader en de e-mailtab hero. Als dit leeg is, wordt een standaard avatar getoond.
Widget Schermen
De chat-widget heeft nu drie schermen, bereikbaar via een navigatiebalk onderin:
- Home — een merkgerichte landingspagina met een gradiënt-hero (in je primaire kleur), je logo, welkomsttitel, een agentkaart met je welkomstbericht, een CTA-knop om te chatten, en een FAQ-accordion (als FAQ-items zijn geconfigureerd)
- Chat — de gespreksweergave met een schone witte header (met logo, titel en een groene "Online" statusbadge), berichtballonnen en een berichtinvoerveld
- E-mail — een contactformulier met naam-, e-mail- en berichtvelden, met bovenaan een gradiënt-hero met je logo en de e-mail ondertitel. Bezoekers kunnen vragen insturen die in je inbox aankomen
Live Voorbeeld
Het rechterpaneel toont een interactief voorbeeld met drie tabbladen — Home, Chat en E-mail — zodat je precies kunt zien hoe elk scherm eruitziet bij wijzigingen. Alle wijzigingen worden automatisch opgeslagen.