Condividi | Guida SupportFast

Contenuti

https://app.supportfast.ai/condividi/

Dopo aver creato, impostato e allenato il tuo chatbot, arriva il momento di condividerlo con i tuoi utenti finali. La pagina Condividi offre una panoramica delle modalità disponibili per pubblicare il tuo chatbot sul web.

In Supportfast sono disponibili tre modalità di condivisione web:

Link diretto: Condividi un link che apre il tuo chatbot in una nuova scheda del browser, da cui l’utente può iniziare a conversare.

Bolla di Chat: Integra il chatbot nel tuo sito web, per far comparire un bottone fisso nel sito che se cliccato apre la finestra di chat in sovraimpressione sulla pagina.

Iframe: Incorpora il chatbot all’interno di una o più sezioni del tuo sito web, visualizzandolo come parte della pagina stessa.

All’interno della pagina Condividi troverai tutti i link e gli script necessari per integrare il chatbot sul tuo sito. Di seguito, vediamo nel dettaglio come utilizzare le due modalità di integrazione nel sito web.

Bolla di Chat

Per integrare la bolla di chat nel tuo sito web:

Aggiungi il dominio del tuo sito nella pagina Impostazioni del chatbot.
Inserisci lo script all’interno del tag <head> del codice HTML del tuo sito.

Iframe

Per incorporare il chatbot tramite iframe:

Inserisci un elemento <iframe> in una o più pagine del tuo sito.
Utilizza il link del chatbot come valore del parametro src dell’iframe.

Per maggiori informazioni sulla condivisione web e sulle integrazioni con i canali social, consulta la guida dedicata: https://supportfast.ai/it/guida/integrazioni/.

Passaggio dati dell’utente

Quando integri il tuo chatbot su un sito web o piattaforma online, hai la possibilità di fornire al chatbot informazioni sull’utente che lo sta utilizzando, se l’utente è registrato nel tuo sito/piattaforma.

Questo ti permette di identificare nelle Statistiche le persone che hanno avuto una Conversazione con il tuo chatbot, oltre che salvare dati da poter usare nel Playground.

Vediamo ora le procedure per il passaggio di dati esterni verso il chatbot.

Quali dati passare

Lo Script consente il passaggio dei dati standard dell’utente, oltre che una serie di metadati aggiuntivi da legare all’utente.

I campi standard sono esattamente le variabili standard dell’utente nel Playground, ovvero: email, phone e fullName. Consulta la documentazione delle Variabili del Playground per capirne l’utilizzo.

Per l’inserimento di un metadato, è necessario seguire questa procedura:

Per prima cosa, è necessario andare in Playground del tuo chatbot, aprire la barra delle Variabili nella sezione “Utente”, e creare la variabile con un certo nome.
Solo dopo aver dichiarato in Playground la Variabile, allora è possibile inserire un dato tra i metadati che ha lo stesso nome usato nella Variabile, e passare il relativo valore.

Bolla di Chat

Nel caso di Bolla di Chat, è necessario aggiungere un secondo Script nel codice del tuo sito web. Di seguito ti viene mostrato un template con dei dati di esempio:

<script>
    window.chatbotUserData = {
    fullName: "test test",
    email: "example@gmail.com",
    metadata: {
        //Inserisci i dati che desideri
    }
}
</script>

Questo Script dovrà essere dinamico, ovvero dovrà utilizzare dei valori non fissi ma dinamici relativi all’utente. Per questo motivo, la modalità di inserimento di questo Script è differente rispetto alla modalità utilizzata per la bolla di chat stessa.

Di seguito ti vengono spiegate le modalità per i CMS più diffusi.

WordPress

Codice da inserire nel file functions.php del tema child:

function supportfast_add_chatbot_userdata_script() {
    if ( is_user_logged_in() ) {
        $current_user = wp_get_current_user();
        ?>
        <script>
            window.chatbotUserData = {
                fullName: "<?php echo esc_js( $current_user->display_name ); ?>",
                email: "<?php echo esc_js( $current_user->user_email ); ?>",
                metadata: {
                    // puoi aggiungere altri dati se servono
                }
            };
        </script>
        <?php
    }
}
add_action('wp_head', 'supportfast_add_chatbot_userdata_script');

Prestashop

Codice da inserire nel template .tpl (header.tpl) prima della chiusura del tag </head>:

{if $logged}
    <script>
        window.chatbotUserData = {
            fullName: "{$customer.firstname|escape:'html':'UTF-8'} {$customer.lastname|escape:'html':'UTF-8'}",
            email: "{$customer.email|escape:'html':'UTF-8'}",
            metadata: {
                // puoi aggiungere altri dati se servono
            }
        };
    </script>
{/if}

Shopify

Codice da inserire nel theme.liquid prima della chiusure del tag </head>:

{% if customer %}
  <script>
    window.chatbotUserData = {
      fullName: "{{ customer.first_name | escape }} {{ customer.last_name | escape }}",
      email: "{{ customer.email | escape }}",
      metadata: {
        // puoi aggiungere altri dati se servono
      }
    };
  </script>
{% endif %}

Iframe

Nel caso di Iframe, i dati vengono inviati dal tuo sito/piattaforma verso il chatbot con la seguente modalità:

const iframe = document.getElementById('chatbot-iframe');
let readyListener;
if(iframe) {
    readyListener = (event) => {
        if (
            event.data &&
            event.data.type === 'CHATBOT_READY' &&
            event.source === iframe.contentWindow
        ) {
            iframe.contentWindow.postMessage({
                type: 'CHATBOT_USER_DATA',
                data: {
                    fullName: "test test",
                    email: "example@gmail.com",
                    metadata: {
                        // puoi aggiungere altri dati se servono
                    }
                }
            }, '*');
            window.removeEventListener('message', readyListener);
        }
    }
    window.addEventListener('message', readyListener);
}

Questo codice serve per inviare dei dati dal tuo sito web verso l’iframe che è contenuto nel tuo sito web/piattaforma. Il codice richiede che l’iframe inserito sul tuo sito web abbia assegnato un ID.

Di seguito ti vengono spiegate le modalità per i CMS più diffusi.

WordPress

Inserisci l’iframe con un parametro ID univoco nella pagina web.

Nel file functions.php del tuo tema, inserisci questo codice:

<?php
function chatbot_iframe_user_data_script() {
    if ( is_user_logged_in() ) {
        $current_user = wp_get_current_user();
        ?>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const iframe = document.getElementById('chatbot-iframe');
                let readyListener;
                if (iframe) {
                    readyListener = function(event) {
                        if (
                            event.data &&
                            event.data.type === 'CHATBOT_READY' &&
                            event.source === iframe.contentWindow
                        ) {
                            iframe.contentWindow.postMessage({
                                type: 'CHATBOT_USER_DATA',
                                data: {
                                    fullName: "<?php echo esc_js( $current_user->display_name ); ?>",
                                    email: "<?php echo esc_js( $current_user->user_email ); ?>",
                                    metadata: {
                                       // puoi aggiungere altri dati se servono
                                   }
                                }
                            }, '*');
                            window.removeEventListener('message', readyListener);
                        }
                    };
                    window.addEventListener('message', readyListener);
                }
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'chatbot_iframe_user_data_script');
?>

Prestashop

Inserisci l’iframe con un parametro ID univoco nella pagina web.

Nel file .tpl della tua pagina, aggiungi subito dopo l’iframe questo blocco di codice:

{if $logged}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var iframe = document.getElementById('chatbot-iframe');
        var readyListener;
        if (iframe) {
            readyListener = function(event) {
                if (
                    event.data &&
                    event.data.type === 'CHATBOT_READY' &&
                    event.source === iframe.contentWindow
                ) {
                    iframe.contentWindow.postMessage({
                        type: 'CHATBOT_USER_DATA',
                        data: {
                            fullName: "{$customer.firstname|escape:'html':'UTF-8'} {$customer.lastname|escape:'html':'UTF-8'}",
                            email: "{$customer.email|escape:'html':'UTF-8'}",
                            metadata: {
                                // puoi aggiungere altri dati se servono
                            }
                        }
                    }, '*');
                    window.removeEventListener('message', readyListener);
                }
            };
            window.addEventListener('message', readyListener);
        }
    });
</script>
{/if}

Shopify

Inserisci l’iframe con un parametro ID univoco nella pagina web.

Snippet da inserire in theme.liquid (prima di </body>, subito dopo l’iframe):

{% if customer %}
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var iframe = document.getElementById('chatbot-iframe');
      var readyListener;
      if (iframe) {
        readyListener = function(event) {
          if (
            event.data &&
            event.data.type === 'CHATBOT_READY' &&
            event.source === iframe.contentWindow
          ) {
            iframe.contentWindow.postMessage({
              type: 'CHATBOT_USER_DATA',
              data: {
                fullName: "{{ customer.first_name | escape }} {{ customer.last_name | escape }}",
                email: "{{ customer.email | escape }}",
                metadata: {
                  // puoi aggiungere altri dati se servono
                }
              }
            }, '*');
            window.removeEventListener('message', readyListener);
          }
        };
        window.addEventListener('message', readyListener);
      }
    });
  </script>
{% endif %}