Widget

Documentatie Advanced code responses Integration API Launch Oswald
Search…
Widget
De makkelijkste manier om je Oswald chatbot te integreren in je website (HTML) is via de ingebouwde widget. Je kan deze widget configureren door onder Integraties te kiezen voor Widget. Je hebt de vrijheid om deze widget te configureren naar jouw stijl. Daar heb je de volgende parameters:
Naam.
Beschrijving
Widget titel
De titel op de widget.
Widget ondertitel
De ondertitel op de widget.
Widget bubble text
De tekst op de knop van de widget.
Primaire kleur
De primaire kleur van de widget en de kleur van de tekstballonnen van de berichten van de chatbot.
Secundaire kleur
De kleur van de tekstballonnen van de berichten van de gebruiker.
Kleur overname
De kleur van de tekstballonnen van de berichten van een customer agent.
Kleur tekst
De kleur van de tekst van de berichten van de chatbot.
Secundaire kleur tekst
De kleur van de tekst van de berichten van de gebruiker.
Kleur text takeover
De kleur van de tekst van de berichten van een customer agent.
Bericht plaatshouder
De tekst die op het inputveld van de gebruiker staat.
Overname Status Bericht
De tekst die weergegeven wordt wanneer de gebruiker met een takeover agent aan het praten is.
Annuleer Overname Knop
De tekst die weergegeven wordt op de knop waar de gebruiker op kan klikken om terug met de chatbot te praten zonder dat de takeover agent het gesprek heeft beëindigd.
Vertraging bericht
Het aantal milliseconden tussen opeenvolgende berichten van de chatbot.
Url voor icoon
Een url naar een icoontje dat getoond wordt in de widget.
Url voor widget demo pagina
Een url naar de pagina waarop je de widget wil testen, zonder effectief de widget te integreren. Deze pagina wordt geopend als je op Test widget klikt in de instellingen van de chatbot.
Widget script
Een stukje HTML-code dat je kan plakken in de <body> van je webpagina. De widget zal dan in deze configuratie te zien zijn op die specifieke webpagina.
De widget integreren op je website is zo eenvoudig als de HTML-code plakken in de body van je webpagina. In dit stukje HTML-code kan je de sessie bepalen die voor de gebruiker gekozen moet worden. Op deze manier kan je dezelfde gebruiker steeds dezelfde sessie tonen. De gebruiker ziet dan bij opnieuw openen van de widget de recente berichten die hij of zij met de bot heeft uitgewisseld. Dit kan interessant zijn als de gebruiker geregeld van pagina wisselt terwijl hij de bot gebruikt. Je bepaalt de sessie van de gebruiker door ze in het widgetscript toe te voegen in de widgeturl, bijvoorbeeld:https://api.oswald.ai/api/v1/chats/<API TOKEN IN INSTELLINGEN>/widget?session=<DE SESSION DIE JE KIEST>
Merk op dat Oswald niet kan voorspellen hoe we je sessie binnenkrijgen of opslaan, daarom kiezen we een willekeurige code als sessie als je niets doorgeeft.
Stijl van de widget 
Je kan het uitzicht en het gedrag van de widget nog verder aanpassen doormiddel van de file upload knoppen onderaan het configuratiescherm. Hier kan je drie files opladen: de host.css, de widget.css en de widget.js file. 
De host.css file bevat de stylesheet die op de webpagina die de widget bevat (host) wordt ingeladen. Deze bepaalt de grootte en de plaats van de widget op de pagina.
De widget.css file bevat de extra stijlregels voor de widget zelf. De widget is immers opgemaakt uit iframes en het uitzicht hiervan kan je niet bepalen vanop de host pagina. Hierin pas je alle eigenschappen binnen de widget aan, bijvoorbeeld vorm en kleur.
De widget.js file geeft je de mogelijkheid om in de iframes van de widget javascript uit te laten voeren die specifiek voor jouw site moet gelden. Zo kan je extra functionaliteit toevoegen. Wees hier voorzichtig mee, nieuwe releases van ons platform kunnen het gedrag van de widget veranderen.
Sjablonen
Je kan ook een widget sjabloon kiezen. Deze sjablonen zijn toegevoegd om de layout van de chatbot aan te passen. Zo kan je intussen kiezen tussen de oude en de nieuwe versie van de widget. In de toekomst zullen hier nog varianten toegevoegd worden voor verschillende toepassingen.
Testen
Je kan de widget ook testen door onder Instellingen voor Opties te kiezen en op Test widget te klikken.
Opgelet: je kan de widget enkel testen als de chatbot gepubliceerd is.
Opgelet: als je website beveiligd is om in een HTML iframe ingeladen te worden, kan je de URL voor widget demo pagina niet gebruiken en zal je een lege webpagina te zien krijgen. De widget zal wel werken.
Wanneer je klikt op 'Test widget' in de chatbot opties krijg je een scherm dat toont hoe je widget er uit zou zien en hoe hij zich zou gedragen:
Je kan hier ook een aantal parameters configureren voor de script tag:
Open on load: of de widget automatisch moet openen wanneer je de pagina laadt
Allow Feedback: of je feedback wil toelaten in de widget. Dan kunnen gebruikers berichten markeren die ze niet correct vinden.
Production Version: of je de productieversie van je chatbot wil gebruiken of de testversie. Ook de instellingen voor je widget komen uit de overeenkomstige versie.
Start Command: het tekstje dat de widget naar de bot stuurt om het gesprek te beginnen. Zo kan je dit tekstje laten verschillen per pagina.
Locale: de taal die de widget moet gebruiken. Normaal neemt de widget de taal van de gebruiker over, op basis van zijn browser.
Session: de sessie om te gebruiken. Dit kan je laten afhangen van de ingelogde gebruiker op je pagina bijvoorbeeld. De widget zal de recente berichten van deze gebruiker ook opnieuw tonen.
Je hebt drie knoppen bij deze parameters:
Show Script Tag: toont de aangepaste script tag die je kan gebruiken, waar deze parameters al zijn ingevuld.
Copy Takeover Link: deze knop zet een link naar het gesprek in de Oswald takeover interface op je klembord. Zo kan je die in je browser plakken om snel het gesprek over te nemen.
Update Widget: hier kan je klikken om de pagina te herladen en de parameters die je ingeeft te activeren.
Feedback toelaten
Je kan er voor kiezen om feedback toe te laten voor je chatbot. Gebruikers krijgen dan de mogelijkheid om verkeerde berichten te markeren.
Wanneer de gebruiker over een bericht van de chatbot hovert, verschijnt er een droevige smiley. Als de gebruiker daar op klikt wordt het bericht aangegeven als een mogelijk probleem en wordt de sessie getagged met de tag 'flagged_by_user'.
In de takeover interface kan je dan filteren op die tag en vind je ook de berichten terug die als probleem zijn gemarkeerd:
Tags op basis van huidige URL
De widget kan automatisch tags toevoegen aan de conversatie op basis van de url waar de gebruiker zich momenteel bevindt. Dit doe je door deze sectie te gebruiken bij de instellingen van de widget:
Wanneer het stukje tekst in de kolom links wordt gevonden in de url, worden de tags rechts toegevoegd aan het bericht van de gebruiker.
Session Cookie
Om de conversatie te bewaren wanneer de gebruiker wisselt van pagina kan je een session cookie instellen. De naam van de cookie is oswaldSession en je kan kiezen hoe lang deze bewaart blijft met de setting 'Session Cookie Time To Live'.
Tenzij deze waarde is ingevuld, gaan we er vanuit dat we geen cookie zetten op de pagina waarop de widget wordt toegevoegd. Je kan de time to live instellen op:
een negatieve waarde: dan wordt er geen cookie ingesteld en een eventueel bestaande cookie wordt verwijderd wanneer de gebruiker de pagina opent.
nul: dan wordt de cookie bijgehouden tot de gebruiker de browser sluit.
een positieve waarde: dan wordt de cookie zoveel seconden bijgehouden in de browser van de gebruiker.
Opgelet: geef je een session id mee aan de widget url, dan wordt de cookie setting genegeerd.
Waarschuw gebruiker bij ingeven van een lang bericht
Je kan de gebruiker waarschuwen dat het bericht dat hij/zij aan het invoeren is waarschijnlijk te lang is om begrepen te worden door een chatbot.
Wanneer je bij deze instelling een tekst ingeeft, en de gebruiker een bericht ingeeft dat langer is dan de limiet, zal de widget het bericht tonen aan de gebruiker. Op die manier kan je de gebruiker vragen zijn berichten kort en to the point te houden.
Integraties - Previous
Inleiding
Next - Integraties
Oswald integration API
Last modified 1yr ago
Copy link
Contents
Stijl van de widget
Feedback toelaten
Tags op basis van huidige URL
Session Cookie
Waarschuw gebruiker bij ingeven van een lang bericht