Szybki start: działający czat w pięć minut

1. Pobierz klucz witryny i wpisz domenę

W koncie, w sekcji Projekt → Instalacja, znajdziesz swój fragment kodu z kluczem witryny. W polu Dozwolone źródła wpisz każdą domenę, na której ma działać czat (subdomeny są uwzględnione: deine-firma.de obejmuje www.deine-firma.de i shop.deine-firma.de). Serwer czatu przyjmuje połączenia tylko z tych domen.

2. Ta jedna linia

Wstaw fragment kodu z konta przed </body> albo w <head>:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-locale="de"
        async></script>

Fragment kodu z konta zawiera dodatkowo data-rc-brand z kolorem twojej marki, aby launcher od razu pojawił się we właściwym kolorze. Najlepiej więc przejmij go bez zmian. Wszystkie atrybuty: Tag script – dokumentacja.

3. Uzupełnij Content Security Policy

Jeśli twoja strona ustawia CSP, dodaj:

script-src  https://cdn.reactive.chat;
connect-src wss://ws.reactive.chat https://ws.reactive.chat;
img-src     data: https:;

Dlaczego potrzebne są oba wpisy connect-src: Bezpieczeństwo i CSP.

4. Sprawdź

Otwórz swoją stronę z narzędziami deweloperskimi:

• Elementy: na końcu <body> znajduje się <reactive-chat>.
• Sieć: loader.js, potem (najpóźniej po najechaniu na launcher) core.<hash>.js i połączenie WebSocket z wss://ws.reactive.chat/rc_wss/ z kodem statusu 101.
• Konsola: ReactiveChat('getSession') zwraca po załadowaniu { sessionId, visitorId, tabId }.

Napisz wiadomość testową; pojawi się w panelu twojego konta. Jeśli połączenie nie dochodzi do skutku, pomoże Rozwiązywanie problemów.

Warianty

Przez menedżer tagów: loader odczytuje swoje atrybuty z własnego elementu <script>. Utwórz więc tag, który wstawia prawdziwy <script src> z atrybutami, albo ustaw konfigurację wcześniej:

<script>
  window.ReactiveChatSettings = { siteKey: 'SITE_KEY', locale: 'de' };
</script>
<script src="https://cdn.reactive.chat/loader.js" async></script>

Przy ścisłej CSP skrypt inline potrzebuje nonce, który musi ustawić twój menedżer tagów.

Samodzielne serwowanie loader.js: jeśli ładujesz plik z własnego katalogu, podaj wyraźnie adres czatu – w przeciwnym razie widżet szuka serwera czatu w twojej domenie i żadna wiadomość nie dociera, a przy tym nie pojawia się żaden komunikat o błędzie:

<script src="/js/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-ws-url="wss://ws.reactive.chat/rc_wss/"
        data-rc-cdn-base="https://cdn.reactive.chat/"
        async></script>

Dzięki data-rc-cdn-base loader nadal pobiera pasujący rdzeń od nas. Pamiętaj: kopia loader.js nie jest aktualizowana; przy zmianach rdzenia musisz ją odnowić sam. Zalecane pozostaje osadzanie z cdn.reactive.chat albo przez własną domenę.

Domeny z dwuczłonową końcówką (.co.uk, .com.au …) przy własnym serwowaniu: zawsze ustawiaj data-rc-ws-url wyraźnie.

Aplikacje jednostronicowe: osadź raz w szkielecie aplikacji, zobacz SPA i zmiany stron.

Aplikacje mobilne: Aplikacje mobilne.

Kolejne kroki

• Rozpoznawanie zalogowanych użytkowników: ReactiveChat('identify', …) z podpisem z twojego serwera – Identyfikacja odwiedzających.
• Własne przyciski i linki: <a href="#rc-open">Pomoc</a> – Otwieranie czatu własnym linkiem.
• Reagowanie na zdarzenia: ReactiveChat('on', 'message', …) – Zdarzenia.
• Podłączenie backendu: Webhooki, API serwera, Dane klientów.
• Wygląd i zachowanie: Dostosowanie.