live chat op je website zonder dat hij trager wordt

27 september 2026 · door kuba · 9 min lezen

Een live chat hoort je pagina bijna niets te kosten tot een bezoeker echt wil praten. Deze gids laat zien wat een chatwidget laadt voor de eerste klik, waar je op let voordat je er een kiest, hoe je Spookat in een paar minuten installeert en hoe je in DevTools aantoont dat je pagina snel is gebleven.

wat een chatwidget kost voordat iemand klikt

De meeste bezoekers openen de chat nooit. Ze lezen, scrollen, kopen misschien iets en gaan weer. Alles wat de widget bij het laden van de pagina meeneemt, betaalt ieder van hen toch, ook wie een goedkope telefoon met slecht bereik heeft.

Die kosten bestaan uit vier delen:

Bytes. JavaScript, CSS, fonts, afbeeldingen en vaak een iframe met een eigen document. JavaScript is het dure deel: de browser downloadt het, parset het en voert het uit op de main thread, dezelfde thread die scrollen en tikken afhandelt.
Requests. Elk request is een retourtje, en requests naar nieuwe domeinen betalen daarbovenop een DNS-lookup en een TLS-handshake. Een widget die bij het laden naar huis belt, zet dat bij elke paginaweergave.
Opslag. Cookies, localStorage en IndexedDB die geschreven worden voor enige interactie. In de EU kan dat bepalen of je toestemming nodig hebt voordat de widget überhaupt laadt.
Tijd op de main thread. Code die bij het opstarten draait, concurreert met je eigen code. Lighthouse meldt het als Total Blocking Time, en je ziet het terug in je score.

De vier widgets op onze vergelijkingspagina’s laadden tussen 220 en 509 kb gzipped voordat iemand klikte. Dat hebben we op 2026-09-26 gemeten door elke widget op een lege testpagina te laden en de overgedragen bytes op te tellen; de cijfers en bronnen staan op /vs. Ter vergelijking: de tekst van dit hele artikel is kleiner dan 20 kb.

Niets daarvan is nodig om een knop te tonen. Een knop is een paar honderd bytes HTML en CSS. Al het andere (het chatpaneel, de verbinding met een server, de geschiedenis) is pas nodig nadat iemand klikt.

Je kunt elke chatwidget beoordelen met een browser en tien minuten. Dit is waar je naar kijkt, op volgorde van hoeveel het je bezoekers raakt.

gewicht voor de klik

Open de demopagina van de leverancier of je eigen stagingsite, open DevTools en herlaad met de cache uitgeschakeld. Filter het Network-tabblad op de domeinen van de leverancier en tel de overgedragen grootte op. Alles boven een paar kilobyte voor een klik is code die je bezoekers downloaden voor een paneel dat de meesten nooit openen.

requests voor de klik, en naar wie

Tel de requests en noteer de domeinen. Een widget die bij het laden met zijn API praat, stuurt iets over elke bezoeker door, op zijn minst dat die bestaat en op welke pagina die zit. Sommige laden ook analytics of error tracking van derden.

cookies en opslag voor de klik

Kijk na een verse laadbeurt in het Application-tabblad, zonder de widget aan te raken. Cookies van de domeinen van de widget, of opslagkeys die hij schreef, zijn de cookies die een consentbanner misschien moet afdekken. Wij zijn je advocaat niet en de regels verschillen per land, dus vraag die van jou wat voor je site geldt. Het makkelijkst uit te leggen is een widget die niets opslaat tot de bezoeker een chat begint.

waar je team antwoordt

Een chat is zo goed als het antwoord. Als antwoorden betekent dat je nog een dashboard opent, moet iemand dat tabblad de hele dag open houden. Als de chats binnenkomen waar je team al praat (Slack, Discord), is een antwoord één bericht in een thread.

wat het kost als het team groeit

Prijzen per seat rekenen elke persoon die zou kunnen antwoorden. Prijzen per resolutie rekenen elk antwoord. Prijzen per site rekenen de site, wie er ook antwoordt en hoe vaak.

de telefoon

Controleer de launcher op een scherm van 375 px breed. Hij mag je eigen knoppen niet bedekken en moet minstens 44 px zijn, zodat een duim hem raakt. Open het paneel en typ: het toetsenbord mag het invoerveld niet verbergen.

stap voor stap: live chat met spookat

Spookat is gebouwd rond de checks hierboven. De snippet laadt één kleine launcher van ons CDN, met de look van je site er al in. Hij doet 0 requests naar onze API voor een klik en zet geen cookies. Je team antwoordt in een Slack-thread of een Discord-forumpost. Het kost € 4,99 per maand per site op broke af, met onbeperkt teamleden, en de proefperiode is 14 dagen zonder kaart.

1. haal je snippet op

Log in op het dashboard en voeg je site toe. De installatiepagina toont je snippet met je sitekey er al in en een kopieerknop. Je kunt hem direct openen met je domein in het adres:

https://app.spookat.com/install?domain=your-domain.com

2. plak hem voor de afsluitende body-tag

Eén tag, ergens op de pagina, het liefst vlak voor </body>:

<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

async betekent dat de browser je pagina blijft renderen terwijl hij het bestand ophaalt, en het uitvoert zodra het binnen is. Het bestand is de launcher: een knop, de styles ervan en de look die je in het dashboard hebt gepubliceerd. Zijn build faalt als hij boven 4 kb gzipped groeit. Op 2026-09-27 was hij 2,0 kb.

Is je site een single-page app, zet de tag dan in de root-HTML-template, niet in een component die opnieuw rendert. De launcher controleert of hij al bestaat, dus een tweede kopie doet niets, maar één tag op één plek is makkelijker te overzien.

3. kies een look

Er zijn 8 styles en 12 zelf gehoste fonts, plus het systeemfont van de bezoeker. Kies ze in het dashboard en publiceer; de launcher pakt de nieuwe look binnen een minuut op. Of stel hem in op de pagina, boven de snippet, waar hij voorgaat op het dashboard:

<script>
  window.Spookat = { style: "clean", font: "system", accent: "#2F6FEB", side: "right" };
</script>
<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

font: "system" downloadt helemaal geen font. Elk ander font komt van ons CDN, pas na de klik, nooit van Google. accent neemt een hexkleur, en de tekstkleur daarop wordt gekozen op contrast. De volledige lijst met keys staat in de docs.

4. koppel slack of discord

Koppel in het dashboard een kanaal. Je keurt de koppeling goed in Slack of Discord zelf en kiest daarna het kanaal uit een lijst. Geen admin van de workspace? Het dashboard geeft je een eenmalige link voor wie dat wel is, 7 dagen geldig, en die persoon heeft geen Spookat-account nodig.

Vanaf dan is elk gesprek een thread in Slack of een forumpost in Discord.

5. antwoord vanuit de thread

Antwoord in de thread en de bezoeker ziet het in de widget. Een bericht dat begint met // blijft intern, dus je kunt een collega iets vragen zonder dat de bezoeker meeleest. Bezoekers zien je voornaam uit Slack of je Discord-nickname; /spookat me laat die zien of past hem aan, per site.

Is de bezoeker weg voordat je antwoordde en heeft die een e-mailadres achtergelaten, dan sturen cool guy en hoger het antwoord per e-mail, in de taal van de widget. Op broke af wacht het antwoord in de widget tot het volgende bezoek.

of: laat je agent alles doen

Bouw je met Claude Code, Cursor of een andere coding agent, plak dan dit en laat hem de handleiding lezen:

Add Spookat chat to my site. Read https://spookat.com/llms.txt first, then match the chat style to my site.

De agent vindt je root-template, voegt de snippet toe en kiest een style die bij je site past. Slack of Discord koppelen en betalen blijven bij jou: een mens keurt allebei goed.

controleer het in devtools

Geloof geen enkele leverancier op zijn woord, ons ook niet. Zo controleer je je eigen pagina in Chrome. Firefox en Safari hebben dezelfde panelen onder iets andere namen.

het network-tabblad, voor de klik

Open je pagina in een privévenster, zodat er geen oude opslag of cache meespeelt.
Open DevTools, ga naar Network, vink “Disable cache” aan en herlaad.
Typ spookat in het filterveld.

Je zou één request moeten zien: de launcher van cdn.spookat.com, ongeveer 2 kb overgedragen. Er gaat niets naar api.spookat.com. Zie je meer, dan heeft iets anders op de pagina hem geladen (bijvoorbeeld een tweede snippet in een tag manager).

het application-tabblad, voor de klik

Open Application, dan Cookies en Local storage voor je domein. Spookat schrijft hier niets bij het laden van de pagina. Het zet helemaal geen cookies, nooit. De ene opslagkey die het gebruikt, spookat: gevolgd door je sitekey, wordt pas geschreven nadat de bezoeker een eerste bericht stuurt: die houdt de chat op dat apparaat vast.

na de klik

Leeg het Network-log en klik op de launcher. Nu laadt het paneel van het CDN: het script (16,6 kb gzipped op 2026-09-27) en de stylesheet van je style (ongeveer 2 kb). Een font komt mee als je er een koos. Daarna opent het paneel een verbinding met onze API en kan de bezoeker typen.

Dat is de hele truc: het dure deel verhuist naar achter de klik, en alleen bezoekers die willen chatten downloaden het.

lighthouse

Draai Lighthouse in mobiele modus op de pagina zonder de snippet en met, een paar keer elk, en vergelijk de medianen. Losse runs schommelen op dezelfde pagina meerdere punten, dus één run bewijst in geen enkele richting iets. Met een launcher van 2 kb en geen werk voor de klik hoort het verschil binnen die ruis te vallen.

Een kleine launcher blijft alleen klein als de pagina eromheen dat toelaat. Dit zijn de fouten die we het vaakst zien, en elk ervan maakt het werk hierboven ongemerkt ongedaan.

De chat vanzelf openen. Een paneel dat na tien seconden openspringt, laadt de hele chat voor elke bezoeker, ook voor wie net wilde kopen. Op een telefoon bedekt het bovendien de pagina. Wil je het gesprek beginnen, schrijf dan een begroeting; die verschijnt als ze de chat openen.

Het paneel vooraf laden “zodat het sneller is”. Een <link rel="preload"> of prefetch voor het paneelscript zet de download weer voor de klik, voor iedereen. Na de klik zijn het twee korte requests naar een CDN dicht bij de bezoeker. Laat ze op de klik wachten.

Hem in een tag manager stoppen. Een tag manager is een script dat andere scripts laadt. Bestaat hij alleen om de chatsnippet te bevatten, dan kost hij meer dan de chat zelf. Zet de tag direct in je template.

Twee snippets. Een thema voegt er een toe, een plugin nog een, iemand plakt een derde in de footer. De launcher negeert zijn eigen duplicaten, maar andere widgets vaak niet, en dan heb je twee chats die om dezelfde hoek vechten. Zoek in je templates naar cdn.spookat.com (of het domein van je vorige leverancier) en houd er één over.

wat er met de data gebeurt

Als een bezoeker een bericht stuurt, wordt het eerst opgeslagen en daarna in je Slack-thread of Discord-post gezet. We slaan nooit een IP-adres op. Het land van de bezoeker wordt op het moment van het bericht opgezocht in een offline database, en het adres wordt niet bewaard. Chatgeschiedenis blijft 30 dagen bewaard op broke af, 90 op cool guy en 365 op vc money, en wordt daarna verwijderd. De details, inclusief de subverwerkers, staan op de privacypagina.

een checklist om te hergebruiken

Voor elke chatwidget, niet alleen de onze:

De snippet laadt met async of defer en blokkeert het renderen niet.
Voor een klik: een paar kilobyte, één request, geen requests naar de API van de leverancier.
Geen cookies en geen opslag voordat de bezoeker een chat begint.
De launcher bedekt je eigen knoppen niet op een scherm van 375 px.
Het paneel en zijn fonts laden pas na de klik.
Je team antwoordt waar het al werkt, zonder nog een tabblad om op te passen.
De prijs straft je niet af voor een extra teamlid.
Je hebt het zelf gemeten, met de cache uit, in een privévenster.

Probeer het op je eigen site: de proefperiode is 14 dagen en vraagt geen kaart.