live chat op een site in pure html

30 september 2026 · door kuba · 7 min lezen

Een site in pure HTML heeft precies één regel nodig voor live chat: een script-tag voor </body>. Deze gids laat zien waar die regel komt op met de hand geschreven pagina’s en op sites uit een static site generator, welke opties je ernaast kunt zetten en hoe je in de browser controleert dat er voor een klik niets laadt.

de regel

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

Je sitekey staat op de installatiepagina van het dashboard, al ingevuld in de snippet, met een kopieerknop. Hij begint met site_live_ en is openbaar: hij staat toch al in de broncode van je pagina, en hij werkt alleen op het domein dat je hebt geregistreerd.

Het bestand dat hij laadt is de launcher: een knop, de styles ervan en de look die je in het dashboard hebt gepubliceerd. Het is kleiner dan 4 kb gzipped (daarboven faalt de build). Het doet 0 requests naar onze API en zet geen cookies. Het chatpaneel en de verbinding met onze server laden pas als een bezoeker klikt.

Nieuw met dit onderwerp? De basisgids legt uit wat een chatwidget een pagina kost en waar je op let.

waar hij komt

Vlak voor de afsluitende </body>-tag:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My site</title>
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>
    <h1>Hello</h1>
    <p>Everything else on your page.</p>

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

Waarom daar, en waarom async:

Aan het eind van de body houdt de tag niets erboven op. De browser heeft je content al gezien als hij bij de tag aankomt.
async vertelt de browser het bestand op de achtergrond op te halen en uit te voeren zodra het binnen is, zonder de pagina te pauzeren. Laat het staan.

elke pagina, één keer

De chat hoort op elke pagina waar een bezoeker een vraag kan hebben, en dat zijn er meestal alle. Hoe je hem daar krijgt, hangt af van hoe de site gemaakt is.

Met de hand geschreven pagina’s. Plak de tag in elk .html-bestand. Zoek in de map naar </body> om ze allemaal te vinden. Voeg je later een pagina toe, kopieer dan een bestaande als startpunt en de tag komt mee.

Een gedeelde footer. Als je pagina’s een gemeenschappelijk footerbestand invoegen (een server-side include, een PHP-include, een template-partial), zet de tag daar één keer in.

Static site generators. Zet hem in de basislayout, de template waar elke pagina van erft:

generator	bestand
Jekyll	`_layouts/default.html`, of `_includes/footer.html`
Hugo	`layouts/_default/baseof.html`, of een footer-partial
Eleventy	je basislayout in `_includes/`
Astro	het basislayout-component
Pandoc, eigen scripts	de HTML-template die je meegeeft

Geen zorgen over een pagina die de tag twee keer krijgt: de launcher controleert of hij al op de pagina staat en de tweede kopie doet niets. Het is wel een verspild request, dus houd er één over.

instellen in code

De look die je in het dashboard kiest, zit in de launcher, dus de ene regel hierboven is de hele installatie. Hou je de instellingen liever in je HTML, zet dan window.Spookat in een script boven de tag:

<script>
  window.Spookat = {
    style: "clean",
    font: "system",
    accent: "#2F6FEB",
    side: "right",
    greeting: "hi. questions about an order? ask here.",
    lang: "en"
  };
</script>
<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

Als de pagina en het dashboard het oneens zijn, wint de pagina. Wat elke key doet:

key	wat hij verwacht	wat hij doet
`style`	een van 8 styles	de look. `brutal`, `clean`, `glass`, `soft`, `terminal`, `paper`, `retro`, `swiss`
`font`	`"system"` of een van 17 gehoste fonts	het font van de widget. `system` downloadt niets; gehoste fonts laden na de klik van ons CDN, nooit van Google
`accent`	`"#RRGGBB"`	je merkkleur. De tekstkleur daarop wordt gekozen op contrast
`side`	`"right"` of `"left"`	waar de launcher staat
`greeting`	tekst, tot 200 tekens	het eerste bericht dat een bezoeker ziet. Leeg betekent dat van de style
`label`	tekst, tot 40 tekens	maakt van de ronde knop een pil met deze tekst
`lang`	een taalcode, zoals `"en"` of `"pl"`	de taal van de widget. Standaard: die van de browser van de bezoeker, daarna Engels
`user`	`{ id, sig }`, vanaf cool guy	wie er is ingelogd, ondertekend op jouw server

De docs hebben de volledige referentie, inclusief hoe je user ondertekent.

een meertalige site

Heeft je site een map per taal (/en/, /pl/), zet lang dan per map, zodat de widget bij de pagina past en niet bij de browser. De widget spreekt 12 talen. Je team ziet bij elke chat de taal van de bezoeker.

een launcher die iets zegt

Een simpele site heeft vaak één duidelijke vraag die bezoekers stellen: “leveren jullie in…”, “kan ik boeken…”. Een label zoals "questions? ask a human" maakt van het icoon een kleine pil die dat zegt. Houd het kort; op een telefoon staat hij ook in de hoek.

wat de bezoeker krijgt

Een knop in de hoek, in jouw kleuren. Een klik opent het paneel met je begroeting en een regel dat er een mens antwoordt. Die typt; het bericht komt in je Slack- of Discord-thread, of in onze inbox en de telefoonapp; je antwoord komt terug in de widget. Gaat de bezoeker weg voordat je antwoordt en heeft die een e-mailadres achtergelaten, dan sturen cool guy en hoger het antwoord per e-mail. De chat blijft op het apparaat van de bezoeker, ook bij paginawissels en latere bezoeken, tot de geschiedenis verloopt (30 dagen op broke af).

controleer het

Open je site in een privévenster, zodat er geen oude cache of opslag meespeelt. Open dan DevTools (F12, of rechtsklikken en Inspecteren).

Network. Vink “Disable cache” aan, herlaad en typ spookat in het filter. Eén request: de launcher van cdn.spookat.com, ongeveer 2 kb overgedragen. Twee, allebei van cdn.spookat.com, als je code in window.Spookat een andere style zet dan de style die je hebt gepubliceerd. Niets naar api.spookat.com.
Application (Opslag in Firefox). Cookies: niets van Spookat. Local storage: nog niets. Er verschijnt pas een key nadat je een eerste bericht stuurt; die houdt je chat op dat apparaat vast.
Klik op de launcher. Nu laden het paneelscript en de stylesheet van je style van het CDN, daarna maakt de chat verbinding. Stuur een testbericht en kijk hoe het in Slack of Discord binnenkomt.

Verschijnt de launcher niet:

Niets in het Network-tabblad. De tag staat niet op deze pagina, zit in een HTML-commentaar, of je buildstap heeft hem verwijderd. Bekijk de paginabron en zoek naar spookat.
Het request faalt. Een key met de verkeerde lengte krijgt een 404 van het CDN. Vergelijk de key in de URL met het dashboard.
De launcher verschijnt in de standaardlook en maakt nooit verbinding. Met één verkeerd teken in de key laadt er nog steeds een launcher. Vergelijk de key met het dashboard.
De launcher verschijnt, maar de chat maakt geen verbinding. Je zit op een ander domein dan het geregistreerde: een lokaal bestand, localhost of een staginghost. De chat maakt alleen verbinding op je domein en de subdomeinen ervan.
Een Content Security Policy blokkeert hem. De console noemt de directive. Sta https://cdn.spookat.com toe voor scripts, styles en fonts, wss://api.spookat.com voor de verbinding en data: voor afbeeldingen, want logo’s en foto’s van teamleden zijn data:-afbeeldingen. De launcher voegt ook een klein <style>-blok toe aan zijn eigen shadow root, dus style-src moet inline styles voor hem toestaan. Zet je window.Spookat in een inline script, geef dat script dan de nonce of hash van je policy.

wat je niet toevoegt

Sites in pure HTML zijn snel omdat er niets in de weg zit. Hou dat zo:

Geen tag manager alleen voor de chat. Het is een script dat scripts laadt, en het weegt meer dan de launcher.
Geen preload of prefetch voor het paneel. Dat zou de download van het paneel voor de klik zetten, voor elke bezoeker.
Geen gegoochel met defer plus async. Alleen async is goed voor deze tag.
Geen wrapper die de chat na een paar seconden opent. Die laadt het hele paneel voor iedereen en bedekt je pagina op een telefoon. Een begroeting doet hetzelfde werk als iemand de chat echt opent.

de hosting maakt niet uit

GitHub Pages, Netlify, Cloudflare Pages, een FTP-map op shared hosting, een server in een kast: de tag is pure HTML, dus hij werkt overal waar je bestanden worden geserveerd. Geen buildstap, geen package, geen servercode.

koppel de antwoorden

Laatste stap: koppel Slack of Discord in het dashboard en kies een kanaal, of sla het over en antwoord in onze inbox en de telefoonapp. Elke bezoeker krijgt een eigen thread, iedereen in het kanaal kan antwoorden en er zijn geen seats. Het kost € 4,99 per maand per site op broke af.

checklist

Eén tag, met async, voor </body>, op elke pagina (of één keer in de gedeelde layout).
Optioneel window.Spookat erboven, als je de instellingen in code bewaart.
Gecontroleerd in een privévenster: één request voor de klik (twee, allebei van cdn.spookat.com, als je code een style zet die je niet hebt gepubliceerd), geen cookies.
Een testbericht uit de widget is in Slack of Discord aangekomen.

De proefperiode is 14 dagen en vraagt geen kaart. Plak de regel, en je statische site kan vragen beantwoorden.