Script-Tag-Referenz: alle Attribute und Konfigurationsquellen

Das Widget lässt sich vollständig über Attribute am Script-Tag einrichten – ohne Inline-Skript und damit auch unter einer strengen Content-Security-Policy. Wer lieber JavaScript schreibt, setzt dieselben Felder über window.ReactiveChatSettings oder ReactiveChat('boot', …).

Gestaltung, Texte, Startseite, Regeln und Touren stellst du normalerweise im Konto ein; sie kommen beim Verbindungsaufbau vom Server. Die Attribute hier sind für das, was je Seite gelten soll. Alle Gestaltungsoptionen findest du unter Anpassung.

Vier Konfigurationsquellen und ihre Rangfolge

Die spätere Quelle gewinnt; zusammengeführt wird flach (ein Objektfeld wie brand wird als Ganzes ersetzt, nicht tief gemischt):

1. Vorgaben des Widgets
2. data-rc-*-Attribute am Loader-Tag
3. window.ReactiveChatSettings (vor dem Loader gesetzt)
4. ReactiveChat('boot', {...})-Aufrufe aus der Warteschlange, in ihrer Reihenfolge

Felder, die das Widget nicht kennt, werden verworfen – ein vertipptes Attribut bleibt also still wirkungslos.

<script>
  window.ReactiveChatSettings = { locale: 'de', position: 'left' };
</script>
<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        async></script>

Wie Attributwerte gelesen werden

Der Name wird von Bindestrich- in Kamelschreibung umgesetzt: data-rc-site-key → siteKey. Der Typ ergibt sich aus der Vorgabe:

• Zeichenkette – wird unverändert übernommen.
• Wahrheitswert – nur "false" und "0" sind falsch; alles andere, auch ein leeres Attribut, ist wahr.
• Liste – durch Komma getrennt, z. B. "idle,pointer".
• Zahl oder Objekt – als JSON gelesen. Ist das JSON ungültig, bleibt die Vorgabe.

Gelesen wird nur das Tag, das gerade ausgeführt wird (document.currentScript). Binde den Loader deshalb als klassisches Skript ein, nicht mit type="module".

Pflicht

• data-rc-site-key (String, Pflicht) – der Schlüssel deines Projekts, zu finden im Konto unter Projekt → Einbau. Muster [A-Za-z0-9_-]{8,64}. Fehlt er oder ist er ungültig, startet nichts – ohne Meldung in der Konsole.

Verbindung und Auslieferung

• data-rc-ws-url (String, optional) – Adresse der Chat-Verbindung. Ohne Angabe abgeleitet aus dem Ort von loader.js (cdn.reactive.chat → wss://ws.reactive.chat/rc_wss/). Pflicht, sobald du loader.js nicht von cdn.reactive.chat lädst, und bei Domains mit zweiteiliger Endung wie .co.uk. Siehe Transport.
• data-rc-cdn-base (String, optional) – Verzeichnis, aus dem Kern und Module nachgeladen werden. Vorgabe: das Verzeichnis von loader.js.
• data-rc-core-url (String, optional) – feste Adresse des Kerns statt core.<hash>.js aus demselben Verzeichnis. Nur für Sonderfälle, etwa eine eigene Spiegelung.
• data-rc-transport (http, optional) – erzwingt den HTTP-Rückfall von Anfang an. Wirkt an jedem Element, das beim Start im Dokument steht; alternativ ReactiveChatSettings.transport = 'http'. Über boot wirkt es nicht.
• data-rc-max-retries (Zahl, Vorgabe 2) – Wiederholversuche, wenn der Kern nicht lädt (Abstand 300 ms × Versuch).

Sprache, Thema, Bewegung

• data-rc-locale (String, Vorgabe auto) – de, en oder pl. auto nimmt <html lang>, dann die Browsersprache, sonst Englisch. Andere Sprachen fallen auf Englisch zurück.
• data-rc-theme (auto | light | dark, Vorgabe auto) – auto folgt dem Hell/Dunkel deiner Seite, sonst dem System.
• data-rc-motion (auto | reduced | full, Vorgabe auto) – Animationen; auto folgt prefers-reduced-motion.
• data-rc-strings (JSON-Objekt, Vorgabe {}) – einzelne Texte überschreiben, z. B. {"a11y.launcher":"Hilfe öffnen"}. Texte pflegst du sonst im Konto (Anpassung).

Darstellung und Position

• data-rc-position (right | left, Vorgabe right) – Ecke von Launcher und Fenster.
• data-rc-offset (JSON, Vorgabe {"x":20,"y":20}) – Abstand zum Rand in Pixeln, zusätzlich zur Safe Area.
• data-rc-z-index (Zahl, Vorgabe 2147483000).
• data-rc-avoid-overlap (Wahrheitswert, Vorgabe true) – weicht fixierten Leisten am unteren Rand aus (Cookie-Banner, Warenkorbleisten).
• data-rc-hide-launcher (Wahrheitswert, Vorgabe false) – kein Chat-Symbol; das Fenster öffnet sich nur über eigene Links oder die JavaScript-API. Teaser werden dann unterdrückt. Gilt unabhängig von der Kontoeinstellung.
• data-rc-auto-open (Wahrheitswert, Vorgabe false) – öffnet das Fenster nach dem Start.
• data-rc-isolation (shadow | iframe, Vorgabe shadow) – das Widget lebt in einem geschlossenen Shadow DOM; iframe rendert das Fenster in einen Rahmen, für Seiten mit sehr aggressiven globalen Stilen.
• data-rc-brand (JSON-Objekt) – Markenfarbe und Launcher-Form. Der Loader liest daraus sofort primary (#rrggbb), onPrimary, radius und launcher.shape (circle, rounded, square, bubble, leaf), launcher.size (44–72) und launcher.size_m; den Rest prüft der Kern. Der Schnipsel aus dem Konto trägt diese Werte bereits – ohne gültige primary zeigt der Loader keinen Platzhalter-Knopf, sondern wartet, bis die Farbe vom Server kommt (kein Farbsprung, aber ein späterer Knopf). Enthält das Objekt nur diese Startfelder, gilt nach dem Verbindungsaufbau die Marke aus dem Konto; mit weiteren Feldern (z. B. accent) gilt deine. Einzelheiten unter Anpassung.
• data-rc-logo (JSON-Objekt) – src, placement (launcher, header, both), height, alt.
• data-rc-custom-css (String) – eigenes CSS innerhalb des Shadow DOM. Siehe Anpassung.

Laden und Verhalten

• data-rc-load-triggers (Liste, Vorgabe alle fünf) – wann der Kern nachgeladen wird: idle (Browser hat Zeit), pointer (Maus oder Finger auf dem Launcher), command (ein API-Befehl außer boot, update, track, identify), frustration (Signal aus MousePlayer), push. Der erste Auslöser gewinnt.
• data-rc-idle-timeout-ms (Zahl, Vorgabe 3000) – Frist für den Auslöser idle.
• data-rc-consent (auto | granted | denied, Vorgabe auto) – Einwilligungsstand. auto fragt deine Consent-Plattform (IAB TCF v2 über __tcfapi, sonst consented.eu); granted/denied legt ihn fest. Siehe Datenschutz-Einbindung.
• data-rc-dom-spiegel (Wahrheitswert, Vorgabe true) – false schickt keinen Seitentext an den Assistenten und schaltet „Zeig's mir“ ab.
• data-rc-promo (Wahrheitswert, Vorgabe true) – false blendet die Werbekarte auf dieser Seite aus.
• data-rc-launcher-selector (CSS-Selektor) – Klicks auf passende Elemente schalten das Fenster um. Wirkt erst, wenn der Kern geladen ist; für Links, die sofort wirken sollen, nimm data-rc-open (unten).
• data-rc-dnd (Wahrheitswert, Vorgabe false) – Startwert für „Nicht stören“.
• data-rc-session-ttl-ms (Zahl, Vorgabe 1800000) – wie lange eine MousePlayer-Sitzung übernommen wird.
• data-rc-debug (Wahrheitswert, Vorgabe false) – Diagnoseausgaben in der Konsole. Gleichwertig: localStorage.setItem('rc_debug', '1') im Browser.

Attribute an anderen Elementen deiner Seite

Chat öffnen (wirkt sofort, auch bevor der Kern geladen ist):

• data-rc-open – an jedem Element; ein Klick öffnet den Chat neben dem Element. data-rc-open="corner" öffnet in der Ecke.
• href="#rc-open" oder href="#reactive-chat" – dasselbe für Links.
• data-rc-anchor="none" – wie corner.
• data-rc-message – Text, der ins Eingabefeld geschrieben, aber nicht gesendet wird (höchstens 200 Zeichen).
• data-rc-tab – msg, home oder help: welcher Reiter vorne liegt.

Ausführlich: Chat über einen eigenen Link oder Knopf öffnen.

Datenschutztext:

• data-rc-privacy – Platzhalter für den Abschnitt zu reactive.chat in deiner Datenschutzerklärung, mit data-lang, data-heading (2–6) und data-email. Status in data-rc-privacy-state (loading, done, error). Siehe Datenschutz-Einbindung.

Seitentext ausschließen:

• data-rc-private oder gleichwertig data-rc-ignore – dieser Teilbaum wird nie als Seitentext an den Assistenten geschickt und nie von „Zeig's mir“ angesteuert.

<aside data-rc-private>
  Interne Hinweise, die der Assistent nicht lesen soll.
</aside>

URL-Parameter

• ?rc_ab=A bis E – erzwingt zur Qualitätsprüfung eine Variante eines laufenden A/B-Tests (siehe Anpassung).

Weitere Parameter in der Adresse wertet das Widget beim Laden nicht aus.

Mehrfacheinbindung

Steht der Loader zweimal auf der Seite (etwa über ein Template und einen Tag-Manager), startet nur der erste mit gültigem Site-Key; der zweite tut nichts. Ein erstes Tag mit ungültigem Schlüssel sperrt ein korrektes zweites nicht aus.

Weiter: JavaScript-API · Ereignisse