Schnellstart: in fünf Minuten zum laufenden Chat

Das Widget mit einer Zeile einbinden, die Domain im Projekt eintragen, die Content-Security-Policy ergänzen, prüfen, ob die Verbindung steht – und die häufigsten nächsten Schritte für angemeldete Nutzer, eigene Knöpfe und dein Backend.

1. Site-Key holen und Domain eintragen

Im Konto unter Projekt → Einbau steht dein Einbau-Schnipsel mit dem Site-Key. Trag unter Erlaubte Herkünfte jede Domain ein, auf der der Chat laufen soll (Subdomains sind eingeschlossen: deine-firma.de deckt www.deine-firma.de und shop.deine-firma.de). Nur von diesen Domains nimmt der Chat-Server Verbindungen an.

2. Die eine Zeile

Setze den Schnipsel aus dem Konto vor </body> oder in den <head>:

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

Der Schnipsel aus dem Konto trägt zusätzlich data-rc-brand mit deiner Markenfarbe, damit der Launcher sofort in der richtigen Farbe erscheint. Übernimm ihn deshalb am besten unverändert. Alle Attribute: Script-Tag-Referenz.

3. Content-Security-Policy ergänzen

Setzt deine Website eine CSP, ergänze:

script-src  https://cdn.reactive.chat;
connect-src wss://ws.reactive.chat https://ws.reactive.chat;
img-src     data: https:;

Warum beide connect-src-Einträge nötig sind: Sicherheit und CSP.

4. Prüfen

Öffne deine Seite mit den Entwicklerwerkzeugen:

Elemente: Am Ende von <body> steht <reactive-chat>.
Netzwerk: loader.js, danach (spätestens beim Überfahren des Launchers) core.<hash>.js und eine WebSocket-Verbindung zu wss://ws.reactive.chat/rc_wss/ mit Statuscode 101.
Konsole: ReactiveChat('getSession') liefert nach dem Laden { sessionId, visitorId, tabId }.

Schreib eine Testnachricht; sie erscheint im Pult deines Kontos. Kommt keine Verbindung zustande, hilft die Fehlerbehebung.

Varianten

Über einen Tag-Manager: Der Loader liest seine Attribute vom eigenen <script>-Element. Lege deshalb ein Tag an, das ein echtes <script src> mit den Attributen einfügt, oder setze die Konfiguration vorher:

<script>
  window.ReactiveChatSettings = { siteKey: 'SITE_KEY', locale: 'de' };
</script>
<script src="https://cdn.reactive.chat/loader.js" async></script>

Unter einer strengen CSP braucht das Inline-Skript eine Nonce, die dein Tag-Manager setzen muss.

loader.js selbst ausliefern: Lädst du die Datei aus deinem eigenen Verzeichnis, gib die Chat-Adresse ausdrücklich an – sonst sucht das Widget den Chat-Server unter deiner Domain, und es kommt keine Nachricht an, ohne dass eine Fehlermeldung erscheint:

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

Mit data-rc-cdn-base holt der Loader den passenden Kern weiter von uns. Beachte: Eine Kopie von loader.js wird nicht aktualisiert; bei Änderungen am Kern musst du sie selbst erneuern. Empfohlen bleibt das Einbinden von cdn.reactive.chat oder über eine eigene Domain.

Domains mit zweiteiliger Endung (.co.uk, .com.au …) bei eigener Auslieferung: setze data-rc-ws-url immer ausdrücklich.

Single-Page-Apps: einmal in die Hülle der App einbinden, siehe SPA und Seitenwechsel.

Mobile Apps: Mobile Apps.

Die nächsten Schritte

Angemeldete Nutzer erkennen: ReactiveChat('identify', …) mit einer Signatur von deinem Server – Besucher identifizieren.
Eigene Knöpfe und Links: <a href="#rc-open">Hilfe</a> – Chat über einen eigenen Link öffnen.
Auf Ereignisse reagieren: ReactiveChat('on', 'message', …) – Ereignisse.
Backend anbinden: Webhooks, Server-API, Kundendaten.
Aussehen und Verhalten: Anpassung.

آخرین به‌روزرسانی: 2026-10-21