Avvio rapido: una chat funzionante in cinque minuti

1. Ottenere la chiave del sito e inserire il dominio

Nell’account, in Progetto → Installazione, trova il codice di incorporamento con la chiave del sito. In Origini consentite, inserisca ogni dominio su cui deve funzionare la chat (i sottodomini sono inclusi: your-company.com comprende www.your-company.com e shop.your-company.com). Il server della chat accetta connessioni solo da questi domini.

2. La singola riga

Inserisca il codice dell’account prima di </body> o nel <head>:

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

Il codice dell’account contiene anche data-rc-brand con il colore del marchio, affinché il pulsante della chat appaia subito nel colore corretto. È quindi preferibile copiarlo senza modifiche. Tutti gli attributi: Riferimento del tag script.

3. Estendere la Content Security Policy

Se il Suo sito imposta una CSP, aggiunga:

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

Perché servono entrambe le voci connect-src: Sicurezza e CSP.

4. Verificare

Apra la pagina con gli strumenti per sviluppatori:

• Elementi: alla fine di <body> compare <reactive-chat>.
• Rete: loader.js, poi (al più tardi passando con il puntatore sul pulsante della chat) core.<hash>.js e una connessione WebSocket a wss://ws.reactive.chat/rc_wss/ con codice di stato 101.
• Console: dopo il caricamento, ReactiveChat('getSession') restituisce { sessionId, visitorId, tabId }.

Scriva un messaggio di prova: compare nel pannello dell’account. Se non viene stabilita alcuna connessione, vedere Risoluzione dei problemi.

Varianti

Tramite un tag manager: il caricatore legge gli attributi dal proprio elemento <script>. Crei quindi un tag che inserisca un vero <script src> con gli attributi, oppure imposti prima la configurazione:

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

Con una CSP rigorosa, lo script inline richiede un nonce, che deve essere impostato dal tag manager.

Distribuire loader.js dal proprio server: se carica il file da una Sua directory, indichi esplicitamente l’indirizzo della chat; altrimenti il widget cerca il server della chat sotto il Suo dominio e non arriva alcun messaggio, senza che compaia alcun errore:

<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>

Con data-rc-cdn-base, il caricatore continua a recuperare da noi il nucleo corrispondente. Attenzione: una copia di loader.js non viene aggiornata; quando cambia il nucleo, deve rinnovarla personalmente. L’incorporamento da cdn.reactive.chat o tramite un dominio personalizzato rimane la modalità consigliata.

Domini con una terminazione in due parti (.co.uk, .com.au…) quando distribuisce il file dal Suo server: imposti sempre esplicitamente data-rc-ws-url.

Applicazioni a pagina singola: incorpori una sola volta nella struttura dell’app; vedere SPA e cambi di pagina.

App mobili: App mobili.

Passi successivi

• Riconoscere gli utenti autenticati: ReactiveChat('identify', …) con una firma dal Suo server — Identificare i visitatori.
• Pulsanti e link personalizzati: <a href="#rc-open">Help</a> — Aprire la chat da un link personalizzato.
• Reagire agli eventi: ReactiveChat('on', 'message', …) — Eventi.
• Collegare il backend: Webhook, API server, Dati dei clienti.
• Aspetto e comportamento: Personalizzazione.