Osadzenie widgetu

Wersja krótka

Wstaw tę linię w nagłówek swojej strony i zamień SITE_KEY na swój klucz:

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

To wszystko. Loader waży 2,7 kB i dociąga rdzeń dopiero wtedy, gdy przeglądarka ma czas albo gdy odwiedzający dotknie launchera.

Jeśli serwujesz loader.js samodzielnie, potrzebujesz jednej linii więcej

Niektórzy wolą ładować skrypt z własnego katalogu niż z naszej sieci dostarczania — z powodu polityki bezpieczeństwa, środowiska testowego albo po prostu z przyzwyczajenia. To działa, ale wtedy trzeba wyraźnie podać adres połączenia czatu:

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

Dlaczego: bez tego widget wyprowadza adres z miejsca, z którego przyszedł skrypt. Jeśli była to twoja domena, szuka czatu również tam — i nic nie znajduje.

A objawia się to źle. Launcher stoi, okno się otwiera, kolor i język się zgadzają, wszystko wygląda na gotowe. Tylko żadna wiadomość nie dochodzi. Nie ma komunikatu o błędzie: połączenie niezrażenie ponawia próby w tle, i właśnie to ukrywa usterkę. Dopiero konsola przeglądarki podaje nazwę hosta, którego szuka na próżno.

Wartość powyżej jest ta sama dla wszystkich kont u nas. Własną wpisuje tylko ten, kto sam prowadzi serwer.

Przez subdomenę własnej strony

Jeśli czat ma działać jako first-party przez własną subdomenę (np. chat.twoja-firma.pl zamiast cdn.reactive.chat), konfigurację proxy opisuje instrukcja Własna domena. Konto pokaże potem pasujący fragment kodu.

Gdy WebSocket jest zablokowany

Jeśli sieć nie przepuszcza WebSocket, np. za firmowym proxy, czat automatycznie działa dalej przez zwykłe HTTPS. Do tego twoja Content Security Policy potrzebuje oprócz adresu wss:// także adresu https:// podanego niżej. Kiedy tryb awaryjny się włącza i jak wymusić go do testów, opisuje Tryb awaryjny HTTP.

Własne linki do czatu i karta promocyjna

Każdy link lub przycisk na twojej stronie może otworzyć czat, a okno pojawi się tuż obok niego: Otwieranie czatu własnym linkiem lub przyciskiem. Jak pokazać w czacie kartę z własną ofertą, np. z płatnym planem, opisuje Karta promocyjna w czacie.

Automatyczny tekst o ochronie danych

Mały element na twojej stronie z polityką prywatności wyświetla odpowiedni tekst o czacie – zawsze zgodny z ustawieniami projektu i w języku strony: Automatyczne osadzanie tekstu o ochronie danych.

Dlaczego nie ma skryptu inline

Zwykła forma u konkurencji to inline <script>. Pod ścisłym Content Security Policy bez unsafe-inline zostaje zablokowany, zanim wykona się jedna jego linia. Forma atrybutowa powyżej nie potrzebuje żadnego.

Co twoja polityka musi dodatkowo dopuścić:

• script-src adres dostarczania, tutaj cdn.reactive.chat
• connect-src adres WebSocket, tutaj wss://ws.reactive.chat
• connect-src ten sam adres także z https://, tutaj https://ws.reactive.chat – korzystają z niego formularz offline i tryb awaryjny HTTP, gdy firmowy proxy blokuje WebSocket

Ustawienia przy tagu script

1. data-rc-site-key — wymagane. Bez niego nic się nie uruchomi i tak ma być.
2. data-rc-locale — de, en albo pl. Gdy brakuje, decyduje przeglądarka.
3. data-rc-brand — kolor twojej marki. Tekst jest przeliczany, aż będzie czytelny.
4. data-rc-ws-url — wymagane, gdy tylko nie ładujesz loader.js z cdn.reactive.chat. Zobacz sekcję powyżej.

Reszta znajduje się w przeglądzie funkcji i w cenniku.