Scripttagreferentie: alle attributen en configuratiebronnen

De widget kan volledig via attributen op de scripttag worden ingesteld — zonder inline script en dus ook onder een strenge Content Security Policy. Als u liever JavaScript schrijft, stelt u dezelfde velden via window.ReactiveChatSettings of ReactiveChat('boot', …) in.

Ontwerp, teksten, startscherm, regels en tours stelt u normaal in uw account in; ze komen van de server wanneer de verbinding tot stand komt. De attributen hier zijn voor wat per pagina moet gelden. Alle ontwerpopties staan onder Aanpassing.

Vier configuratiebronnen en hun voorrang

De latere bron heeft voorrang; samenvoegen gebeurt vlak (een objectveld zoals brand wordt als geheel vervangen, niet diep samengevoegd):

1. Standaardwaarden van de widget
2. data-rc-*-attributen op de loadertag
3. window.ReactiveChatSettings (ingesteld vóór de loader)
4. ReactiveChat('boot', {...})-aanroepen uit de wachtrij, in hun volgorde

Velden die de widget niet kent, worden verworpen — een verkeerd getypt attribuut heeft dus zonder melding geen effect.

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

Hoe attribuutwaarden worden gelezen

De naam wordt van kebab-case naar camelCase omgezet: data-rc-site-key → siteKey. Het type volgt uit de standaardwaarde:

• String — ongewijzigd overgenomen.
• Boolean — alleen "false" en "0" zijn false; al het overige, inclusief een leeg attribuut, is true.
• Lijst — gescheiden door komma’s, bijvoorbeeld "idle,pointer".
• Getal of object — gelezen als JSON. Bij ongeldige JSON blijft de standaardwaarde gelden.

Alleen de tag die op dat moment wordt uitgevoerd, wordt gelezen (document.currentScript). Sluit de loader daarom als klassiek script in, niet met type="module".

Verplicht

• data-rc-site-key (string, verplicht) — de sleutel van uw project, in uw account onder Project → Installatie. Patroon [A-Za-z0-9_-]{8,64}. Als deze ontbreekt of ongeldig is, start er niets — zonder melding in de console.

Verbinding en distributie

• data-rc-ws-url (string, optioneel) — adres van de chatverbinding. Als het niet is opgegeven, wordt het afgeleid van de locatie van loader.js (cdn.reactive.chat → wss://ws.reactive.chat/rc_wss/). Verplicht zodra u loader.js niet vanaf cdn.reactive.chat laadt en voor domeinen met een tweedelige extensie zoals .co.uk. Zie Transport.
• data-rc-cdn-base (string, optioneel) — map waaruit de core en modules worden geladen. Standaard: de map van loader.js.
• data-rc-core-url (string, optioneel) — vast adres van de core in plaats van core.<hash>.js uit dezelfde map. Alleen voor bijzondere gevallen, zoals een eigen mirror.
• data-rc-transport (http, optioneel) — dwingt vanaf het begin de HTTP-fallback af. Werkt op elk element dat bij het starten in het document staat; als alternatief ReactiveChatSettings.transport = 'http'. Via boot heeft dit geen effect.
• data-rc-max-retries (getal, standaard 2) — nieuwe pogingen als de core niet laadt (tussenpoos 300 ms × poging).

Taal, thema, beweging

• data-rc-locale (string, standaard auto) — de, en of pl. auto gebruikt <html lang>, daarna de browsertaal, anders Engels. Andere talen vallen terug op Engels.
• data-rc-theme (auto | light | dark, standaard auto) — auto volgt de licht/donkermodus van uw pagina, anders het systeem.
• data-rc-motion (auto | reduced | full, standaard auto) — animaties; auto volgt prefers-reduced-motion.
• data-rc-strings (JSON-object, standaard {}) — afzonderlijke teksten overschrijven, bijvoorbeeld {"a11y.launcher":"Open help"}. Normaal beheert u teksten in uw account (Aanpassing).

Weergave en positie

• data-rc-position (right | left, standaard right) — hoek van chatknop en venster.
• data-rc-offset (JSON, standaard {"x":20,"y":20}) — afstand tot de rand in pixels, boven op het veilige gebied.
• data-rc-z-index (getal, standaard 2147483000).
• data-rc-avoid-overlap (boolean, standaard true) — wijkt uit voor vaste balken onderaan (cookiebanners, winkelmandbalken).
• data-rc-hide-launcher (boolean, standaard false) — geen chatpictogram; het venster opent alleen via uw eigen links of de JavaScript-API. Teasers worden dan onderdrukt. Geldt ongeacht de accountinstelling.
• data-rc-auto-open (boolean, standaard false) — opent het venster na het starten.
• data-rc-isolation (shadow | iframe, standaard shadow) — de widget bevindt zich in een gesloten shadow DOM; iframe rendert het venster in een frame, voor pagina’s met zeer agressieve globale stijlen.
• data-rc-brand (JSON-object) — merkkleur en vorm van de chatknop. De loader leest hieruit direct primary (#rrggbb), onPrimary, radius en launcher.shape (circle, rounded, square, bubble, leaf), launcher.size (44–72) en launcher.size_m; de core controleert de rest. Het fragment uit uw account bevat deze waarden al — zonder geldige primary toont de loader geen tijdelijke knop maar wacht totdat de kleur van de server komt (geen kleursprong, maar een latere knop). Als het object alleen deze beginvelden bevat, geldt na het verbinden het merk uit uw account; bij extra velden (bijvoorbeeld accent) geldt uw eigen instelling. Details onder Aanpassing.
• data-rc-logo (JSON-object) — src, placement (launcher, header, both), height, alt.
• data-rc-custom-css (string) — eigen CSS binnen de shadow DOM. Zie Aanpassing.

Laden en gedrag

• data-rc-load-triggers (lijst, standaard alle vijf) — wanneer de core wordt geladen: idle (de browser heeft niets te doen), pointer (muis of vinger op de chatknop), command (een andere API-opdracht dan boot, update, track, identify), frustration (signaal van MousePlayer), push. De eerste trigger geldt.
• data-rc-idle-timeout-ms (getal, standaard 3000) — time-out voor de trigger idle.
• data-rc-consent (auto | granted | denied, standaard auto) — toestemmingsstatus. auto vraagt uw toestemmingsplatform (IAB TCF v2 via __tcfapi, anders consented.eu); granted/denied legt de status vast. Zie Privacyintegratie.
• data-rc-dom-spiegel (boolean, standaard true) — false stuurt geen paginatekst naar de assistent en schakelt “Laat zien” uit.
• data-rc-promo (boolean, standaard true) — false verbergt de promotiekaart op deze pagina.
• data-rc-launcher-selector (CSS-selector) — klikken op passende elementen opent of sluit het venster. Werkt pas zodra de core geladen is; gebruik voor links die direct moeten werken data-rc-open (hieronder).
• data-rc-dnd (boolean, standaard false) — beginwaarde voor “Niet storen”.
• data-rc-session-ttl-ms (getal, standaard 1800000) — hoelang een MousePlayer-sessie wordt overgenomen.
• data-rc-debug (boolean, standaard false) — diagnostische uitvoer in de console. Gelijkwaardig: localStorage.setItem('rc_debug', '1') in de browser.

Attributen op andere elementen van uw pagina

De chat openen (werkt meteen, ook voordat de core geladen is):

• data-rc-open — op elk element; een klik opent de chat naast het element. data-rc-open="corner" opent deze in de hoek.
• href="#rc-open" of href="#reactive-chat" — hetzelfde voor links.
• data-rc-anchor="none" — zoals corner.
• data-rc-message — tekst die in het invoerveld wordt geschreven maar niet verzonden (maximaal 200 tekens).
• data-rc-tab — msg, home of help: welk tabblad vooraan staat.

Uitgebreid: De chat openen vanuit een eigen link of knop.

Privacytekst:

• data-rc-privacy — tijdelijke aanduiding voor het gedeelte over reactive.chat in uw privacyverklaring, met data-lang, data-heading (2–6) en data-email. Status in data-rc-privacy-state (loading, done, error). Zie Privacyintegratie.

Paginatekst uitsluiten:

• data-rc-private of gelijkwaardig data-rc-ignore — deze deelboom wordt nooit als paginatekst naar de assistent gestuurd en nooit door “Laat zien” als doel gebruikt.

<aside data-rc-private>
  Internal notes the assistant should not read.
</aside>

URL-parameters

• ?rc_ab=A tot E — dwingt voor kwaliteitscontroles een variant van een lopende A/B-test af (zie Aanpassing).

De widget verwerkt bij het laden geen andere parameters in het adres.

Meerdere keren insluiten

Als de loader tweemaal op de pagina staat (bijvoorbeeld via een sjabloon en een tagmanager), start alleen de eerste met een geldige sitesleutel; de tweede doet niets. Een eerste tag met een ongeldige sleutel houdt een correcte tweede niet tegen.

Volgende: JavaScript-API · Gebeurtenissen