Aprire la chat da un link o pulsante proprio

Oltre al fumetto della chat nell’angolo, i Suoi visitatori possono aprire la chat da un link o pulsante sul Suo sito web, ad esempio «Aiuto e assistenza» nella barra laterale o «Domanda sul mio piano» nella pagina dei prezzi. La finestra della chat si apre proprio accanto a quell’elemento.

Non serve codice aggiuntivo: basta il normale codice di incorporamento descritto in Incorporare il widget. Trova anche un esempio da copiare nell’account in Progetto → Installazione → Aprire la chat da un link proprio.

Il caso più semplice

Un link che rimanda a #rc-open:

<a href="#rc-open">Help & support</a>

Oppure un pulsante con l’attributo data-rc-open:

<button type="button" data-rc-open>Open chat</button>

data-rc-open funziona su qualsiasi elemento, non solo sui pulsanti. Oltre a #rc-open, il widget accetta anche #reactive-chat come destinazione del link.

Il clic viene rilevato anche se il widget non ha ancora terminato il caricamento: la finestra si apre non appena è pronta.

Dove compare la finestra

• A destra dell’elemento, se c’è spazio sufficiente, altrimenti a sinistra. Il bordo superiore della finestra si allinea all’elemento.
• Sempre interamente visibile: la finestra rimane nell’area visibile e segue l’elemento quando si scorre la pagina o si ridimensiona la finestra del browser.
• Sugli schermi stretti (meno di 480 pixel di larghezza, cioè la maggior parte degli smartphone) la chat si apre a schermo intero come di consueto. Non c’è spazio accanto all’elemento.
• Come pannello laterale: se in Aspetto la finestra della chat è impostata come pannello laterale a tutta altezza, si apre lì e non accanto all’elemento.
• Se la chat è già aperta, la finestra si sposta verso l’ultimo link cliccato.
• Quando la chat si chiude (anche con il tasto Esc), il focus della tastiera torna al link o pulsante che l’ha aperta.

Per aprire la finestra nella posizione abituale nell’angolo, scriva data-rc-open="corner". data-rc-anchor="none" ha lo stesso effetto:

<button type="button" data-rc-open="corner">Open chat</button>

Precompilare il campo del messaggio

Con data-rc-message, all’apertura della chat il campo del messaggio contiene già una frase. Non viene inviata: il visitatore può completarla, modificarla o eliminarla e la invia personalmente.

<button type="button" data-rc-open data-rc-message="I have a question about my plan">
  Question about my plan
</button>

Vengono usati fino a 200 caratteri. La chat passa alla scheda della conversazione.

Scegliere una scheda

Se la Sua chat ha più schede, data-rc-tab decide quale mostrare in primo piano all’apertura:

• msg – la conversazione,
• home – la schermata iniziale,
• help – gli articoli di aiuto.

<a href="#rc-open" data-rc-tab="help">Browse help articles</a>

Se la Sua chat non dispone della scheda indicata (ad esempio help senza articoli di aiuto), si apre semplicemente come di consueto.

Aprire la chat dal Suo JavaScript

Le stesse opzioni sono disponibili tramite una chiamata. anchor è l’elemento accanto al quale deve comparire la finestra; message e tab sono facoltativi:

document.querySelector('#my-button').addEventListener('click', function (ev) {
  ReactiveChat('open', {
    anchor: ev.currentTarget,
    message: 'I have a question about my plan',
    tab: 'msg'
  });
});

Senza anchor la finestra si apre nella posizione abituale. ReactiveChat('open') senza opzioni si comporta come prima. Se l’elemento stesso contiene data-rc-message o data-rc-tab, questi si applicano anche alla chiamata; ciò che passa esplicitamente nella chiamata ha la precedenza.

Se il Suo codice può essere eseguito prima del caricamento del codice di incorporamento, anteponga questa riga. Le chiamate vengono così messe in coda ed eseguite non appena il widget è pronto:

window.ReactiveChat = window.ReactiveChat || function () { (window.ReactiveChat.q = window.ReactiveChat.q || []).push(arguments); };

Nessun fumetto della chat

Se la chat deve essere raggiungibile solo tramite i Suoi link, ad esempio «Aiuto e assistenza» nella barra laterale, esistono due modi.

Nell’account: in Progetto → Aspetto → Marchio, imposti Visualizzazione su Solo tramite i Suoi link (nessuna icona della chat) e salvi. L’impostazione ha effetto senza modificare il Suo sito web. In seguito copi comunque di nuovo il codice di incorporamento in Progetto → Installazione: il nuovo codice non contiene più il colore del Suo marchio, quindi l’icona della chat non compare per un istante durante il caricamento della pagina. Finché il widget non riesce a recuperare l’impostazione dal server, ad esempio senza connessione o alla prima visita prima dell’accettazione dei cookie, l’icona compare comunque come misura di sicurezza, affinché la chat rimanga raggiungibile.

Nel codice di incorporamento: se l’icona non deve mai comparire, nasconda il fumetto della chat con data-rc-hide-launcher="true" nel codice di incorporamento. Questo attributo si applica sempre, qualunque sia l’impostazione nell’account:

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

Si assicuri poi che ogni pagina in cui i visitatori devono poter raggiungere la chat contenga almeno un link di questo tipo.

Risoluzione dei problemi

• Il clic aggiunge solo #rc-open all’indirizzo: il widget non è incorporato in questa pagina oppure non è stato caricato (ad esempio in assenza di consenso). Verifichi che il codice di incorporamento sia presente.
• La finestra si apre nell’angolo invece che accanto al link: sull’elemento è presente data-rc-open="corner" o data-rc-anchor="none"? La finestra del browser è più stretta di 480 pixel? La finestra della chat è impostata come pannello laterale?
• Il testo non compare nel campo del messaggio: l’attributo si chiama data-rc-message e deve trovarsi sull’elemento cliccato stesso.

Le altre impostazioni del codice di incorporamento sono descritte in Incorporare il widget. Come mostrare nella chat una scheda per la Sua offerta è spiegato in La scheda promozionale nella chat.

Approfondimenti nella documentazione

In dettaglio: Riferimento del tag script e API JavaScript. Tutti i capitoli sono nella documentazione.