Das Widget einbinden

Zwei Zeilen im Kopf der Seite. Ohne Inline-Skript, damit es auch unter strikter CSP laeuft.

Die kurze Fassung

Setze diese Zeile in den Kopf deiner Seite und ersetze SITE_KEY durch deinen Schlüssel:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-locale="de"
        async></script>

Das war alles. Der Ladeteil wiegt 2,7 kB und holt den Kern erst nach, wenn der Browser Zeit hat oder der Besucher den Launcher berührt.

Wenn du `loader.js` selbst auslieferst, brauchst du eine Zeile mehr

Manche laden das Skript lieber aus dem eigenen Verzeichnis statt von unserem Auslieferungsnetz — wegen einer Richtlinie, wegen einer Testumgebung, oder einfach aus Gewohnheit. Das geht, aber dann musst du die Chat-Verbindung ausdrücklich angeben:

<script src="/js/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-ws-url="wss://ws.reactive.chat/rc_wss/"
        async></script>

Warum: ohne diese Angabe leitet das Widget die Adresse aus dem Ort ab, von dem das Skript kam. Kam es von deiner Domain, sucht es den Chat auch dort — und findet nichts.

Und es fällt schlecht auf. Der Launcher steht, das Fenster öffnet sich, Farbe und Sprache stimmen, alles wirkt fertig. Nur ankommen tut keine Nachricht. Es gibt keine Fehlermeldung: die Verbindung versucht es im Hintergrund unbeirrt weiter, und genau das versteckt den Fehler. Erst die Browserkonsole nennt den Hostnamen, den sie vergeblich sucht.

Der Wert oben gilt für alle Konten bei uns. Nur wer den Server selbst betreibt, trägt seinen eigenen ein.

Über eine Subdomain der eigenen Website

Soll der Chat first-party über eine eigene Subdomain laufen (z. B. chat.firma.de statt cdn.reactive.chat), steht die Einrichtung des Proxys in der Anleitung Eigene Domain. Das Konto zeigt danach den passenden Schnipsel.

Wenn WebSockets blockiert sind

Lässt ein Netz keinen WebSocket durch, etwa hinter einem Firmenproxy, läuft der Chat automatisch über normales HTTPS weiter. Dafür braucht deine Content-Security-Policy die https://-Adresse unten zusätzlich zur wss://-Adresse. Wann der Rückfall greift und wie du ihn zum Testen erzwingst, steht unter HTTP-Rückfall.

Chat über eigene Links öffnen, Werbekarte zeigen

Jeder Link oder Knopf deiner Seite kann den Chat öffnen, das Fenster erscheint dann direkt daneben: Chat über einen eigenen Link oder Knopf öffnen. Wie du im Chat eine Karte für dein eigenes Angebot zeigst, etwa für deinen Bezahltarif, steht unter Die Werbekarte im Chat.

Datenschutztext automatisch einbinden

Ein kleines Element auf deiner Datenschutzseite zeigt den passenden Text zum Chat an, immer passend zu deinen Projekteinstellungen und in der Sprache der Seite: Datenschutztext automatisch einbinden.

Warum kein Inline-Skript

Die übliche Form der Konkurrenz ist ein Inline-<script>. Unter einer strengen Content-Security-Policy ohne unsafe-inline wird es blockiert, bevor eine Zeile davon läuft. Die Attributform oben braucht keines.

Was deine Richtlinie zusätzlich erlauben muss:

script-src den Auslieferungsort, hier cdn.reactive.chat
connect-src die WebSocket-Adresse, hier wss://ws.reactive.chat
connect-src dieselbe Adresse zusätzlich mit https://, hier https://ws.reactive.chat – darüber laufen das Offline-Formular und der HTTP-Rückfall, wenn ein Firmenproxy keinen WebSocket durchlässt

Die Einstellungen am Skript-Tag

data-rc-site-key — Pflicht. Ohne ihn startet nichts, und das ist Absicht.
data-rc-locale — de, en oder pl. Fehlt der Wert, entscheidet der Browser.
data-rc-brand — deine Markenfarbe. Der Text wird nachgerechnet, bis er lesbar ist.
data-rc-ws-url — Pflicht, sobald du loader.js nicht von cdn.reactive.chat lädst. Siehe den Abschnitt oben.

Alles Weitere steht in der Übersicht der Funktionen und im Preisvergleich.

Stand: 2026-10-19