Widget
Last updated
Last updated
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:
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.
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.
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.
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 twee knoppen bij deze parameters:
Show Script Tag: toont de aangepaste script tag die je kan gebruiken, waar deze parameters al zijn ingevuld.
Update Widget: hier kan je klikken om de pagina te herladen en de parameters die je ingeeft te activeren.
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:
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.
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.
