Incorporare il widget

In breve

Inserisca questa riga nell’head della pagina e sostituisca SITE_KEY con la Sua chiave:

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

È tutto. Il caricatore pesa 3,48 kB e recupera il nucleo solo quando il browser ha tempo o quando il visitatore tocca il pulsante della chat.

Se distribuisce personalmente loader.js, serve un’altra riga

Alcuni preferiscono caricare lo script dalla propria directory anziché dalla nostra rete di distribuzione: per una policy, per un ambiente di staging o semplicemente per abitudine. Funziona, ma deve indicare esplicitamente la connessione della chat:

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

Perché: altrimenti il widget ricava l’indirizzo dalla provenienza dello script. Se è il Suo dominio, cerca anche lì la chat e non trova nulla.

E il malfunzionamento è insidioso. Il pulsante compare, la finestra si apre, colore e lingua sono corretti, tutto sembra pronto. Solo che non arriva mai alcun messaggio. Non compare un errore: la connessione continua a riprovare in background, nascondendo proprio così il problema. Solo la console del browser indica l’host cercato invano.

Il valore sopra è lo stesso per tutti i nostri account. Solo se gestisce personalmente il server deve inserire il Suo.

Tramite un sottodominio del Suo sito

Se la chat deve funzionare first-party tramite un Suo sottodominio (ad esempio chat.your-company.com anziché cdn.reactive.chat), la configurazione del proxy è descritta nella guida al dominio personalizzato. L’account mostra poi il codice corrispondente.

Quando i WebSocket sono bloccati

Se una rete non lascia passare un WebSocket, ad esempio dietro un proxy aziendale, la chat prosegue automaticamente tramite normali richieste HTTPS. Per questo la Content Security Policy richiede l’indirizzo https:// indicato sotto oltre a quello wss://. Quando si applica il fallback e come forzarlo per i test è descritto in Fallback HTTP.

Aprire la chat dai Suoi link e mostrare una scheda promozionale

Qualsiasi link o pulsante della pagina può aprire la chat, con la finestra che compare proprio accanto: Aprire la chat da un link o pulsante personalizzato. Come mostrare nella chat una scheda per una Sua offerta, ad esempio il piano a pagamento, è descritto in La scheda promozionale nella chat.

Incorporare automaticamente il testo sulla privacy

Un piccolo elemento nella pagina dell’informativa mostra il testo pertinente sulla chat, sempre conforme alle impostazioni del progetto e nella lingua della pagina: Incorporare automaticamente il testo sulla privacy.

Perché non c’è uno script inline

La forma abituale fornita dai concorrenti è uno <script> inline. Con una Content Security Policy rigorosa senza unsafe-inline viene bloccato prima che ne venga eseguita una sola riga. La forma con attributi mostrata sopra non ne richiede alcuno.

Che cos’altro deve consentire la policy:

• script-src l’host di distribuzione, qui cdn.reactive.chat
• connect-src l’indirizzo WebSocket, qui wss://ws.reactive.chat
• connect-src anche lo stesso indirizzo con https:// come schema, qui https://ws.reactive.chat — lo usano il modulo offline e il fallback HTTP quando un proxy aziendale blocca i WebSocket

Le impostazioni nel tag script

1. data-rc-site-key: obbligatoria. Senza non parte nulla, volutamente.
2. data-rc-locale: de, en o pl. Se manca, decide il browser.
3. data-rc-brand: il colore del marchio. Il testo viene ricalcolato finché è leggibile.
4. data-rc-ws-url: obbligatorio quando non carica loader.js da cdn.reactive.chat. Vedere la sezione sopra.

Tutto il resto è nella panoramica delle funzionalità e nella pagina dei prezzi.

Approfondimenti nella documentazione

Passo dopo passo: Avvio rapido. Ogni attributo del tag script con tipo e valore predefinito: Riferimento del tag script. Tutti i capitoli sono nella documentazione.