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? 😊
• Taal — dropdown: Nederlands of English. Bepaalt alle UI-labels in de widget (knoppen, formuliervelden, systeemberichten).

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.