Je koppelt een Live chat via Instellingen > Accounts > Button: Account koppelen. Vervolgens kies je voor Live chat. Is deze optie niet zichtbaar? Neem contact op met support, dit is een aanvullende feature die specifiek voor jouw omgeving aangezet moet worden.
Als je kiest voor het kanaal live chat, creeëren wij een chat widget voor je. Je ontvangt een widgetcode die je op de gewenste website zet (of laat zetten). De websitebezoeker stelt via deze widget een vraag , dit komt vervolgens binnen in een stream in Webcare.
Je vindt in dit artikel de volgende informatie:
- Live chat koppelen
- Live chat script implementeren op jouw website
- Live chat instellingen
- Mogelijke oplossingen als de chat niet wordt getoond
- Problemen door CSP-beveiliging (Content Security Policy)
Live chat koppelen
Je koppelt een Live chat via Instellingen > Accounts > Button: Account koppelen. Vervolgens kies je voor Live chat. Is deze optie niet zichtbaar? Neem contact op met support, dit is een aanvullende feature die specifiek voor jouw omgeving aangezet moet worden.
- Naam
De naam van de chat is zichtbaar als je de chat ingeklapt op de site wordt getoond. Hier kun je een naam instellen maar bijvoorbeeld ook een zin waardoor bezoekers van je site worden getrigerd om een chat te starten, zoals: "Start chat, we helpen je graag!" - Titel en ondertitel
Zodra de chat wordt geopend door een bezoeker van je site staan bovenin het chat scherm een logo, titel en (optioneel) een ondertitel. De titel is dik gedrukt en kan worden gevuld met een korte zin, zoals "Welkom bij OBI4wan". De ondertitel wordt daar direct onder geplaatst en kan bijvoorbeeld een vraag bevatten; "Kan ik je ergens bij helpen?". - Kleur en logo
De kleur van het chat scherm wordt getoond als de chat nog is ingeklapt en als de chat opengeklapt is is het zichtbaar in de bovenste balk van het scherm. Het logo wordt linksboven in de hoek getoond zodra de chat is opengeklapt. Wil je meer aanpassen? Bekijk de geavanceerde aanpassingen.
Live chat implementeren op jouw website
Script implementeren
De chat-widget kan op verschillende manieren worden geïmplementeerd. Er zijn geen specifieke instructies, Spotler levert enkel het script. Het is aan jou om te bepalen waar je het script moet installeren om het operationeel te maken. Hieronder volgen enkele voorbeelden van wat je kunt doen.
- Direct in de HTML-code van je website
Dit script moet worden toegevoegd aan de HTML-code van de webpagina's waar je de livechat wilt weergeven. Dit wordt vaak gedaan in de <head> of <body>-sectie van de pagina. - Via een Content Management Systeem (CMS)
Als je een CMS zoals WordPress, Joomla of Drupal gebruikt, zijn er vaak speciale plug-ins of extensies beschikbaar voor livechat-services. Deze kunnen het installatieproces vereenvoudigen door de benodigde scripts in te sluiten zonder dat je rechtstreeks in de code hoeft te werken. - Via een Tag Management System (TMS)
Soms wordt het script voor de livechat geïmplementeerd via een Tag Management System zoals Google Tag Manager. Dit biedt een centrale locatie om verschillende scripts en tags te beheren en toe te voegen aan je website, zonder dat je de broncode van je site hoeft aan te passen.
Geavanceerde aanpassingen aan de widget
In Engage pas je enkel de hoofdkleur aan. Wil je een meer gepersonaliseerde widget? Vraag de webbouwer de onderstaande code te gebruiken om je widget aan te passen. Voeg deze toe aan het script van de widget.
use data-config="true":
<script id="obi-chat-launcher"
src="./obi-launcher.bundle.js"
data-guid="copy_paste_the_livechat_guid_here"
data-config="true"></script>
example color change:
const chat = OBI.chat({
widgetStyle: { color: "#489ad5", textColor: "#000" },
...
Live chat instellingen: beschikbaarheid
Bereken op basis van de openingstijden en agent beschikbaarheid
Met deze instelling wordt de volgende logica gehanteerd voor het wel/niet tonen van de Livechat widget op de website waar deze is geïmplementeerd. De agent dient actief te staan op 'online en beschikbaar voor livechat' te staan (het blauwe balletjes). Indien geen een agent beschikbaar is, zal de livechat niet beschikbaar zijn.
Let op! Deze instelling is niet van toepassing op een chat bot, alleen op een live chat.
Bereken enkel op basis van openingstijden
Op basis van de openingstijden zal de live chat te zien zijn op de website. Navigeer naar beneden bij Openingstijden om deze in te stellen.
Bereken enkel op basis van openingstijden en het aantal open/toegewezen berichten
Aan de hand van de chat claim instellingen kan je deze optie gebruiken om de live chat te verbergen, indien er maximum aantal is geclaimd. Bij Accounts > live chat > algemene instellingen > chat claim instellingen stel je het maximaal aantal in.
Live chat instellingen: technische instellingen
Je kunt de widget instellen buiten openingstijden bij onbeschikbaarheid agent(s) kiezen uit twee opties. 'De widget verbergen op de website' of 'gebruik e-mailformulier'. De eerste optie zal de live chat verbergen van de website, de tweede optie plaatst een e-mailformulier waarmee je informatie kunt uitvragen.
Ik zie alleen de gebruikersnaam in de widget, hoe kan ik dit wijzigen?
Kies bij 'Weergave naam in widget' voor 'Enkel voornaam' om alleen de voornaam weer te geven in de Livechat Widget.
Live chat instellingen: algemene chat instellingen
Bij maximaal aantal kan je instellen hoeveel chats een agent maximaal kan claimen. Als dit limiet wordt bereikt is er geen agent beschikbaar, en zal de widget van de website verdwijnen of zal het e-mailformulier tevoorschijn komen.
Let op! Vergeet niet om bij de instelling Chat beschikbaarheid de instelling te zetten op 'Bereken op basis van openingstijden en het aantal open / toegewezen berichten'.
Let op! Je dient multiclaiming te activeren in de betreffende stream om deze instelling te activeren (lees verder).
Live chat instellingen: Webcare stream instellingen
Je dient bij de stream instellingen bij algemene instellingen multiclaiming te activeren, zodat de claim instelling geactiveerd kan worden. Navigeer naar de instellingen en klik op het tandwieltje, activeer multiclaiming bij algemene instellingen. De weergave van de stream zal nu worden gesplitst in 'mijn conversaties' en 'open conversaties'.
Let op! Afhankelijk van je weergave van de widget op de webite, controleer de instellingen bij Chat beschikbaarheid en zet de instelling op 'Bereken op basis van openingstijden en het aantal open / toegewezen berichten'
Mogelijke oplossingen als de chat niet wordt getoond
✅ Controleer of de live chat niet handmatig uitgeschakeld is in de instellingen.
✅ Valt de huidige tijd binnen de openingstijden van de widget?
✅ Is er minimaal één agent 'online en beschikbaar voor livechat'? Dit heeft invloed op de weergave van de widget als de Chat beschikbaar instelling staat op 'Bereken op basis van openingstijden en beschikbaarheid op agent beschikbaarheid'.
✅ Heeft deze agent minder dan het maximaal aantal chats dat is ingesteld geclaimd?
✅ Zorg dat de laatste versie van de Engage livechat widgetcode op de website(s) staat
De juiste chatcode voor op de website en de juiste, unieke GUID zijn te vinden in de instellingen van het livechat account.
Problemen door CSP-beveiliging (Content Security Policy)
In de basis werkt onze chatwidget op elke website. Als je echter gebruikmaakt van Content Security Policy (CSP), is het mogelijk dat bepaalde onderdelen niet werken. Om het beveiligingsniveau te verlagen en de livechat weer normaal te laten functioneren, zijn aanpassingen vereist. We begrijpen echter dat deze aanpassingen niet altijd mogelijk zijn vanwege de veiligheidseisen die aan hun systemen zijn gesteld.
Basis oplossing
Het is bij het gebruik van CSP noodzakelijk om de volgende domeinen toe te laten. Het whitelisten van *.pusher.com, *amazonaws.com en *.obi4wan.com volstaat.
Geavanceerde oplossing
Voor een volledig werkende livechat moeten de volgende attributen worden toegestaan:
Verplicht
- script-src https://cloudstatic.obi4wan.com;
(Nodig voor het laden van de widget launcher.)
- connect-src https://cloudstatic.obi4wan.com;
(Nodig voor het laden van widget scripts, instellingen en agent beschikbaarheid.)
- connect-src https://chatapi.obi4wan.com;
(Nodig voor de authenticatie tegen Pusher.)
- connect-src wss://ws-eu.pusher.com;
(Nodig voor de verbinding met pusher, het realtime communicatiekanaal tussen agent en websitebezoeker.)
- img-src data:
(Nodig voor de afbeeldingen die wij gebruiken, zoals het chatballonnetje in de launcher knop, deze worden embedded geladen.)
- style-src 'unsafe-inline';
(De styling van de widget wordt embedded geladen en valt daarmee onder unsafe-inline.)
Optioneel
- connect-src https://obipubvideo.s3.eu-central-1.amazonaws.com;
(Nodig voor het uploaden van media, optioneel als je dat niet wenst te gebruiken.)
- img-src https://s3-eu-west-1.amazonaws.com
(Nodig voor het weergeven van agent avatars, optioneel als dit niet gewenst is en/of niet is ingesteld.)
- img-src https://obipubvideo.s3.eu-central-1.amazonaws.com
(Nodig voor het sturen van afbeeldingen vanuit de agent naar de widget.)
Als de bovenstaande stappen het probleem niet oplossen, kun je een kijkje nemen naar het domein van DigiD. Als je DigiD op je website gebruikt, hebben sommige klanten succes gehad door de DigiD-koppeling naar een ander domein te verplaatsen, waardoor de strikte veiligheidseisen niet langer van toepassing zijn. Het kan de moeite waard zijn om dit te bespreken met je webpaginaontwikkelaar en te zien of dit een haalbare oplossing is voor jouw situatie.