Widget-aanpassing
Laat de chat-widget aansluiten bij uw merk en zich precies gedragen zoals u wilt. Alle aanpassingen gebeuren in uw dashboard — wijzigingen worden automatisch op uw website toegepast, zonder het embed-script aan te raken.
U vindt de instellingen onder Dashboard → Chatbots → selecteer uw chatbot:
- Het Widget-tabblad beheert het uiterlijk (positie, kleuren, afmetingen, teksten)
- Het Behavior-tabblad beheert hoe de widget met bezoekers omgaat
Klik op Wijzigingen opslaan bovenaan de pagina om uw bewerkingen toe te passen.
Widget-tab: Uiterlijk
Positie
Kies waar de widget op uw website verschijnt:
| Positie | Beschrijving |
|---|---|
| Onder rechts | Zwevende chatbel rechtsonder (standaard) |
| Onder links | Zwevende chatbel linksonder |
| Inline (Ingebed) | Widget is rechtstreeks op de pagina ingebed in plaats van te zweven |
Met de Inline-positie wordt de chat op de plek waar het embed-script staat ingebed en is altijd open — geen bel, geen sluitknop. Ideaal voor speciale chat- of supportpagina's. Zie Widget Embedding voor details.
Kleurenpalet
Kies een van de drie kleurpresets:
| Preset | Beschrijving |
|---|---|
| Default | Het standaard ChatReact-kleurschema |
| Brand | De merkkleuren van uw bedrijf uit Company Settings |
| Custom | Kies uw eigen kleuren |
De Brand-preset is alleen beschikbaar zodra merkkleuren zijn ingesteld. Ga naar uw Company Settings om kleuren van uw website te extraheren.
Wanneer Custom is geselecteerd, kunt u vier basiskleuren instellen:
- Primary — bel, headerverloop, knoppen en bezoekersberichten
- Secondary — tweede kleur van het headerverloop
- Background — achtergrond van het chatvenster
- Text — kleur van berichttekst
Geavanceerde kleurinstellingen
Meer controle nodig? Met de Custom-preset geselecteerd, klapt u Geavanceerde kleurinstellingen uit om de automatisch berekende kleuren te overschrijven:
- Visitor Messages — achtergrond- en tekstkleur van bezoekersberichtbellen
- Bot Messages — achtergrond- en tekstkleur van botberichtbellen
- Header Text Color — kleur van de titel en subtitel in de widget-header
Alles wat u ongemoeid laat, wordt automatisch berekend voor goede contrastverhouding. Elke override heeft een Reset to automatic-knop om terug te keren naar de berekende kleur.
Afmetingen & Stijl
| Instelling | Bereik | Standaard |
|---|---|---|
| Border Radius | 0–32 px | 24 px |
| Width | 300–500 px | 380 px |
| Height | 400–700 px | 600 px |
Op kleine mobiele schermen schakelt de widget automatisch naar een lay-out met volledige breedte, ongeacht deze afmetingen.
Logo
Schakel Use company logo in widget header in om uw bedrijfslogo in de chatheader te tonen. Het logo zelf wordt geüpload in uw Company Settings — aanbevolen: vierkant, minimaal 200×200 px (JPG, PNG, GIF, WebP of SVG, max. 5 MB).
Deze optie is beschikbaar op het Professional-plan en hoger, en op alle Agency-plannen.
Headertitel, subtitel & beltekst
| Veld | Beschrijving | Standaard |
|---|---|---|
| Header Title | Titel die in de chatvensterheader wordt getoond | "Chat with us" |
| Header Subtitle | Kleinere regel onder de titel | "We typically reply within minutes" |
| Bubble Text | Tekst die naast de chatbel wordt weergegeven wanneer de widget gesloten is | Geen |
Als u nooit een titel of subtitel instelt, toont de widget de standaardtekst — automatisch gelokaliseerd naar de taal van elke bezoeker.
Hoe de header-subtitel werkt: Zolang u geen subtitel heeft geconfigureerd, toont de widget de gelokaliseerde standaardtekst, en het instellingenformulier vult deze standaard vooraf in zodat u kunt zien en bewerken wat bezoekers te zien krijgen. Om de subtitel volledig te verbergen, verwijdert u de inhoud van het veld en slaat u op — een opzettelijk leeggemaakte subtitel blijft verborgen.
De beltekst verschijnt als een klein label naast de gesloten chatbel (bijv. "Got questions?"). Laat het leeg om alleen de ronde bel te tonen.
Widgetvertalingen
Als uw chatbot meerdere talen ondersteunt, verschijnt er onder de uiterlijkinstellingen een Widget Translations-kaart. Daar kunt u het welkomstbericht, fallback-bericht, headertitel, header-subtitel en beltekst vertalen voor elke ingeschakelde taal.
De welkomst- en fallback-berichten zelf worden geconfigureerd in het Persona-tabblad van uw chatbotinstellingen.
Livevoorbeeld
De rechterkolom van het Widget-tabblad toont een Live Preview van uw widget die bij het wijzigen van instellingen wordt bijgewerkt. Hij is interactief: sluit het chatvenster met de X om de gesloten bel te zien (inclusief uw beltekst), en klik op de bel om hem weer te openen.
Behavior-tab: Interactie
Gedragsinstellingen
| Instelling | Beschrijving | Standaard |
|---|---|---|
| Proactive Greeting | Bot begroet bezoekers automatisch na een vertraging (1–10 seconden) | Aan, 3 s |
| Auto-Open | Widget opent automatisch voor bezoekers na een vertraging (1–15 seconden) | Uit, 5 s |
| Sound Enabled | Speel geluiden af voor meldingen | Aan |
| Typing Indicator | Toon een animatie terwijl de bot aan het typen is | Aan |
| Pre-Chat Form | Verzamelt bezoekersinformatie voordat de chat start | Uit |
| Show on Mobile | Toon de widget op mobiele apparaten | Aan |
Maximale berichtlengte
Beperk hoeveel tekens bezoekers per bericht kunnen invoeren (100–10.000 tekens, standaard 2.000). Dit helpt overmatig gebruik door zeer lange invoer te voorkomen. Maak het veld leeg of klik op Remove limit om berichten van elke lengte toe te staan.
Pre-Chat-formulier
Wanneer het pre-chat-formulier is ingeschakeld, vult de bezoeker een kort formulier in voordat het gesprek begint. U configureert de velden zelf:
- Veldtypen: Text, Email, Phone, Textarea
- Elk veld heeft een label, een optionele placeholder, en een verplicht-schakelaar
- Herschik velden met de omhoog/omlaag-knoppen, of verwijder ze
Als uw chatbot meerdere talen ondersteunt, verschijnt er onder de veldeditor een vertaalsectie. Voer vertalingen voor elke taal handmatig in, of klik op Translate with AI om alle labels en placeholders automatisch te vertalen.
Live Chat
Het Behavior-tabblad bevat ook de Live Chat Settings-kaart. Schakel live chat in om bezoekers met uw menselijke agenten te laten praten en kies een modus:
| Modus | Beschrijving |
|---|---|
| Handoff Only | Live chat alleen wanneer de bot niet kan helpen |
| Standalone | Bezoekers kunnen direct met agenten chatten |
| Both | Handoff en directe live chat beschikbaar |
Live Chat is beschikbaar op het Professional-plan en hoger, en op alle Agency-plannen. Zie Live Chat voor hoe u binnenkomende gesprekken beheert.
Branding
Op plannen die white-label omvatten, verschijnt er onderaan het Behavior-tabblad een Branding-kaart. ChatReact-branding is standaard verborgen op deze plannen — schakel Show "Powered by ChatReact" in als u het toch in de widget-footer wilt tonen.
Leerfase
Terwijl een nieuwe chatbot in de leerfase zit, kunt u regelen hoe voorzichtig deze antwoordt — Cautious, Balanced (aanbevolen), of Confident — in het Confidence-tabblad van dezelfde instellingenpagina. Dit tabblad verschijnt op plannen die de Improvement Agent omvatten. Zie de Improvement Agent gids voor details.