Een van onze opdrachtgevers heeft een chatwidget geïntegreerd op hun website. Als gebruiker kun je in de widget vragen stellen over diverse diensten. Die vragen worden vervolgens door een chatbot op een generieke manier beantwoord met basisinformatie, zoals bijvoorbeeld ook een FAQ-sectie zou doen. Door de conversatie-opzet werkt een chatbot erg goed in vergelijking met een FAQ omdat de informatie meer to-the-point is en makkelijker toegankelijk is voor gebruikers. Omdat het bouwen van een ‘alwetende chatbot’ onmogelijk is, is er ook de mogelijkheid om over te schakelen naar een live chat met medewerkers van de backoffice om alle vragen te beantwoorden waar de bot geen of geen duidelijk antwoord op heeft.

Onze opdrachtgever vroeg ons om hun chatfunctionaliteit opnieuw te implementeren, maar niet op de gebruikelijke standaard manier. Ze wilden de chat implementeren in een van de pagina headers en volledig gerestyled naar de nieuwe huisstijl. De chat moet aanvankelijk ook verborgen zijn en moet worden geanimeerd wanneer de gebruiker een vraag begint te typen in het invoerveld ‘stel hier uw vraag’. 

LiveChat en Chatbot configuratie

De originele widget integratie is vervangen door een custom integratie van het LiveChat-platform, dat een chatbot bevat die op het ChatBot-platform is gemaakt. In de LiveChat beheeromgeving kun je nieuwe chatbots aanmaken of linken naar bestaande chatbots op het ChatBot platform. Je kunt de routering zo configureren dat alle inkomende chats eerst door de chatbot worden afgehandeld in plaats van door een backoffice medewerker of omgekeerd. Je kunt dan een chatbot samen met één of meerdere backoffice medewerkers toevoegen aan een groep. De uiteindelijke chat integratie kan vervolgens met deze groep worden verbonden. Verschillende delen van een platform kunnen naar verschillende groepen worden gerouteerd en dus naar verschillende chatbots of backoffice medewerkers.

Als je je moedig voelt

Om de aangepaste chat functionaliteit te implementeren, gebruikten we de CustomerSDK van LiveChat. De LiveChat CustomerSDK is een set van tools om een aangepaste chat widget te bouwen. Hiermee kun je rechtstreeks vanuit de browser communiceren met de LiveChat-services met behulp van JavaScript en websocket-technologie en zonder dat je per se een backend nodig hebt. In de documentatie staat: "Als je een volledig aanpasbare oplossing nodig hebt en je voelt je moedig, duik dan in LiveChat CustomerSDK". Gelukkig houden we bij Twentyseven wel van een uitdaging. Hoewel de SDK uitgebreide documentatie heeft, ontbreken er specifieke implementatie voorbeelden. Gelukkig bieden ze hun eigen LiveChat functionaliteit om je te helpen als je vastloopt. Dat bleek een prima oplossing.

Vue, JavaScript promises en websockets

Om de aangepaste chatfunctionaliteit te implementeren en herbruikbaar te maken, hebben we ervoor gekozen om het op te zetten als Vue-component, aangezien het ecosysteem van het platform is gebaseerd op het Vue front-end framework waar we binnen Twentyseven veel mee werken. De SDK-methodes zijn gebaseerd op asynchrone promises, de websocket-technologie binnen de SDK vuurt events af die we vervolgens afhandelen. Perfect voor het Vue framework omdat we variabelen reactief kunnen definiëren en instellen, waarna de presentatielaag automatisch wordt bijgewerkt.

In een notendop

De aangepaste implementatie van het chat component volgt de volgende programma flow: Er wordt een websocket verbinding met het livechat platform tot stand gebracht en wanneer deze succesvol is verbonden wordt de huidige chat status opgehaald. Op basis van de geretourneerde status start er een nieuwe chat als er nog niet eerder verbinding is gemaakt, of wordt de huidige chat opnieuw geactiveerd. Actieve chats worden gedeactiveerd wanneer ze tien minuten inactief zijn, maar ze blijven bestaan. 

In ons geval wordt een chat alleen gestart of opnieuw geactiveerd wanneer de eindgebruiker de focus op een invoerveld plaatst. Het daadwerkelijke starten of activeren van de chat is zodoende ondergebracht in een asynchrone methode die aangesproken wordt wanneer dat nodig is. Na het ontvangen van bevestiging van de server dat de chat is geactiveerd, begint het component te luisteren naar events. Events zoals ‘verbroken verbinding’, ‘agent toegevoegd’, ‘chat overgedragen’ enzovoort moeten de code, de functionaliteit en de presentatielaag bijwerken. Ze hebben allemaal overeenkomstige methodes en functies die de geactiveerde events afhandelen en het component bijwerken.

Ook een aangepaste (live) chat-implementatie nodig?

Mocht je geïnteresseerd zijn of meer willen weten over een volledig geïntegreerde chat implementatie of binnen je huidige of nieuwe platform. We helpen je graag verder bij Twentyseven! Neem gerust contact met ons op, de koffie staat klaar!