Tag script – dokumentacja: wszystkie atrybuty i źródła konfiguracji

Widżet można w całości skonfigurować atrybutami w tagu script – bez skryptu inline, a więc także przy ścisłej Content Security Policy. Kto woli pisać JavaScript, ustawia te same pola przez window.ReactiveChatSettings albo ReactiveChat('boot', …).

Wygląd, teksty, stronę startową, reguły i przewodniki ustawiasz zwykle w koncie; przychodzą z serwera przy nawiązaniu połączenia. Atrybuty opisane tutaj służą temu, co ma obowiązywać na danej stronie. Wszystkie opcje wyglądu znajdziesz w Dostosowaniu.

Cztery źródła konfiguracji i ich pierwszeństwo

Późniejsze źródło wygrywa; łączenie jest płaskie (pole obiektowe takie jak brand jest zastępowane w całości, a nie scalane głęboko):

1. Wartości domyślne widżetu
2. Atrybuty data-rc-* w tagu loadera
3. window.ReactiveChatSettings (ustawione przed loaderem)
4. Wywołania ReactiveChat('boot', {...}) z kolejki, w ich kolejności

Pola, których widżet nie zna, są odrzucane – atrybut z literówką po prostu po cichu nie działa.

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

Jak odczytywane są wartości atrybutów

Nazwa jest zamieniana z zapisu z łącznikami na camelCase: data-rc-site-key → siteKey. Typ wynika z wartości domyślnej:

• Ciąg znaków – przejmowany bez zmian.
• Wartość logiczna – fałszem są tylko "false" i "0"; wszystko inne, także pusty atrybut, jest prawdą.
• Lista – rozdzielana przecinkami, np. "idle,pointer".
• Liczba lub obiekt – odczytywane jako JSON. Jeśli JSON jest nieprawidłowy, zostaje wartość domyślna.

Odczytywany jest tylko tag, który jest właśnie wykonywany (document.currentScript). Dlatego osadzaj loader jako klasyczny skrypt, a nie z type="module".

Obowiązkowe

• data-rc-site-key (String, obowiązkowy) – klucz twojego projektu, do znalezienia w koncie w sekcji Projekt → Instalacja. Wzorzec [A-Za-z0-9_-]{8,64}. Jeśli go brakuje albo jest nieprawidłowy, nic się nie uruchamia – bez komunikatu w konsoli.

Połączenie i dostarczanie

• data-rc-ws-url (String, opcjonalny) – adres połączenia czatu. Bez podania wyprowadzany z miejsca, z którego pochodzi loader.js (cdn.reactive.chat → wss://ws.reactive.chat/rc_wss/). Obowiązkowy, gdy tylko nie ładujesz loader.js z cdn.reactive.chat, oraz przy domenach z dwuczłonową końcówką, takich jak .co.uk. Zobacz Transport.
• data-rc-cdn-base (String, opcjonalny) – katalog, z którego doładowywane są rdzeń i moduły. Domyślnie: katalog loader.js.
• data-rc-core-url (String, opcjonalny) – stały adres rdzenia zamiast core.<hash>.js z tego samego katalogu. Tylko w szczególnych przypadkach, np. przy własnym serwerze lustrzanym.
• data-rc-transport (http, opcjonalny) – wymusza tryb awaryjny HTTP od początku. Działa przy każdym elemencie, który jest w dokumencie w chwili startu; alternatywnie ReactiveChatSettings.transport = 'http'. Przez boot nie działa.
• data-rc-max-retries (liczba, domyślnie 2) – liczba ponownych prób, gdy rdzeń się nie ładuje (odstęp 300 ms × numer próby).

Język, motyw, animacje

• data-rc-locale (String, domyślnie auto) – de, en albo pl. auto bierze <html lang>, potem język przeglądarki, w przeciwnym razie angielski. Inne języki przechodzą na angielski.
• data-rc-theme (auto | light | dark, domyślnie auto) – auto podąża za jasnym/ciemnym motywem twojej strony, w przeciwnym razie za systemem.
• data-rc-motion (auto | reduced | full, domyślnie auto) – animacje; auto podąża za prefers-reduced-motion.
• data-rc-strings (obiekt JSON, domyślnie {}) – nadpisuje pojedyncze teksty, np. {"a11y.launcher":"Otwórz pomoc"}. Poza tym teksty edytujesz w koncie (Dostosowanie).

Wygląd i położenie

• data-rc-position (right | left, domyślnie right) – róg launchera i okna.
• data-rc-offset (JSON, domyślnie {"x":20,"y":20}) – odstęp od krawędzi w pikselach, dodatkowo do safe area.
• data-rc-z-index (liczba, domyślnie 2147483000).
• data-rc-avoid-overlap (wartość logiczna, domyślnie true) – omija przyklejone paski przy dolnej krawędzi (banery cookies, paski koszyka).
• data-rc-hide-launcher (wartość logiczna, domyślnie false) – bez ikony czatu; okno otwiera się tylko przez własne linki albo API JavaScript. Teasery są wtedy wstrzymywane. Obowiązuje niezależnie od ustawienia w koncie.
• data-rc-auto-open (wartość logiczna, domyślnie false) – otwiera okno po starcie.
• data-rc-isolation (shadow | iframe, domyślnie shadow) – widżet żyje w zamkniętym shadow DOM; iframe renderuje okno w ramce, dla stron z bardzo agresywnymi stylami globalnymi.
• data-rc-brand (obiekt JSON) – kolor marki i kształt launchera. Loader od razu odczytuje z niego primary (#rrggbb), onPrimary, radius oraz launcher.shape (circle, rounded, square, bubble, leaf), launcher.size (44–72) i launcher.size_m; resztę sprawdza rdzeń. Fragment kodu z konta zawiera już te wartości – bez prawidłowego primary loader nie pokazuje zastępczego przycisku, tylko czeka, aż kolor przyjdzie z serwera (bez przeskoku koloru, ale przycisk pojawia się później). Jeśli obiekt zawiera tylko te pola startowe, po nawiązaniu połączenia obowiązuje marka z konta; z dodatkowymi polami (np. accent) obowiązuje twoja. Szczegóły w Dostosowaniu.
• data-rc-logo (obiekt JSON) – src, placement (launcher, header, both), height, alt.
• data-rc-custom-css (String) – własny CSS wewnątrz shadow DOM. Zobacz Dostosowanie.

Ładowanie i zachowanie

• data-rc-load-triggers (lista, domyślnie wszystkie pięć) – kiedy doładowywany jest rdzeń: idle (przeglądarka ma wolny czas), pointer (mysz lub palec na launcherze), command (polecenie API inne niż boot, update, track, identify), frustration (sygnał z MousePlayera), push. Wygrywa pierwszy wyzwalacz.
• data-rc-idle-timeout-ms (liczba, domyślnie 3000) – czas dla wyzwalacza idle.
• data-rc-consent (auto | granted | denied, domyślnie auto) – stan zgody. auto pyta twoją platformę zgód (IAB TCF v2 przez __tcfapi, w przeciwnym razie consented.eu); granted/denied ustala go na stałe. Zobacz Ochrona danych.
• data-rc-dom-spiegel (wartość logiczna, domyślnie true) – false nie wysyła asystentowi tekstu strony i wyłącza „Pokaż mi”.
• data-rc-promo (wartość logiczna, domyślnie true) – false ukrywa kartę promocyjną na tej stronie.
• data-rc-launcher-selector (selektor CSS) – kliknięcia pasujących elementów przełączają okno. Działa dopiero po załadowaniu rdzenia; dla linków, które mają działać od razu, użyj data-rc-open (niżej).
• data-rc-dnd (wartość logiczna, domyślnie false) – wartość początkowa dla „Nie przeszkadzać”.
• data-rc-session-ttl-ms (liczba, domyślnie 1800000) – jak długo przejmowana jest sesja MousePlayera.
• data-rc-debug (wartość logiczna, domyślnie false) – komunikaty diagnostyczne w konsoli. Równoważnie: localStorage.setItem('rc_debug', '1') w przeglądarce.

Atrybuty innych elementów twojej strony

Otwieranie czatu (działa od razu, także zanim rdzeń zostanie załadowany):

• data-rc-open – przy dowolnym elemencie; kliknięcie otwiera czat obok elementu. data-rc-open="corner" otwiera go w rogu.
• href="#rc-open" albo href="#reactive-chat" – to samo dla linków.
• data-rc-anchor="none" – jak corner.
• data-rc-message – tekst, który jest wpisywany w pole wiadomości, ale nie jest wysyłany (najwyżej 200 znaków).
• data-rc-tab – msg, home albo help: która zakładka jest na wierzchu.

Szczegółowo: Otwieranie czatu własnym linkiem lub przyciskiem.

Tekst o ochronie danych:

• data-rc-privacy – element zastępczy dla sekcji o reactive.chat w twojej polityce prywatności, z data-lang, data-heading (2–6) i data-email. Stan w data-rc-privacy-state (loading, done, error). Zobacz Ochrona danych.

Wykluczanie tekstu strony:

• data-rc-private albo równoważnie data-rc-ignore – to poddrzewo nigdy nie jest wysyłane asystentowi jako tekst strony i nigdy nie jest wskazywane przez „Pokaż mi”.

<aside data-rc-private>
  Wewnętrzne uwagi, których asystent nie powinien czytać.
</aside>

Parametry URL

• ?rc_ab=A do E – wymusza w celu kontroli jakości wariant trwającego testu A/B (zobacz Dostosowanie).

Innych parametrów w adresie widżet przy ładowaniu nie analizuje.

Wielokrotne osadzenie

Jeśli loader jest na stronie dwa razy (np. przez szablon i menedżer tagów), uruchamia się tylko pierwszy z prawidłowym kluczem witryny; drugi nic nie robi. Pierwszy tag z nieprawidłowym kluczem nie blokuje poprawnego drugiego.

Dalej: API JavaScript · Zdarzenia