De widget installeren

De scripttag#

Open Implementeren bij je agent en kopieer de snippet onder Chatwidget. Hij ziet er zo uit, met je eigen adres en agent-id ingevuld:

<script src="https://YOUR-ADDRESS/w.js" data-agent="YOUR-AGENT-ID" async></script>

Plak hem vlak voor </body> op elke pagina waar de chat moet verschijnen. In de meeste websitebouwers is dat een vak voor "aangepaste code" of "footercode": staat hij daar, dan staat hij op elke pagina.

Meer is het niet. Onder in de hoek verschijnt een chatknop, en een klik erop opent het gesprek.

Wat de widget met je pagina doet#

• Hij is licht. Het script tekent de knop en verder niets. De chat zelf wordt pas geladen wanneer een bezoeker hem voor het eerst opent, dus je pagina wordt er vrijwel niet trager van.
• Hij staat op zichzelf. Knop en paneel zitten in een afgesloten deel van de pagina (een shadow root). Je stylesheet kan de widget niet stukmaken, en de widget kan niet aan je pagina komen.
• Hij ligt over je pagina heen, vast in de hoek onderaan, boven andere elementen. Op een telefoon neemt het paneel bijna het hele scherm in.
• Hij houdt rekening met de bezoeker. De Escape-toets sluit hem, en animaties staan uit voor bezoekers die op hun apparaat minder beweging hebben ingesteld.
• De tag per ongeluk twee keer opnemen kan geen kwaad. De tweede merkt de eerste op en stopt.

De pagina waarop de bezoeker is#

Bezoekers vragen vaak naar wat ze voor zich zien: "is deze geschikt voor buiten?" op de pagina van een product. Daarom vertelt het script de agent, telkens als een bezoeker op het punt staat iets te vragen, het adres van de pagina waarop die is. Heeft de agent die pagina als websitebron gelezen, dan antwoordt hij eerst vanuit die pagina. Hoe een antwoord tot stand komt.

• Alleen het adres. Niet het deel na ? of #, waar bestelnummers en resetlinks staan, en niet de titel of iets anders op de pagina.
• Een pagina die de agent niet kent wordt bewaard met haar adres, waarin alles wat op een nummer, een code of een e-mailadres lijkt vervangen is door :id. Zo'n adres staat in Activiteit, maar niet als link, want het leidt nergens heen. Een naam in een adres, zoals /team/jan-jansen, is niet te onderscheiden van die van een product en blijft staan.
• Het werkt ook op sites die van pagina wisselen zonder te herladen, want het adres wordt gevraagd op het moment van de vraag.
• Het iframe-snippet hieronder kan dit niet. Dat heeft geen script op je pagina om het te vragen.

Je ziet de pagina bij elke vraag in Activiteit, en je probeert het uit in de Testomgeving.

Opties op de tag#

Al het andere (kleuren, logo, teksten, pictogram) stel je één keer in onder Uiterlijk, en dat geldt dan overal. Een wijziging daar kan er tot vijf minuten over doen om de knop van een bezoeker te bereiken, omdat browsers de instellingen zo lang bewaren.

Het alternatief: een iframe#

Onder Inline iframe staat een tweede snippet. Die plaatst het gesprek in je pagina, als een blok van 384 bij 560 pixels, zonder knop. Gebruik hem voor een aparte help- of contactpagina. De rest van deze pagina geldt er ook voor, behalve dat hij de agent niet kan vertellen op welke pagina de bezoeker is.

Wat er in de browser van de bezoeker wordt bewaard#

De widget plaatst geen cookies, en bewaart zonder de toestemming van je site niets tot de bezoeker een bericht of bestand verstuurt. Dan bewaart hij twee kleine waarden in de eigen opslag van de browser:

Geen van beide zegt iets over de persoon. Blokkeert een browser deze opslag, dan werkt de chat toch. Alleen het geheugen tussen pagina's gaat dan verloren.

Op een site die de toestemming van de bezoeker doorgeeft, en alleen zolang de begroeting of het tweede bericht aan staat, bewaart de knop voor de duur van het bezoek nog één waarde, al voordat de bezoeker de chat gebruikte: wanneer het bezoek begon, hoeveel pagina's bekeken zijn en welk bericht getoond is.

Een bezoeker die de volgende dag terugkomt, begint een nieuw gesprek. Dat is bewust zo: aan een draad die wekenlang doorgroeit, heeft niemand iets. De knop Opnieuw beginnen in de kop van de chat doet hetzelfde, maar dan meteen. Hij maakt het scherm van de bezoeker leeg en verder niets: het gesprek blijft in je Activiteit staan.

Limieten die je beschermen#

• Een bezoeker kan 20 berichten per 60 seconden sturen. Daarboven zegt de chat dat en vraagt hij even te wachten. Geen mens typt zo snel, en het voorkomt dat een script je credits opmaakt.
• Een bericht mag 4.000 tekens lang zijn.
• Alleen de sites die je opgeeft, mogen je agent tonen. Stel dit in: Toegestane domeinen.

Als je site een Content Security Policy heeft#

De meeste sites hebben er geen, en dan hoef je niets te doen. Stuurt jouw site een Content-Security-Policy-header mee, sta het adres uit je snippet dan op vier plaatsen toe: script-src (het script), frame-src (de chat), connect-src (de instellingen van de knop) en img-src (de afbeelding op je knop, als je die gebruikt). De opmaak van de knop zelf is een style-element dat het script toevoegt. Met een style-src zonder 'unsafe-inline' blijft de knop dus zonder opmaak.

Als de knop niet verschijnt#

Zie Problemen oplossen.