Tour del prodotto e «Me lo mostri»

Mostrare anziché spiegare: un tour del prodotto guida i Suoi visitatori passo dopo passo nella Sua pagina. La pagina viene leggermente oscurata, un anello evidenzia l’elemento interessato e accanto compare un fumetto con il Suo testo e i pulsanti Zurück (indietro), Weiter (avanti) e Beenden (termina).

Creare tour

In /app/projects/{id}, scheda Testi e moduli, sezione Tour del prodotto, inserisca i tour come JSON. Lasciare vuoto e salvare rimuove tutti i tour.

[
  {
    "id": "erste-schritte",
    "name": "First steps",
    "steps": [
      { "selector": "#konto", "title": "Your account", "text": "Change your details here." },
      { "selector": ".rechnung", "text": "And the invoices are here.", "placement": "top" }
    ]
  }
]

Un tour ha:

• id – obbligatorio, univoco. Lettere minuscole, cifre, - e _, inizia con una lettera o cifra, massimo 48 caratteri. Lo usa per avviare il tour.
• name – un nome per Lei.
• steps – da 1 a 30 passi.

Un passo ha:

• selector – obbligatorio. Un selettore CSS per l’elemento sulla Sua pagina, massimo 300 caratteri.
• text – obbligatorio. Il testo nel fumetto.
• title – facoltativo, un titolo.
• placement – bottom (predefinito) o top. È una richiesta, non una promessa: se il fumetto non entra sopra, si sposta sotto.
• i18n_weiter, i18n_zurueck, i18n_fertig, i18n_ende – diciture personalizzate facoltative per i pulsanti Avanti, Indietro, Fatto e Termina.

Limiti: massimo 20 tour per progetto e 32 KB complessivi. Al salvataggio l’account verifica il JSON e indica l’errore se qualcosa non va.

Avviare un tour

Avvii i tour dal Suo codice, ad esempio tramite un pulsante «Avvia tour» o dopo il primo accesso:

ReactiveChat('tour', 'erste-schritte');

La chiamata restituisce true se il tour parte, altrimenti false. Può terminarlo con:

ReactiveChat('tourStop');

Il visitatore termina un tour con Beenden, nell’ultimo passo con Fertig (fatto), oppure con il tasto Esc. Un contatore mostra a quale passo si trova.

Se manca un elemento

Se il widget non trova l’elemento di un passo, ad esempio perché non esiste su questa pagina o è nascosto, salta il passo. Se mancano tutti gli elementi, il tour non parte e la chiamata restituisce false. Verifichi quindi i selettori esattamente sulla pagina in cui avvia il tour.

Aspetto

I tour hanno un aspetto fisso e neutro, indipendente dai colori del marchio e dal CSS personalizzato. Il fumetto è largo al massimo 320 px. Senza diciture personalizzate, i pulsanti si chiamano «Beenden», «Zurück», «Weiter» e «Fertig» in ogni lingua. Per i tour su pagine inglesi o polacche imposti quindi i campi i18n_* in ogni passo.

«Me lo mostri»

Nella risposta, l’assistente IA può indicare un controllo sulla Sua pagina, ad esempio il pulsante «Aggiungi al carrello». A questo scopo, dopo la prima apertura della chat, il widget legge i controlli visibili della pagina corrente.

• Se l’elemento è chiaramente visibile, un anello lo evidenzia, con la prima frase della risposta accanto. La finestra della chat rimane aperta.
• Se è coperto o il visitatore usa un telefono, nel messaggio compare il pulsante Me lo mostri. Solo un clic su di esso mostra l’elemento.
• Qualsiasi tocco, il tasto Esc o uno scorrimento che allontana dall’elemento termina la visualizzazione.

La chat non si chiude mai autonomamente per questo.

Può disattivare la lettura della pagina e quindi «Me lo mostri» nel codice di incorporamento:

data-rc-dom-spiegel="false"

Escluda singole aree contrassegnandole con data-rc-private o data-rc-ignore. Maggiori informazioni in Conoscenze e fonti.