Hoe je een AI-chatbotwidget aanpast en insluit

Open je assistent en kies Widget Integration → Appearance. Begin met Widget Width en de optionele Height, en kies daarna het Theme, de Font Family en de Chat Title. Tutorial Lab gebruikt het thema Modern en de titel “Tutorial Lab”; door de hoogte leeg te laten, gebruikt de widget zijn responsieve standaardwaarde.

Wijs kleuren toe per rol: achtergrond en tekst van de header, bot-tekstballon en tekst, bezoekers-tekstballon en tekst, en achtergrond en icoon van de launcher. Het voorbeeld gebruikt een donkerblauwe header met witte tekst en een duidelijke blauwe bezoekersballon. Controleer elke combinatie van voor- en achtergrondkleur in het live voorbeeld en niet alleen in de kleurkiezer. Normale tekst moet een contrastverhouding van minimaal 4.5:1 hebben.

Open Images. Avatar Image verschijnt naast de berichten van de assistent, Chat Button Image vervangt de launcher-knop en Welcome Image verrijkt het lege startscherm. Gebruik niet overal hetzelfde brede logo, maar snijd voor elke toepassing een geschikte afbeelding op maat.

Gebruik geoptimaliseerde PNG- of WebP-bestanden met duidelijke contouren. Houd de avatar en de launcher vierkant, test transparantie op zowel lichte als donkere pagina's en vermijd tekst in kleine iconen. In dit voorbeeld zijn de optionele afbeeldingen bewust leeg gelaten; dat is een prima keuze wanneer het ingebouwde WebChatAgent-icoon duidelijker is dan een minder geschikt eigen logo.

Open Content & Behavior. Bepaal of de widget is uitgeschakeld op de website, standaard geopend start, verborgen is op mobiele apparaten of bronvermeldingen mag tonen. Controleer daarna de instellingen voor microfoon, automatische vertaling, tekstballon-notificaties en uitgesloten paden. Pas één instelling tegelijk aan en controleer direct het zichtbare resultaat.

Schrijf een korte welkomsttekst die direct het doel uitlegt. Suggestieknoppen vind je niet op dit tabblad, maar onder Buttons & forms in het onderdeel Quick actions. Voeg daar twee of drie gerichte opties toe. “Which plan is right for me?” biedt direct meer context dan “Learn more.” Open niet automatisch een groot chatvenster op elke pagina; gebruik Triggers pas nadat timing, paginabereik, sluitgedrag en frequentie grondig zijn getest in een schone browsersessie.

Open Positioning. Desktop Offsets en Mobile Offsets zijn onafhankelijke afstanden vanaf de gekozen hoek. Tutorial Lab gebruikt 20 pixels vanaf de rechter- en onderkant voor beide weergaven als neutrale basiswaarde.

Test meer dan alleen de gesloten knop. Open de volledige widget op de kleinste ondersteunde schermbreedte terwijl de cookiebanner zichtbaar is, de adresbalk van de mobiele browser is uitgeklapt en eventuele vaste navigatie- of bestelknoppen aanwezig zijn. Verhoog de betreffende marge totdat de launcher en het venster goed bereikbaar zijn zonder belangrijke acties te blokkeren.

Kies Test Your Chatbot om het geauthenticeerde bezoekersvoorbeeld te openen. Controleer de titel, de blauwe bezoekersballon, het goed leesbare assistentbericht, de suggestieknoppen, het invoerveld, de sluitknop en de huisstijl. Bedien de widget zowel met de muis als met het toetsenbord; de focusindicator moet duidelijk zichtbaar blijven en logisch terugkeren na het sluiten van het venster.

In het geteste voorbeeld stellen we de vraag: “What are the support hours?” De echte widget antwoordt dat de supportafdeling van Northstar Services geopend is van maandag tot en met vrijdag, van 8:00 AM tot 6:00 PM (08:00–18:00) uur Midden-Europese Tijd. Dit bevestigt zowel de opgeslagen weergave als een feitelijk juist, op bronnen gebaseerd antwoord. Herhaal dit met een bewust onbekende vraag om te controleren of ook langere standaardantwoorden prettig leesbaar blijven.

Scroll naar het codeblok in Widget Integration en kopieer de volledige HTML, niet alleen het chatbot-ID. Het blok laadt het script WebChatAgent asynchroon en maakt het custom element `web-chat-agent` aan met het ID van deze assistent. Plak dit eenmalig vlak voor de sluitende `body`-tag of in het algemene code-invoerveld van je CMS.

Voeg vóór het testen de exacte staging- en productiehostnamen toe onder Allowed Websites. Als je cookiebeleid niet-essentiële widgets van derden blokkeert, laad het script dan pas nadat de juiste toestemmingscategorie is geaccepteerd; als de widget als noodzakelijke ondersteuning geldt, leg die beslissing en de gegevensstroom dan vast. Controleer of er geen dubbele scripts, consolefouten of Content Security Policy-blokkades optreden.

Opgeslagen widgetwijzigingen worden automatisch opgehaald door het geplaatste element. Je hoeft de insluitcode dus niet te vervangen na het aanpassen van kleuren, suggesties of marges. Vervang de code alleen wanneer je bewust overstapt op een ander chatbot-ID of een ander integratietype.