Webchat

Met de webchat zet je je assistent als chatvenster op je eigen website. Bezoekers stellen hun vraag of vragen een afspraak aan zonder te bellen, en je team kan op elk moment meelezen of overnemen. Dit artikel beschrijft hoe je de webchat inschakelt, vormgeeft en insluit, en hoe je hem via JavaScript aanstuurt.

Inschakelen

Je hebt hiervoor de rol Bewerker of Beheerder nodig, en een actief abonnement. De webchat zit in elk abonnement. Stopt je abonnement, dan verschijnt de widget niet meer op je website.

1. Open Assistenten, kies de assistent en ga naar het tabblad Kanalen.
2. Open de regel Webchat en zet Webchat inschakelen aan. Zonder actief abonnement gaat de schakelaar niet aan en zie je waar je er een kiest.
3. Bekijk Naam in openbare link. Er staat al een naam, die je mag aanpassen: kleine letters, cijfers en streepjes (bijvoorbeeld devries-loodgieters). De naam moet uniek zijn binnen Yarla; anders zie je "Die chatlink is al in gebruik". Hij komt terug in de URL van de chatpagina en in de code voor je website.
4. Je hoeft niets op te slaan. Tekst wordt opgeslagen zodra je het veld verlaat; schakelaars, keuzelijsten en vinkjes meteen. Onderaan de regel vind je Code voor je website en de link Kant-en-klare chatpagina.

Uiterlijk

In dezelfde regel pas je de widget aan je huisstijl aan.

Instelling	Betekenis	Standaard
Kleur	De hoofdkleur van de widget: de startknop, de koptekst, de verzendknop en de berichten van de bezoeker.	Paars (#8237f0)
Positie	Aan welke kant de startknop onderin staat: Rechts of Links.	Rechts
Titel	De tekst in de koptekst van het chatvenster. Leeg betekent de naam van je bedrijf, en die volgt een naamswijziging vanzelf.	Leeg
Eerste bericht in de chat	Het eerste bericht dat de bezoeker ziet zodra het venster opent. Leeg = de begroeting van je assistent, en is die ook leeg, een standaardzin.	Leeg
Placeholder invoerveld	De grijze hulptekst in het typveld, bijvoorbeeld "Stel je vraag…". Leeg = een standaardtekst in de taal van je assistent, zoals "Typ je bericht...".	Leeg
Voettekst	Een korte regel onder het typveld, bijvoorbeeld "Antwoorden worden gegenereerd door AI". Leeg = geen regel.	Leeg
Knoptekst	De tekst op de startknop, bijvoorbeeld "Vraag het ons". Leeg = een standaardwoord in de taal van je assistent, meestal "Chat".	Leeg

Wijzigingen gelden op je website zodra een bezoeker de pagina opnieuw laadt; je hoeft de code niet opnieuw te plaatsen. Alleen als je Naam in openbare link wijzigt, moet dat wel: de oude naam werkt dan niet meer, ook niet in links naar de chatpagina.

Wie antwoordt en overdracht

Instelling	Betekenis	Standaard
Wie antwoordt	De assistent: de assistent beantwoordt alle gesprekken en draagt alleen over als de bezoeker aandringt op een mens. Het team: het eerste bericht gaat rechtstreeks naar de Inbox, de bezoeker krijgt een korte bevestiging en je team antwoordt zelf; de assistent doet niets. Voorwaardelijk: de assistent antwoordt en draagt over zodra de voorwaarde hieronder geldt of de bezoeker aandringt op een mens.	De assistent
Overdrachtsvoorwaarde	In gewone taal wanneer de assistent moet overdragen, bijvoorbeeld "Als de bezoeker een offerte boven € 5.000 wil of om een medewerker vraagt". Alleen zichtbaar bij Voorwaardelijk. Ga je daarna terug naar De assistent, dan blijft een ingevulde voorwaarde gelden; maak hem dus eerst leeg.	Leeg
Time-out bij inactiviteit (minuten)	Een getal van 5 tot 1.440. Na zoveel minuten zonder bericht sluit de chat en lopen de acties na het gesprek (bijvoorbeeld een e-mail, sms of webhook). Hij sluit eerder als de klant afscheid neemt en de assistent het gesprek afrondt, of als je hem in de Inbox beëindigt. Wacht de klant op je team, dan blijft de chat open tot iemand antwoordt of hem beëindigt, ook in het weekend; daarna sluit hij na 18 uur stilte. Een gesloten chat gaat niet verder: de bezoeker begint een nieuwe.	60
Toegestane websites	Lijst met websites waarop de widget mag laden, met https:// ervoor, bijvoorbeeld https://www.voorbeeld.nl. Maximaal 200. Het adres moet precies kloppen: met en zonder www en elk subdomein zijn aparte regels. Op andere sites blijft de widget onzichtbaar. Leeg = de widget laadt overal. Zet je de chat aan terwijl deze lijst leeg is, dan vullen we je website uit Instellingen → Bedrijf in, met en zonder www. Daarna is de lijst van jou.	Leeg

Een gesprek kan ook eerder sluiten: de assistent sluit het na een afscheid (na een bedankje vraagt hij eerst of hij nog ergens anders mee kan helpen), en je team kan het beëindigen. Is een gesprek gesloten, dan kan de bezoeker daarin niet meer typen. Op de chatpagina verschijnt dan de knop Nieuw gesprek starten. De widget op je website heeft die knop niet en blijft in die browser bij het gesloten gesprek; een nieuw gesprek start je daar met startNewConversation() (zie JavaScript-SDK).

Websites beperken

Vul altijd je eigen website(s) in bij Toegestane websites. Zo kan niemand je code kopiëren en je assistent op een andere website laten draaien, waar de antwoorden wél meetellen in je verbruik.

Insluiten op je website

Kopieer de regel onder Code voor je website en plaats hem in de HTML van je website, vlak vóór de afsluitende </body>-tag. Je naam en de adressen staan daarin al goed. De regel ziet er zo uit:

<script src="https://<dashboard-domain>/widget.js" data-slug="<slug>" data-api="https://<chat-api>" async></script>

data-api is de chat-API uit het dashboard, niet de dashboard-API. Een eerder gekopieerd fragment dat nog naar de dashboard-API wijst, werkt niet meer. Kopieer het fragment opnieuw.

Door async laadt de widget op de achtergrond en vertraagt hij je pagina niet.

Hoe je die regel plaatst, hangt af van je websitesysteem:

• WordPress: gebruik een plug-in voor kop- en voettekstscripts (zoek in de plug-inbibliotheek op "header footer scripts") en plak de code in het veld voor de voettekst (footer). Of voeg hem toe aan footer.php van je (child-)thema.
• Webflow: ga naar Project settings → Custom code en plak de code onder Footer code. Publiceer de site opnieuw.
• Squarespace: ga naar Settings → Advanced → Code injection en plak de code in het veld Footer.
• Andere systemen: zoek in de instellingen naar "custom code", "scripts" of "tracking code" voor de footer. Lukt het niet, stuur de regel dan naar je webbouwer.

Antwoorden van je team en een strikt beveiligingsbeleid

Ligt een chat bij je team, dan controleert de widget elke 5 seconden of er een nieuw bericht is. Blijft het stil, dan loopt dat op tot eens per 30 seconden, en het pauzeert als het tabblad op de achtergrond staat. De bezoeker ziet je antwoord dus meestal binnen 5 tot 30 seconden. Waar een live WebSocket-verbinding met Yarla beschikbaar is, verschijnt het antwoord vrijwel direct. De widget opent die verbinding zelf; je hoeft niets in te stellen. De widget let hierop zodra hij weet dat het gesprek bij je team ligt. Neem je een gesprek over terwijl de bezoeker niets doet, dan verschijnt je antwoord pas als de bezoeker iets stuurt, het venster opent of de pagina opnieuw laadt.

Stuurt je website een strikte Content-Security-Policy-header mee, voeg dan het adres voor live updates toe aan connect-src, naast het adres van de chat-API:

connect-src https://<chat-api> wss://*.execute-api.eu-central-1.amazonaws.com

Sta ook https://<dashboard-domain> toe in script-src en inline stijlen ('unsafe-inline') in style-src: daar komt het script vandaan, en de widget voegt een eigen stijlblok toe aan je pagina.

Zonder het wss://-adres werkt de chat gewoon door. De widget blijft dan controleren op nieuwe berichten zoals hierboven beschreven. Het beveiligingsbeleid van je website geldt niet voor de chatpagina.

Kant-en-klare chatpagina

Wil je de chat aanbieden zonder iets op je website te plaatsen, gebruik dan de link Kant-en-klare chatpagina:

https://<dashboard-domain>/nl/chat/<slug>

Vervang /nl/ door /en/ of /es/ voor Engelse of Spaanse knoppen en meldingen op de pagina; de assistent zelf antwoordt zoals je hem hebt ingesteld. De pagina toont je titel, de naam van je assistent en het chatvenster, in je kleur. Handig als link in je e-mailhandtekening, op social media of als QR-code op je bus en offertes.

JavaScript-SDK

Zodra het script geladen is, staat het object window.YarlaChat op je pagina. Daarmee stuur je de widget vanuit je eigen code aan, bijvoorbeeld om hem te openen bij een klik op je eigen knop "Stel een vraag".

Methode	Wat hij doet
open()	Opent het chatvenster.
close()	Sluit het chatvenster (de startknop blijft zichtbaar).
toggle()	Opent het venster als het gesloten is en andersom.
show()	Toont de widget weer na hide().
hide()	Verbergt de hele widget: de startknop en het chatvenster.
startNewConversation()	Begint een nieuw, leeg gesprek in deze browser. Het vorige gesprek blijft in je Inbox staan.
setContext(object)	Geeft context aan de assistent, zie hieronder.

Na het laden haalt de widget eerst zijn instellingen op. Tot die tijd doen open(), close(), toggle(), show() en hide() nog niets. Wil je de widget op een pagina nooit tonen, bijvoorbeeld een betaalpagina, zet de code dan niet op die pagina.

Context meegeven

Met setContext() geef je de assistent informatie over de situatie van de bezoeker: op welke pagina hij is, welk product hij bekijkt of, als hij is ingelogd, zijn voornaam. De assistent gebruikt dit om gerichter te antwoorden ("Ik zie dat je de pagina over cv-onderhoud bekijkt…"). De context gaat mee met de volgende berichten van de bezoeker. Houd rekening met het volgende:

• Het object mag maximaal 8 KiB groot zijn. Is het groter, dan geeft de aanroep een fout en blijft de vorige context staan.
• Elke aanroep vervangt de vorige context volledig.
• De context wordt als onbetrouwbare invoer behandeld: de assistent leest hem als informatie, niet als instructie.
• Zet er nooit wachtwoorden, tokens, klantnummers of andere gevoelige gegevens in. Alles wat je meegeeft, kan de bezoeker zelf inzien.

Voorbeeld

Omdat de widget asynchroon laadt, bestaat window.YarlaChat pas zodra het script is uitgevoerd. Wacht daarom op de load-gebeurtenis van de pagina; bestaat het object al, dan kun je meteen beginnen.

function setupChat() {
  window.YarlaChat.setContext({
    page: document.title,
    url: window.location.pathname,
    product: 'Onderhoudsabonnement cv-ketel',
    firstName: 'Sanne' // alleen als de bezoeker is ingelogd
  });

  document.querySelector('#vraag-knop').addEventListener('click', function () {
    window.YarlaChat.open();
  });
}

if (window.YarlaChat) {
  setupChat();
} else {
  window.addEventListener('load', setupChat);
}

Grenzen

Zodat niemand je chat met een script kan laten vollopen, heeft de chat grenzen. Eén chat neemt 60 berichten per uur aan en één netwerk 300. Je assistent geeft hooguit 1.000 antwoorden per uur en 5.000 per dag over alle chats op je website samen; een drukke site blijft daar ver onder. Daarboven zien bezoekers een melding om het later opnieuw te proberen, of morgen bij de daggrens.

Privacy en AVG

Wat wij opslaan van een webchatgesprek:

• de berichten van de bezoeker en de antwoorden van de assistent of je team;
• de contactgegevens die de bezoeker zelf in het gesprek geeft, bijvoorbeeld naam, e-mail of telefoon;
• de context die je website via setContext() meegeeft.

De widget en de chatpagina bewaren in de browser van de bezoeker een willekeurig sessienummer (localStorage), zodat het gesprek doorloopt op een volgende pagina.

Het IP-adres van de bezoeker wordt niet bij het gesprek opgeslagen. Het staat wel in de technische toegangslogboeken van de chat, maximaal 90 dagen. Hoe lang gesprekken bewaard blijven, stel je in bij Gesprekken bewaren (dagen) onder Instellingen → Bedrijf: 7 tot 3.650 dagen, standaard 365. Alleen een Beheerder kan dit wijzigen. Daarna worden ze automatisch verwijderd.

Omdat wij namens jou persoonsgegevens verwerken, hoort de webchat in de privacyverklaring van je website. Je kunt de onderstaande alinea als basis gebruiken en aanpassen aan je situatie:

Chat op onze website
Op onze website kun je chatten met onze digitale assistent. De berichten die je
stuurt en de contactgegevens die je doorgeeft, worden verwerkt door Yarla,
dat als verwerker namens ons optreedt. De antwoorden in de chat worden gegenereerd
door kunstmatige intelligentie; een medewerker kan het gesprek op elk moment
overnemen. Wij bewaren chatgesprekken maximaal [bewaartermijn] en gebruiken ze
uitsluitend om je vraag te beantwoorden en onze dienstverlening te verbeteren.
Je IP-adres wordt niet bij het gesprek opgeslagen en staat maximaal 90 dagen in
technische logboeken. Je hebt recht op inzage, correctie en verwijdering van je
gegevens; neem daarvoor contact op via [e-mailadres].

Gerelateerde artikelen

• WhatsApp
• Inbox en analyse
• Technische instellingen
• Problemen oplossen: WhatsApp en webchat