Passare i dati dell'utente alla chat

Quando un cliente è collegato al tuo sito, sai già chi è. Con poche righe di codice nelle pagine del sito puoi passare questi dati alla chat. Le istruzioni qui sotto sono per chi sviluppa il sito.

#Cosa ottieni

• Contatti completi. Nome, email e telefono arrivano nella scheda del contatto, in Contatti, legati alla conversazione.
• Meno domande al cliente. I moduli della chat sono già compilati con i dati che passi. Se i dati coprono tutti i campi, la chat non chiede né il modulo contatti né quello della live chat (scheda Chat Operatore), che il visitatore compila quando chiede di parlare con una persona del team. Il modulo di un nodo Form del Playground compare comunque, già compilato: il cliente lo controlla e lo invia.
• Dati tuoi. Puoi passare anche dati come il codice cliente o il livello di fedeltà, nelle variabili del workspace.

#Come si passano i dati

Prima del codice del widget aggiungi uno script che crea l'oggetto window.chatbotUserData con i dati del cliente collegato. Il widget lo legge quando parte.

HTML · i dati del cliente e il codice del widget (dati d'esempio)Copia

<script>
  window.chatbotUserData = {
    firstName: "Mario",
    lastName: "Rossi",
    email: "mario.rossi@esempio.it",
    phone: "+390212345678",
    company: "Officina Rossi",
    metadata: {
      codice_cliente: "C-1234"
    }
  };
</script>
<script defer id="supportfast-script" src="https://cdn.supportfast.ai/chatbot.js" data-chatbot-id="bot-a1b2c3d4e5"></script>

Nelle pagine vere i valori non si scrivono a mano: li stampa il tuo sito, solo quando il cliente è collegato. Gli esempi per WordPress, Shopify e PrestaShop sono più sotto.

#I campi accettati

• Scrivi i nomi dei campi esattamente così, con maiuscole e minuscole.
• Passa solo i campi che hai: nessuno è obbligatorio. I campi che non sono in tabella non partono.

#Le variabili personalizzate (metadata)

In metadata metti i dati che non rientrano nei campi standard, come un codice cliente. Ogni chiave deve corrispondere a una variabile del workspace.

1. Crea la variabile

   In WorkspaceImpostazioniContatti, riquadro Variabili, premi Aggiungi variabile. Per esempio: Nome visibile «Codice cliente», Tipo di dato Testo.

2. Usa l'identificativo come chiave

   In metadata scrivi come chiave l'Identificativo (ID) per l'AI della variabile, per esempio codice_cliente. Il widget riconosce anche il Nome visibile, ma quello si può cambiare in console: da quel momento il dato non arriverebbe più.

Il valore deve rispettare il tipo della variabile:

Come si usano poi le variabili lo spieghiamo in Variabili e profilazione automatica.

#Quando partono i dati

Il widget legge window.chatbotUserData al caricamento della pagina. I dati arrivano a SupportFast quando il cliente scrive: al primo messaggio, all'invio di un modulo o di un allegato. Finché non scrive, in Contatti non compare nulla.

#Se i dati arrivano dopo il caricamento

In alcuni siti il cliente accede senza che la pagina si ricarichi, per esempio nelle applicazioni a pagina singola. In quel caso passa i dati con window.SupportFast.identify(). I dati nuovi sostituiscono i precedenti, non si sommano.

JavaScript · dopo l'accesso del cliente (dati d'esempio)Copia

// passa i dati direttamente
window.SupportFast.identify({
  firstName: "Mario",
  email: "mario.rossi@esempio.it"
});

// oppure aggiorna window.chatbotUserData e falli rileggere
window.chatbotUserData = { firstName: "Mario", email: "mario.rossi@esempio.it" };
window.SupportFast.identify();

#Esempi per piattaforma

Negli esempi lo script parte solo se il cliente è collegato. Mettilo prima del codice del widget, nell'intestazione delle pagine.

#WordPress

Le righe qui sotto vanno in uno di questi due posti:

• in fondo al file functions.php del tema figlio, se il sito ne ha uno;
• in un plugin per gli snippet di codice, come Code Snippets, se il sito non ha un tema figlio. Crea uno snippet PHP nuovo, incolla le righe e scegli di eseguirlo su tutto il sito.

Non scriverle nel functions.php del tema principale: il prossimo aggiornamento del tema le cancellerebbe.

PHP · functions.php del tema figlio, o uno snippetCopia

// Chat SupportFast: i dati del cliente collegato
add_action( 'wp_head', function () {
	if ( ! is_user_logged_in() ) {
		return;
	}
	$utente = wp_get_current_user();
	$dati   = array(
		'firstName' => $utente->user_firstname,
		'lastName'  => $utente->user_lastname,
		'email'     => $utente->user_email,
		// con WooCommerce puoi aggiungere il telefono di fatturazione:
		// 'phone' => get_user_meta( $utente->ID, 'billing_phone', true ),
	);
	echo '<script>window.chatbotUserData = ' . wp_json_encode( $dati, JSON_HEX_TAG | JSON_HEX_AMP ) . ';</script>' . "\n";
}, 1 );

#Shopify

In theme.liquid, prima del codice del widget, incolla queste righe. Se un dato manca, per esempio il telefono, il widget lo ignora.

Liquid · theme.liquidCopia

{% if customer %}
<script>
  window.chatbotUserData = {
    firstName: {{ customer.first_name | json }},
    lastName: {{ customer.last_name | json }},
    email: {{ customer.email | json }},
    phone: {{ customer.phone | json }}
  };
</script>
{% endif %}

#PrestaShop

Nei temi di PrestaShop 1.7 e 8 aggiungi queste righe in fondo al file dell'intestazione: nel tema Classic è templates/_partials/head.tpl. Lavora su un tema figlio o su una copia del tema, per non perdere le righe al prossimo aggiornamento. Se il widget non è ancora installato, incolla il suo codice nello stesso file, dopo queste righe, come spiegato in HTML e altri siti. Poi svuota la cache di PrestaShop.

Smarty · templates/_partials/head.tplCopia

{if $customer.is_logged}
<script>
  window.chatbotUserData = {
    firstName: "{$customer.firstname|escape:'javascript' nofilter}",
    lastName: "{$customer.lastname|escape:'javascript' nofilter}",
    email: "{$customer.email|escape:'javascript' nofilter}"
  };
</script>
{/if}

#Con l'iframe

Nella chat dentro un iframe window.chatbotUserData non arriva, perché la chat sta su un altro dominio. I dati si mandano con un messaggio fra la tua pagina e l'iframe.

1. Dai un id all'iframe

   Aggiungi un attributo id all'iframe copiato dalla console, per esempio id="chat-supportfast".

2. Aggiungi lo script

   Lo script qui sotto aspetta che la chat sia pronta e le manda i dati, negli stessi campi di window.chatbotUserData.

HTML · iframe con i dati del cliente (dati d'esempio)Copia

<iframe id="chat-supportfast" src="https://app.supportfast.ai/chatbot-iframe/bot-a1b2c3d4e5" title="Chat" width="100%" height="600" style="border: 0" allow="microphone"></iframe>
<script>
  (function () {
    var frame = document.getElementById("chat-supportfast");
    var dati = {
      firstName: "Mario",
      lastName: "Rossi",
      email: "mario.rossi@esempio.it"
    };
    window.addEventListener("message", function (event) {
      if (event.source !== frame.contentWindow) return;
      if (event.data && event.data.type === "CHATBOT_READY") {
        // i dati partono solo verso l'indirizzo della chat
        frame.contentWindow.postMessage(
          { type: "CHATBOT_USER_DATA", data: dati },
          new URL(frame.src).origin
        );
      }
    });
  })();
</script>

• Incolla lo script subito dopo l'iframe: deve partire prima che la chat sia pronta, altrimenti il messaggio CHATBOT_READY va perso.
• Per i clienti registrati riempi l'oggetto dati come negli esempi sopra.

I messaggi fra la chat e la pagina sono questi:

#Come verificare

1. Entra nel sito come cliente

   Usa un account di prova, in una finestra anonima.

2. Scrivi un messaggio nella chat

   Va bene un messaggio qualsiasi, per esempio «Buongiorno».

3. Apri il contatto

   In Contatti apri la scheda del contatto: nome, email e variabili sono quelli che hai passato.

#Privacy e sicurezza

• Passa solo i dati del cliente collegato, e solo quelli che servono all'assistenza. Mai password, dati di pagamento o dati sanitari.
• I dati stanno nella pagina che il sito manda a quel cliente, nel suo browser. Se il sito usa una cache delle pagine (un plugin di cache, la cache dell'hosting o un CDN), controlla che le pagine dei clienti collegati non vengano salvate: altrimenti la pagina con i dati di un cliente può arrivare a un altro. Molti plugin di cache le escludono già di serie.
• window.chatbotUserData si può leggere e modificare dal browser di chi visita il sito. Per SupportFast sono dati dichiarati, non un'identità verificata: non usarli per dare accesso a informazioni riservate.
• Questo passaggio di dati va indicato nella tua informativa: vedi Privacy e sicurezza.

#Domande frequenti

#Leggi anche