Integration: technische Referenz für Entwickler

Diese Referenz richtet sich an Entwicklerinnen und Entwickler, die reactive.chat in eine Website, eine App oder ein Backend einbauen. Sie beschreibt Schnittstellen und Abläufe so, wie sie im Code umgesetzt sind – mit Namen, Typen, Vorgaben und Fehlerfällen.

Wie du Aussehen, Texte, Startseite, Regeln, Touren, A/B-Tests und die KI-Persona einstellst, steht unter Anpassung. Die Bedienung von Konto und Pult beschreibt das Handbuch.

Auf einen Blick

Browser deiner Besucher                     reactive.chat                         dein Server
-----------------------                     -------------                         -----------
loader.js  --(Auslöser)-->  core.<hash>.js  cdn.reactive.chat
   window.ReactiveChat (API, Ereignisse)
   WebSocket rc.v1  <------------------->   ws.reactive.chat/rc_wss/
   HTTP-Rückfall (SSE/Poll) <----------->   ws.reactive.chat/rc_wss/h/
                                            Chat-Server  --- POST (signiert) -->  Kundendaten-Endpunkt
                                                         --- POST (signiert) -->  Webhook-Empfänger
                                            reactive.chat/v1  <--- Bearer -----  REST-API / MCP
identify(userHash)  <-------------------------------------- HMAC-SHA256 ------  Identitätsgeheimnis

Client-seitig bindest du ein Script-Tag ein und steuerst das Widget optional über window.ReactiveChat. Server-seitig signierst du die Identität angemeldeter Nutzer, beantwortest bei Bedarf Kundendaten-Abrufe, empfängst Webhooks und nutzt die REST-API.

Kapitel

Grundlagen

• Architektur und Ablauf – die Teile, ihr Zusammenspiel, Versionen und Auslieferung
• Schnellstart – einbinden, Domain eintragen, CSP, prüfen

Im Browser

• Script-Tag-Referenz – alle data-rc-*-Attribute und Konfigurationsquellen
• JavaScript-API – alle Befehle von ReactiveChat(…)
• Ereignisse – on/off und DOM-Events
• Besucher identifizieren und Kontext übergeben – identify, userHash, exp, track
• Single-Page-Apps und Seitenwechsel
• Sicherheit und Content-Security-Policy

Verbindung und Auslieferung

• Eigene Domain und First-Party-Proxy – nginx, Apache, Caddy
• Transport: WebSocket, HTTP-Rückfall, Wiederverbinden – Protokoll, Fehler- und Close-Codes

Auf deinem Server

• Kundendaten-Endpunkt – Abruf und Import von Bestellungen
• Webhooks – Ereignisse, Signatur, Wiederholungen, REST-Hooks
• Server-API (REST v1) und MCP
• Integrationen und Kanäle – WhatsApp, Messenger, Instagram, Telegram, SMS, E-Mail

Weitere Einbauorte

• Mobile Apps – der Chat im WebView
• Smart Answer – KI-Antwort in deiner Website-Suche

Betrieb

• Datenschutz-Einbindung – Einwilligung, Speicher, Datenschutztext
• Grenzen und Quoten
• Fehlerbehebung und Checkliste

Weitere Seiten zum Thema

• Das Widget einbinden – die Kurzfassung
• Technische Einzelheiten – Messwerte zu Größe, Barrierefreiheit und Kontrast
• Chat über einen eigenen Link oder Knopf öffnen
• Die Werbekarte im Chat
• Kundendaten im Chat
• Eigene Domain (First-Party)
• HTTP-Rückfall
• Datenschutztext automatisch einbinden

Begriffe

• Site-Key – öffentlicher Schlüssel eines Projekts (24 Zeichen), steht im Schnipsel. Kein Geheimnis.
• Projekt – eine Website bzw. App mit eigenen Einstellungen; mehrere Projekte bilden einen Workspace.
• Pult – die Oberfläche, in der dein Team antwortet.
• Bestätigter Nutzer – ein Besucher, dessen Identität dein Server per userHash signiert hat.
• Loader / Kern – der kleine Ladeteil loader.js und der nachgeladene Hauptteil core.<hash>.js.

Alle Teile der Dokumentation im Überblick: Dokumentation.