live-chat auf deiner website, ohne sie langsamer zu machen

27. September 2026 · von kuba · 8 min lesen

Ein Live-Chat sollte deine Seite fast nichts kosten, solange niemand wirklich schreiben will. Dieser Guide zeigt, was ein Chat-Widget vor dem ersten Klick lädt, was du prüfen solltest, bevor du dich für eins entscheidest, wie du Spookat in ein paar Minuten einbaust und wie du in den DevTools belegst, dass deine Seite schnell geblieben ist.

Die meisten Besucher öffnen den Chat nie. Sie lesen, scrollen, kaufen vielleicht und gehen. Alles, was das Widget beim Laden der Seite mitbringt, bezahlt trotzdem jeder von ihnen, auch die mit dem günstigen Handy und schwachem Empfang.

Diese Kosten haben vier Teile:

Bytes. JavaScript, CSS, Fonts, Bilder und oft ein iframe mit eigenem Dokument. JavaScript ist die teure Sorte: Der Browser lädt es, parst es und führt es auf dem Main Thread aus, demselben Thread, der Scrollen und Taps verarbeitet.
Requests. Jeder Request ist ein Round Trip, und Requests an neue Domains zahlen zusätzlich für DNS-Lookup und TLS-Handshake. Ein Widget, das beim Laden nach Hause telefoniert, packt das auf jeden Seitenaufruf.
Speicher. Cookies, localStorage und IndexedDB, geschrieben vor jeder Interaktion. In der EU kann das entscheiden, ob du überhaupt eine Einwilligung brauchst, bevor das Widget lädt.
Main-Thread-Zeit. Code, der beim Start läuft, konkurriert mit deinem eigenen Code. Lighthouse meldet das als Total Blocking Time, und es landet in deinem Score.

Die vier Widgets auf unseren Vergleichsseiten luden zwischen 220 und 509 kb gzipped, bevor jemand klickte. Gemessen haben wir das am 2026-09-26: jedes Widget auf einer leeren Testseite geladen und die übertragenen Bytes addiert. Zahlen und Quellen stehen auf /vs. Zum Vergleich: Der Text dieses ganzen Artikels ist kleiner als 20 kb.

Nichts davon braucht man, um einen Button anzuzeigen. Ein Button sind ein paar hundert Bytes HTML und CSS. Alles andere (das Chat-Panel, die Verbindung zum Server, der Verlauf) wird erst gebraucht, wenn jemand klickt.

Jedes Chat-Widget kannst du mit einem Browser in zehn Minuten beurteilen. Das hier schaust du dir an, sortiert danach, wie sehr es deine Besucher betrifft.

gewicht vor dem klick

Öffne die Demo-Seite des Anbieters oder deine eigene Staging-Seite, öffne die DevTools und lade mit deaktiviertem Cache neu. Filtere den Network-Tab nach den Domains des Anbieters und addiere die übertragene Größe. Alles über ein paar Kilobyte vor dem Klick ist Code, den deine Besucher für ein Panel laden, das die meisten nie öffnen.

requests vor dem klick, und an wen

Zähle die Requests und notiere die Domains. Ein Widget, das beim Laden mit seiner API spricht, schickt etwas über jeden Besucher, mindestens, dass es ihn gibt und auf welcher Seite er ist. Manche laden zusätzlich Analytics oder Error-Tracking von Dritten.

cookies und speicher vor dem klick

Schau nach einem frischen Laden in den Application-Tab, ohne das Widget anzufassen. Cookies von den Domains des Widgets oder Storage-Keys, die es geschrieben hat, sind die, die ein Consent-Banner eventuell abdecken muss. Wir sind nicht deine Anwälte, und die Regeln unterscheiden sich je nach Land, also frag deine, was für deine Seite gilt. Am einfachsten zu erklären ist ein Widget, das nichts speichert, bis der Besucher einen Chat beginnt.

wo dein team antwortet

Ein Chat ist nur so gut wie die Antwort. Wenn Antworten heißt, ein weiteres Dashboard zu öffnen, muss jemand diesen Tab den ganzen Tag offen halten. Wenn die Chats dort landen, wo dein Team sowieso redet (Slack, Discord), ist eine Antwort eine Nachricht in einem Thread.

was es kostet, wenn das team wächst

Preise pro Sitz berechnen jede Person, die antworten könnte. Preise pro Lösung berechnen jede Antwort. Preise pro Site berechnen die Site, egal wer antwortet und wie oft.

das handy

Prüf den Launcher auf einem 375 px breiten Bildschirm. Er sollte deine eigenen Buttons nicht verdecken und mindestens 44 px groß sein, damit ein Daumen ihn trifft. Öffne das Panel und tippe: Die Tastatur sollte das Eingabefeld nicht verdecken.

schritt für schritt: live-chat mit spookat

Spookat ist um genau diese Checks herum gebaut. Das Snippet lädt einen kleinen Launcher von unserem CDN, mit dem Look deiner Site schon drin. Es macht 0 Requests an unsere API vor einem Klick und setzt keine Cookies. Dein Team antwortet in einem Slack-Thread oder einem Discord-Forumpost. Es kostet 4,99 € pro Monat und Site mit broke af, mit unbegrenzt vielen Teammitgliedern, und die Testphase dauert 14 Tage ohne Karte.

1. hol dir dein snippet

Melde dich im Dashboard an und füge deine Site hinzu. Die Install-Seite zeigt dein Snippet mit deinem Site-Key schon eingesetzt und einen Kopieren-Button. Du kannst sie direkt mit deiner Domain in der Adresse öffnen:

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

2. füge es vor dem schließenden body-tag ein

Ein Tag, irgendwo auf der Seite, am besten direkt vor </body>:

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

async heißt, dass der Browser deine Seite weiter rendert, während er die Datei lädt, und sie ausführt, sobald sie da ist. Die Datei ist der Launcher: ein Button, seine Styles und der Look, den du im Dashboard veröffentlicht hast. Sein Build schlägt fehl, wenn er über 4 kb gzipped wächst. Am 2026-09-27 waren es 2,0 kb.

Wenn deine Site eine Single-Page-App ist, setz das Tag ins Root-HTML-Template und nicht in eine Komponente, die neu rendert. Der Launcher prüft, ob es ihn schon gibt, eine zweite Kopie macht also nichts, aber ein Tag an einer Stelle ist leichter zu durchschauen.

3. wähl einen look

Es gibt 8 Styles und 12 selbst gehostete Fonts, plus die Systemschrift des Besuchers. Wähl sie im Dashboard aus und veröffentliche; der Launcher übernimmt den neuen Look innerhalb einer Minute. Oder setz ihn auf der Seite, über dem Snippet, wo er das Dashboard schlägt:

<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" lädt überhaupt keinen Font. Jeder andere Font kommt von unserem CDN, erst nach dem Klick, nie von Google. accent nimmt eine Hex-Farbe, und die Textfarbe darauf wird nach Kontrast gewählt. Die komplette Liste der Keys steht in den Docs.

4. verbinde slack oder discord

Verbinde im Dashboard einen Channel. Du bestätigst die Verbindung in Slack oder Discord selbst und wählst dann den Channel aus einer Liste. Du bist kein Admin im Workspace? Das Dashboard gibt dir einen einmaligen Link für die Person, die es ist, 7 Tage gültig, und sie braucht kein Spookat-Konto.

Ab dann ist jede Unterhaltung ein Thread in Slack oder ein Forumpost in Discord.

5. antworte aus dem thread

Antworte im Thread, und der Besucher sieht es im Widget. Eine Nachricht, die mit // beginnt, bleibt intern, du kannst also eine Kollegin fragen, ohne dass der Besucher mitliest. Besucher sehen deinen Vornamen aus Slack oder deinen Discord-Nickname; /spookat me zeigt oder ändert ihn, pro Site.

Wenn der Besucher gegangen ist, bevor du geantwortet hast, und eine E-Mail hinterlassen hat, schicken cool guy und höher ihm die Antwort per E-Mail, in der Sprache des Widgets. Mit broke af wartet die Antwort im Widget auf seinen nächsten Besuch.

oder: lass deinen agent alles machen

Wenn du mit Claude Code, Cursor oder einem anderen Coding-Agent baust, füg das hier ein und lass ihn das Handbuch lesen:

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

Der Agent findet dein Root-Template, fügt das Snippet ein und wählt einen Style, der zu deiner Site passt. Slack oder Discord verbinden und bezahlen bleibt bei dir: Beides bestätigt ein Mensch.

prüf es in den devtools

Glaub keinem Anbieter irgendwas davon, uns eingeschlossen. So prüfst du deine eigene Seite in Chrome. Firefox und Safari haben dieselben Panels unter etwas anderen Namen.

der network-tab, vor dem klick

Öffne deine Seite in einem privaten Fenster, damit kein alter Speicher oder Cache mitspielt.
Öffne die DevTools, geh zu Network, setz den Haken bei „Disable cache“ und lade neu.
Tipp spookat ins Filterfeld.

Du solltest einen Request sehen: den Launcher von cdn.spookat.com, rund 2 kb übertragen. Nichts geht an api.spookat.com. Siehst du mehr, hat etwas anderes auf der Seite ihn geladen (zum Beispiel ein zweites Snippet in einem Tag Manager).

der application-tab, vor dem klick

Öffne Application, dann Cookies und Local storage für deine Domain. Spookat schreibt hier beim Laden der Seite nichts. Es setzt überhaupt keine Cookies, nie. Der eine Storage-Key, den es nutzt, spookat: gefolgt von deinem Site-Key, wird erst geschrieben, nachdem der Besucher eine erste Nachricht geschickt hat: Er hält seinen Chat auf diesem Gerät.

nach dem klick

Leere das Network-Log und klick auf den Launcher. Jetzt lädt das Panel vom CDN: sein Script (16,6 kb gzipped am 2026-09-27) und das Stylesheet deines Styles (etwa 2 kb). Ein Font kommt dazu, wenn du einen gewählt hast. Dann öffnet das Panel eine Verbindung zu unserer API, und der Besucher kann tippen.

Das ist der ganze Trick: Der teure Teil wandert hinter den Klick, und nur die Besucher, die chatten wollen, laden ihn.

lighthouse

Lass Lighthouse im Mobile-Modus auf der Seite ohne Snippet und mit Snippet laufen, jeweils ein paar Durchläufe, und vergleiche die Mediane. Einzelne Durchläufe schwanken auf derselben Seite um mehrere Punkte, ein einzelner Lauf beweist also in keine Richtung etwas. Mit einem 2-kb-Launcher und ohne Arbeit vor dem Klick sollte der Unterschied innerhalb dieses Rauschens liegen.

Ein kleiner Launcher bleibt nur klein, wenn die Seite drumherum ihn lässt. Das sind die Fehler, die wir am häufigsten sehen, und jeder macht die Arbeit oben still und leise wieder zunichte.

Den Chat von selbst öffnen. Ein Panel, das nach zehn Sekunden aufspringt, lädt den ganzen Chat für jeden Besucher, auch für die, die gerade kaufen wollten. Auf dem Handy verdeckt es außerdem die Seite. Wenn du das Gespräch beginnen willst, schreib eine Begrüßung; sie erscheint, wenn der Chat geöffnet wird.

Das Panel vorladen, „damit es schneller geht“. Ein <link rel="preload"> oder prefetch für das Panel-Script schiebt seinen Download wieder vor den Klick, für alle. Nach dem Klick sind es zwei kurze Requests an ein CDN in der Nähe des Besuchers. Lass sie auf den Klick warten.

Es in einen Tag Manager packen. Ein Tag Manager ist ein Script, das andere Scripts lädt. Wenn er nur existiert, um das Chat-Snippet zu halten, kostet er mehr als der Chat. Setz das Tag direkt in dein Template.

Zwei Snippets. Ein Theme fügt eins hinzu, ein Plugin ein weiteres, jemand kopiert ein drittes in den Footer. Der Launcher ignoriert seine eigenen Duplikate, andere Widgets oft nicht, und am Ende streiten sich zwei Chats um dieselbe Ecke. Durchsuch deine Templates nach cdn.spookat.com (oder der Domain deines alten Anbieters) und behalte eins.

was mit den daten passiert

Wenn ein Besucher eine Nachricht schickt, wird sie zuerst gespeichert und dann in deinen Slack-Thread oder Discord-Post gepostet. Wir speichern nie eine IP-Adresse. Das Land des Besuchers wird im Moment der Nachricht aus einer Offline-Datenbank nachgeschlagen, und die Adresse wird nicht behalten. Der Chatverlauf bleibt 30 Tage bei broke af, 90 bei cool guy und 365 bei vc money, danach wird er gelöscht. Die Details, inklusive Unterauftragsverarbeiter, stehen auf der Datenschutzseite.

eine checkliste zum wiederverwenden

Für jedes Chat-Widget, nicht nur unseres:

Das Snippet lädt mit async oder defer und blockiert das Rendern nicht.
Vor einem Klick: ein paar Kilobyte, ein Request, keine Requests an die API des Anbieters.
Keine Cookies und kein Speicher, bevor der Besucher einen Chat beginnt.
Der Launcher verdeckt auf einem 375-px-Bildschirm nicht deine eigenen Buttons.
Das Panel und seine Fonts laden erst nach dem Klick.
Dein Team antwortet dort, wo es sowieso arbeitet, ohne einen weiteren Tab zum Babysitten.
Die Preise bestrafen dich nicht dafür, ein Teammitglied hinzuzufügen.
Du hast selbst gemessen, mit deaktiviertem Cache, in einem privaten Fenster.

Probier es auf deiner eigenen Site aus: Die Testphase dauert 14 Tage und braucht keine Karte.