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:
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:
Iframe
Per incorporare il chatbot tramite iframe:
Per maggiori informazioni sulla condivisione web e sulle integrazioni con i canali social, consulta la guida dedicata: https://supportfast.ai/it/guida/integrazioni/.
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.
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:
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.
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');
{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}
{% 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 %}
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.
Inserisci l’iframe con un parametro ID univoco nella pagina web.
<iframe id=”chatbot-iframe” src=”https://app.supportfast.ai/chatbot-iframe/…” width=”100%” height=”600px”></iframe>
<?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');
?>
Inserisci l’iframe con un parametro ID univoco nella pagina web.
<iframe id=”chatbot-iframe” src=”https://app.supportfast.ai/chatbot-iframe/…” width=”100%” height=”600px”></iframe>
{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}
Inserisci l’iframe con un parametro ID univoco nella pagina web.
<iframe id=”chatbot-iframe” src=”https://app.supportfast.ai/chatbot-iframe/…” width=”100%” height=”600px”></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 %}
