Chatwidget instellingen en installatie
Chatwidget
Open Dashboard → uw assistent → Kanalen → Chatwidget. Hier installeert en past u de zwevende websitewidget aan. Er is geen apart tabblad Integratie of Widgetintegratie.
De widget installeren
Vouw Installatiedetails tonen uit boven het aanpassingsgedeelte. Het paneel bevat:
- de kant-en-klare HTML waarin uw Chatbot-ID al is ingevuld;
- de acties Code kopiëren en Aan website toevoegen;
- Installatie controleren om te controleren of de widget laadt op een toegestaan domein;
- installatiehandleidingen voor WordPress, Shopify, Wix, Squarespace en Webflow.
Wanneer WebChatAgent de widget detecteert, toont het paneel het domein waarop deze assistent wordt geladen. Een mislukte controle betekent meestal dat de code ontbreekt, de pagina nog een oude gecachte versie weergeeft of het domein ontbreekt in Instellingen → Toegestane websites.
Zie de Website Embed Guide voor plaatsing en de developer widget guide voor HTML-attributen en runtime-events.
Uiterlijk en inhoud
Dit tabblad combineert visueel ontwerp, afbeeldingen en de inhoud die wordt getoond voordat een gesprek begint.
Basisinstellingen
| Instelling | Wat het wijzigt |
|---|---|
| Widgetthema | Het algehele ontwerp van de widget. |
| Breedte / Hoogte | Optionele afmetingen in pixels. Houd voldoende ruimte over voor berichten, bronnen, formulieren en het mobiele toetsenbord. |
| Chattitel | Tekst in de kop van de widget. |
| Lettertype | Lettertype dat in de widget wordt gebruikt. Zoek in Google Fonts of voeg een aangepaste lettertypenaam toe. |
Kleuren
| Instelling | Is van toepassing op |
|---|---|
| Themakleur / Thematekstkleur | Achtergrond en tekst van de koptekst |
| Botberichtkleur / Tekstkleur | Berichtballonnen van de assistent |
| Gebruikersberichtkleur / Tekstkleur | Berichtballonnen van de bezoeker |
| Chatknopkleur / Pictogramkleur | Zwevende startknop |
De editor controleert het tekstcontrast en waarschuwt wanneer een combinatie van voorgrond en achtergrond onder de aanbevolen WCAG-verhouding ligt. Los deze waarschuwingen op voordat u publiceert.
Afbeeldingen
Elke afbeelding accepteert een upload of een URL:
| Afbeelding | Waar het verschijnt |
|---|---|
| Avatar-afbeelding | Naast assistentberichten |
| Chatknop-afbeelding | In de zwevende startknop in plaats van het standaardpictogram |
| Welkomstafbeelding | Boven het welkomstbericht, vaak gebruikt voor een logo of banner |
Uploads ondersteunen PNG, JPG, WebP en GIF. Gebruik kleine, geoptimaliseerde afbeeldingen; de editor toont de huidige groottelimieten naast elke upload.
Inhoud
| Instelling | Wat het wijzigt |
|---|---|
| Welkomstbericht | Introductie met opmaak die wordt getoond wanneer de chat opent |
| Tekstballontekst | Korte uitnodiging die naast de gesloten chatknop wordt getoond |
| Privacyverklaring | Optionele mededeling met opmaak in de widget, inclusief links naar privacy-informatie |
Welkomst- en tekstballonteksten kunnen worden opgesteld met Genereren met AI en vervolgens worden bewerkt. Houd de tekstballon kort; plaats langere uitleg in het welkomstbericht.
Gedrag
Zichtbaarheid en interactie
| Instelling | Wat het wijzigt |
|---|---|
| Widget uitschakelen op website | Voorkomt dat de zwevende widget wordt weergegeven zonder de configuratie ervan te verwijderen. |
| Standaard geopend | Opent het chatvenster wanneer de pagina laadt. |
| Microfoon uitschakelen | Verwijdert spraakinvoer uit de widget. |
| Bronnen onder antwoorden tonen | Toont maximaal vier bronlinks wanneer deze beschikbaar zijn. |
| AI-markering onder botantwoorden | Markeert AI-antwoorden. Dit is altijd aan en kan niet worden uitgeschakeld. |
| Automatische vertaling | Vertaalt interfacesteksten van de widget naar de gedetecteerde taal van de bezoeker. |
| Bestandsupload | Laat bezoekers bestanden of afbeeldingen bijvoegen voor analyse wanneer hun pakket dit toestaat. |
| Meldingsgeluid | Speelt een kort geluid af wanneer een proactief bericht verschijnt. |
| WhatsApp-nummer | Voegt een WhatsApp-knop toe aan de kop van de widget. Gebruik het volledige nummer inclusief landcode. |
Verbergen op URL's/paden
Voer één regel per regel in. Jokerteken * wordt ondersteund, zodat u de widget kunt verbergen op pagina's zoals:
/checkout/*
/account/*
https://example.com/en/legal/*
Gebruik dit voor checkout-, account-, inlog- of andere pagina's waar de zwevende widget zou afleiden van de taak of belangrijke bedieningselementen zou bedekken.
Positionering
Stel onafhankelijke horizontale en verticale marges in voor desktop en mobiel. De waarden bepalen de afstand vanaf de rechter- en onderrand. Test ze terwijl cookiebanners, sticky navigatie en mobiele veilige zones zichtbaar zijn.
Automatische berichten
Schakel Proactieve triggers inschakelen in wanneer de widget contact moet opnemen met bezoekers op basis van tijd, scrolldiepte, verlaat-intentie, pagina, inactiviteit, terugkerende bezoeken of ander gedrag.
Het paneel bevat de trigger-editor, algemene frequentie-instellingen, optionele planning en targeting, sjablonen en prestatiegegevens. Het legt ook de optionele toestemmingskoppeling uit. Basis proactief gedrag werkt anoniem; detectie van terugkerende bezoekers, permanente limieten, analyse en door AI gegenereerde begroetingen vereisen een verleend toestemmingssignaal.
Zie Proactive Triggers voor elk triggertype, elke antwoordmodus, limiet en het privacygedrag.
Knoppen en formulieren
Snelle acties
Promptknoppen (ook wel startsuggesties, voorgestelde vragen of gespreksstarters genoemd) zijn berichten met één klik die worden getoond voordat de bezoeker iets typt. Ze bevinden zich onder Kanalen → Chatwidget → Knoppen en formulieren → Snelle acties.
| Veld | Wat het doet |
|---|---|
| Titel | Het label op de knop. Emoji's zijn toegestaan. |
| Actie | Het bericht dat naar de assistent wordt verzonden wanneer op de knop wordt geklikt. Schrijf een volledige vraag, omdat deze in het transcript verschijnt. |
Gebruik Knop toevoegen voor een nieuw item, versleep de handgreep aan de linkerkant om de volgorde te wijzigen en klik op Wijzigingen opslaan. Genereren met AI stelt een set op basis van de eigen gegevensbronnen van de assistent samen; de schakelaar erboven houdt die set automatisch actueel.
De knoppen zijn zichtbaar zolang het gesprek nog leeg is. Zodra de bezoeker het eerste bericht verzendt, verplaatsen ze zich naar het actiemenu naast het invoerveld.
Twee zaken om rekening mee te houden: een actieve Action Bar vervangt de promptknoppen, gebruik dus het een of het ander. En de inlinechat behoudt zijn eigen knoppen onder Kanalen → Inlinechat; deze instelling is daarop niet van toepassing.
Action Bar
De Action Bar toont permanente acties onderaan de chat. Wanneer deze actief is, vervangt deze de promptknoppen. Afhankelijk van het itemtype kan deze een link, WhatsApp, een ingesloten Calendly-pagina of een aangepast formulier openen.
Formulieren
Maak formulieren, voeg velden toe en wijzig de volgorde, stel verplichte waarden in en pas de verzendknop en het succesbericht aan. Verzonden gegevens worden opgeslagen in het Leads-dashboard.
Zie Action Bar & Forms voor itemtypes, veldtypes, vertaling en leadkoppeling.
Geavanceerd
Taaldetectiebron
Kies hoe automatische vertaling de taal van de bezoeker detecteert:
- Browsertaal gebruikt de
Accept-Language-voorkeur van de browser. - HTML-lang-attribuut gebruikt de
<html lang="…">-waarde van de pagina.
Gebruik de HTML-optie wanneer elke gelokaliseerde pagina de taal correct aangeeft en de widgettaal moet bepalen. Gebruik browsertaal wanneer de pagina zelf niet betrouwbaar gelokaliseerd is.
Branding
Branding verbergen verwijdert de WebChatAgent-naamsvermelding wanneer het huidige plan dit toestaat. Het paneel toont duidelijk of branding momenteel zichtbaar of verborgen is.
Eigen CSS
Eigen CSS wordt in de widget geïnjecteerd en heeft voorrang op ingebouwde stijlen zonder !important. De editor biedt startpresets en een lijst met stabiele .wca-*-selectors. Deze toont ook de tekenlimiet en past wijzigingen direct toe op het voorbeeld.
Alleen gedocumenteerde selectors vormen een stabiel contract. Zie Eigen CSS voor de selectortabel en voorbeelden.
Testen en publiceren
- Gebruik Test je chatbot na wijzigingen in inhoud of gedrag.
- Controleer de welkom-status, een echt antwoord, bronnen, promptknoppen, formulieren en bestandsuploads voor zover van toepassing.
- Klik op Wijzigingen opslaan.
- Open de echte website op desktop en mobiel.
- Gebruik Installatie controleren als de widget niet wordt gedetecteerd.
Het dashboardvoorbeeld is handig, maar de echte site is leidend voor z-index, cookiebanners, responsieve offsets, lettertypen en paginaspecifieke zichtbaarheidsregels.