Architektura i przebieg

Części

W przeglądarce twoich odwiedzających:

• loader.js – mała część ładująca o rozmiarze kilku kilobajtów. Odczytuje konfigurację, sprawdza zgodę, rysuje zastępczy launcher w jego docelowym miejscu (bez przesunięcia układu) i tworzy window.ReactiveChat z kolejką poleceń. Nic więcej nie robi.
• Rdzeń (core.<hash>.js) – okno czatu, połączenie, maskowanie danych osobowych, reguły. Jest doładowywany dopiero wtedy, gdy zadziała wyzwalacz: przeglądarka ma wolny czas, mysz lub palec na launcherze, polecenie API, sygnał frustracji z MousePlayera. Większość odwiedzających nigdy nie otwiera czatu, więc nie ładuje go od razu.
• Moduły na żądanie – przewodniki po produkcie, tekst o ochronie danych, funkcje sklepu; każdy dopiero wtedy, gdy jest potrzebny.
• Izolacja – wszystko żyje w zamkniętym shadow DOM; style przez konstruowalne arkusze stylów, bez skryptów inline, bez eval, bez cookies.

Po stronie reactive.chat:

• Dostarczanie pod https://cdn.reactive.chat/ – loader, rdzeń, moduły.
• Serwer czatu pod wss://ws.reactive.chat/rc_wss/ – WebSocket z protokołem rc.v1; ten sam adres z https:// dla trybu awaryjnego HTTP, formularza offline, przesyłania plików, tekstu o ochronie danych i Smart Answer.
• Konto pod https://reactive.chat/app – ustawienia projektu, wygląd, baza wiedzy, panel twojego zespołu.
• API serwera pod https://reactive.chat/v1/ – REST i MCP dla twojego backendu.

Po twojej stronie (opcjonalnie):

• Twój backend podpisuje tożsamość zalogowanych użytkowników, odpowiada na zapytania o dane klientów, odbiera webhooki i wywołuje API serwera.
• Twoje proxy dostarcza wszystko przez własną subdomenę (Własna domena).

Przebieg otwarcia strony

1. Przeglądarka ładuje loader.js (asynchronicznie, niczego nie blokuje).
2. Loader odczytuje data-rc-*, ReactiveChatSettings i zakolejkowane wywołania boot, sprawdza klucz witryny i zgodę oraz rysuje element zastępczy.
3. Zadziała wyzwalacz; loader ładuje rdzeń z tego samego katalogu.
4. Rdzeń przejmuje element zastępczy i kolejkę oraz wykonuje zakolejkowane polecenia po kolei.
5. Otwiera połączenie i wysyła init z kluczem witryny, identyfikatorami, językiem, zgodą, ewentualnie podpisaną tożsamością i kontekstem strony.
6. Serwer sprawdza pochodzenie, projekt i tożsamość i odpowiada init_ok: wygląd i teksty z konta, reguły, funkcje, limity, dotychczasowa historia.
7. Widżet jest gotowy (zdarzenie ready). Zmiany stron w aplikacjach jednostronicowych zgłasza sam.

Przebieg pytania

1. Odwiedzający pisze; dane osobowe są maskowane w przeglądarce, a wiadomość ma unikalny identyfikator.
2. Serwer ją zapisuje (powtórzenia rozpoznaje po identyfikatorze), maskuje ponownie i potwierdza echem.
3. Asystent AI szuka w twojej bazie wiedzy – przy pytaniach potwierdzonego użytkownika o zamówienia dodatkowo przez endpoint danych klientów – i przesyła odpowiedź strumieniowo. Kiedy przekazuje rozmowę twojemu zespołowi, ustalasz w koncie (Podręcznik).
4. Równolegle zdarzenia trafiają przez kolejkę do webhooków i integracji. Czat nigdy na nie nie czeka.

Wersje i dostarczanie

• loader.js nie ma numeru wersji w nazwie i jest podmieniany przy aktualizacjach. Dlatego osadzaj go z cdn.reactive.chat (albo przez swoje proxy), a nie jako kopię.
• Rdzeń nazywa się core.<hash>.js; hash pochodzi z jego zawartości, a każdy loader zna dokładnie swój rdzeń. Dzięki temu loader i rdzeń zawsze do siebie pasują, a rdzeń może długo leżeć w pamięci podręcznej.
• Konfiguracja (wygląd, teksty, reguły, przewodniki) przychodzi z serwera przy każdym nawiązaniu połączenia. Zmiany w koncie nie wymagają nowego fragmentu kodu; działają po krótkim czasie (zależnie od ustawienia do minuty).
• Wersja protokołu to 1. Nowe pola mogą dochodzić, nieznane są ignorowane.
• ReactiveChat.version podaje po załadowaniu wersję rdzenia.

Gdzie co ustawiasz

• W koncie: wygląd, teksty, strona startowa, reguły, przewodniki, testy A/B, persona AI (Dostosowanie), zespół, baza wiedzy, kanały (Podręcznik).
• W tagu script: to, co ma obowiązywać na danej stronie (Tag script – dokumentacja).
• W skrypcie strony: tożsamość, kontekst, otwieranie z własnych elementów (API JavaScript).
• Na twoim serwerze: podpisy, dane klientów, webhooki, API (Tożsamość, Dane klientów, Webhooki, API serwera).

Dalej: Szybki start