live-chat auf einer reinen html-seite

30. September 2026 · von kuba · 6 min lesen

Eine reine HTML-Seite braucht für einen Live-Chat genau eine Zeile: einen Script-Tag vor </body>. Dieser Guide zeigt, wo diese Zeile auf handgeschriebenen Seiten und auf Seiten aus einem Static Site Generator hingehört, welche Optionen du daneben setzen kannst und wie du im Browser prüfst, dass vor einem Klick nichts geladen wird.

die zeile

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

Dein Site-Key steht auf der Install-Seite im Dashboard, schon ins Snippet eingesetzt, mit einem Kopieren-Button. Er beginnt mit site_live_ und ist öffentlich: Er steht sowieso in deinem Seitenquelltext und funktioniert nur auf der Domain, die du registriert hast.

Die Datei, die er lädt, ist der Launcher: ein Button, seine Styles und der Look, den du im Dashboard veröffentlicht hast. Sie ist kleiner als 4 kb gzipped (darüber schlägt der Build fehl). Sie macht 0 Requests an unsere API und setzt keine Cookies. Das Chat-Panel und die Verbindung zu unserem Server laden erst, wenn ein Besucher klickt.

Neu bei dem Thema? Der Grundlagen-Guide erklärt, was ein Chat-Widget eine Seite kostet und worauf du achten solltest.

wo sie hingehört

Direkt vor den schließenden </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>

Warum dort und warum async:

Am Ende des Bodys hält der Tag nichts darüber auf. Der Browser hat deinen Inhalt schon gesehen, wenn er beim Tag ankommt.
async sagt dem Browser, die Datei im Hintergrund zu holen und sie auszuführen, sobald sie da ist, ohne die Seite anzuhalten. Lass es drin.

jede seite, einmal

Der Chat sollte auf jeder Seite sein, auf der ein Besucher eine Frage haben könnte, also meistens auf allen. Wie du ihn dorthin bekommst, hängt davon ab, wie die Seite gebaut ist.

Handgeschriebene Seiten. Füg den Tag in jede .html-Datei ein. Durchsuch den Ordner nach </body>, um alle zu finden. Wenn du später eine Seite hinzufügst, kopier eine bestehende als Ausgangspunkt, dann kommt der Tag mit.

Ein gemeinsamer Footer. Wenn deine Seiten eine gemeinsame Footer-Datei einbinden (ein Server-Side Include, ein PHP-include, ein Template-Partial), setz den Tag einmal dort hinein.

Static Site Generators. Setz ihn ins Basis-Layout, das Template, von dem jede Seite erbt:

Generator	Datei
Jekyll	`_layouts/default.html` oder `_includes/footer.html`
Hugo	`layouts/_default/baseof.html` oder ein Footer-Partial
Eleventy	dein Basis-Layout in `_includes/`
Astro	die Basis-Layout-Komponente
Pandoc, eigene Skripte	das HTML-Template, das du übergibst

Keine Sorge wegen einer Seite, auf der der Tag am Ende zweimal steht: Der Launcher prüft, ob er schon auf der Seite ist, und die zweite Kopie macht nichts. Es ist trotzdem ein verschwendeter Request, also behalte einen.

einrichtung im code

Der Look, den du im Dashboard wählst, steckt im Launcher, die eine Zeile oben ist also die ganze Installation. Wenn du die Einstellungen lieber in deinem HTML hältst, setz window.Spookat in einem Script über dem 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>

Wenn Seite und Dashboard sich widersprechen, gewinnt die Seite. Was jeder Key macht:

Key	Wert	macht
`style`	einer von 8 Styles	den Look. `brutal`, `clean`, `glass`, `soft`, `terminal`, `paper`, `retro`, `swiss`
`font`	`"system"` oder einer von 17 gehosteten Fonts	die Schrift des Widgets. `system` lädt nichts; gehostete Fonts laden nach dem Klick von unserem CDN, nie von Google
`accent`	`"#RRGGBB"`	deine Markenfarbe. Die Textfarbe darauf wird nach Kontrast gewählt
`side`	`"right"` oder `"left"`	wo der Launcher sitzt
`greeting`	Text, bis 200 Zeichen	die erste Nachricht, die ein Besucher sieht. Leer heißt: die des Styles
`label`	Text, bis 40 Zeichen	macht aus dem runden Button eine Pille mit diesem Text
`lang`	ein Sprachcode, etwa `"en"` oder `"pl"`	die Sprache des Widgets. Standard: die Browsersprache des Besuchers, dann Englisch
`user`	`{ id, sig }`, ab cool guy	wer eingeloggt ist, signiert auf deinem Server

Die Docs haben die komplette Referenz, auch dazu, wie du user signierst.

eine mehrsprachige seite

Wenn deine Seite einen Ordner pro Sprache hat (/en/, /pl/), setz lang pro Ordner, damit das Widget zur Seite passt und nicht zum Browser. Das Widget spricht 12 Sprachen. Dein Team sieht bei jedem Chat die Sprache des Besuchers.

ein launcher, der etwas sagt

Eine einfache Seite hat oft eine klare Frage, die Besucher stellen: „liefert ihr nach…“, „kann ich buchen…“. Ein label wie "questions? ask a human" macht aus dem Icon eine kleine Pille, die genau das sagt. Halt es kurz; auf dem Handy sitzt es auch in der Ecke.

was der besucher bekommt

Einen Button in der Ecke, in deinen Farben. Ein Klick öffnet das Panel mit deiner Begrüßung und dem Hinweis, dass ein Mensch antwortet. Er tippt; die Nachricht landet in deinem Slack- oder Discord-Thread oder in unserer Inbox und ihrer Handy-App; deine Antwort kommt zurück ins Widget. Wenn er geht, bevor du antwortest, und eine E-Mail hinterlassen hat, schicken cool guy und höher ihm die Antwort per E-Mail. Der Chat bleibt über Seitenwechsel und spätere Besuche auf seinem Gerät, bis der Verlauf abläuft (30 Tage bei broke af).

prüf es

Öffne deine Seite in einem privaten Fenster, damit kein alter Cache oder Speicher mitspielt. Dann öffne die DevTools (F12 oder Rechtsklick und Untersuchen).

Network. Setz den Haken bei „Disable cache“, lade neu und tipp spookat ins Filterfeld. Ein Request: der Launcher von cdn.spookat.com, rund 2 kb übertragen. Zwei, beide von cdn.spookat.com, wenn dein Code in window.Spookat einen anderen Style setzt als den, den du veröffentlicht hast. Nichts an api.spookat.com.
Application (Storage in Firefox). Cookies: nichts von Spookat. Local storage: noch nichts. Ein Key taucht erst auf, nachdem du eine erste Nachricht geschickt hast; er hält deinen Chat auf diesem Gerät.
Klick auf den Launcher. Jetzt laden das Panel-Script und das Stylesheet deines Styles vom CDN, dann verbindet sich der Chat. Schick eine Testnachricht und sieh zu, wie sie in Slack oder Discord ankommt.

Wenn der Launcher nicht erscheint:

Nichts im Network-Tab. Der Tag ist nicht auf dieser Seite, steckt in einem HTML-Kommentar, oder dein Build-Schritt hat ihn entfernt. Schau in den Seitenquelltext und such nach spookat.
Der Request schlägt fehl. Ein Key mit falscher Länge bekommt vom CDN ein 404. Vergleich den Key in der URL mit dem Dashboard.
Der Launcher erscheint im Standard-Look und verbindet sich nie. Auch mit einem falschen Zeichen im Key lädt noch ein Launcher. Vergleich den Key mit dem Dashboard.
Der Launcher erscheint, aber der Chat verbindet sich nicht. Du bist auf einer anderen Domain als der registrierten: einer lokalen Datei, localhost oder einem Staging-Host. Der Chat verbindet sich nur auf deiner Domain und ihren Subdomains.
Eine Content Security Policy blockiert ihn. Die Konsole nennt die Direktive. Erlaube https://cdn.spookat.com für Scripts, Styles und Fonts, wss://api.spookat.com für die Verbindung und data: für Bilder, denn Logos und Bilder der Teammitglieder sind data:-Bilder. Der Launcher fügt außerdem einen kleinen <style>-Block in seine eigene Shadow Root ein, style-src muss dafür also Inline-Styles erlauben. Wenn du window.Spookat in einem Inline-Script setzt, gib diesem Script die Nonce oder den Hash deiner Policy.

was du nicht hinzufügen solltest

Reine Seiten sind schnell, weil nichts im Weg ist. Lass es so:

Kein Tag Manager nur für den Chat. Er ist ein Script, das Scripts lädt, und wiegt mehr als der Launcher.
Kein preload oder prefetch für das Panel. Das würde den Download des Panels vor den Klick schieben, für jeden Besucher.
Kein Jonglieren mit defer plus async. async allein ist für diesen Tag richtig.
Kein Wrapper, der den Chat nach ein paar Sekunden öffnet. Er lädt das ganze Panel für alle und verdeckt auf dem Handy deine Seite. Eine Begrüßung macht denselben Job, wenn jemand den Chat wirklich öffnet.

das hosting ist egal

GitHub Pages, Netlify, Cloudflare Pages, ein FTP-Ordner auf Shared Hosting, ein Server im Schrank: Der Tag ist reines HTML, er funktioniert also überall, wo deine Dateien ausgeliefert werden. Kein Build-Schritt, kein Paket, kein Server-Code.

verbinde die antworten

Letzter Schritt: Verbinde Slack oder Discord im Dashboard und wähl einen Channel, oder lass das weg und antworte in unserer Inbox und ihrer Handy-App. Jeder Besucher bekommt seinen eigenen Thread, jeder im Channel kann antworten, und es gibt keine Sitze. Es kostet 4,99 € pro Monat und Site mit broke af.

checkliste

Ein Tag, mit async, vor </body>, auf jeder Seite (oder einmal im gemeinsamen Layout).
Optional window.Spookat darüber, wenn du die Einstellungen im Code hältst.
Geprüft in einem privaten Fenster: ein Request vor dem Klick (zwei, beide von cdn.spookat.com, wenn dein Code einen Style setzt, den du nicht veröffentlicht hast), keine Cookies.
Eine Testnachricht aus dem Widget ist in Slack oder Discord angekommen.

Die Testphase dauert 14 Tage und braucht keine Karte. Füg die Zeile ein, und deine statische Seite kann Fragen beantworten.