FlowHunt JS API: Personalizzazione avanzata del Chatbot

Flowhunt è ricco di potenti funzionalità che consentono una profonda personalizzazione del comportamento del tuo chatbot e un’integrazione senza soluzione di continuità con il tuo sito o applicazione. In questa pagina scoprirai come effettuare alcune personalizzazioni avanzate – variabili di flusso, parametri URL, callback basate su eventi e una logica di attivazione personalizzata della chat.

Variabili di flusso: Personalizza l’esperienza della chat

Le variabili di flusso forniscono un modo per passare dati dinamici al chatbot, permettendo una vera personalizzazione. Puoi memorizzare qualsiasi cosa all’interno di queste variabili: dati utente, dati di sessione o qualsiasi informazione rilevante.

Come usare flowVariable

Il flowVariable fa parte della configurazione di FHChatbot.initChatbot(). È un oggetto in cui ogni coppia chiave-valore definisce una variabile ed il suo valore. Esempio – Passare l’indirizzo IP dell’utente e l’ID utente:

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
(function(d, src, c) { 
  var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
  s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
    var rs=this.readyState;
    if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
    c(this);
  };
  t.parentElement.insertBefore(s,t.nextSibling);
})(document,
  'https://app.flowhunt.io/fh-chat-widget.js',
  function(e){ 
    FHChatbot.initChatbot({
      chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
      workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
      headerTitle: 'URLsLab FAQ Generator',
      maxWindowWidth: '700px',
      "flowVariable": {
        "ip": /* Codice per ottenere l’indirizzo IP */ ,
        "userId":  /* Codice per ottenere l’ID utente */
      }
    });
  }
);
</script>

Note importanti:

• Sostituisci /* Codice per ottenere l’indirizzo IP */ e /* Codice per ottenere l’ID utente */ con la tua logica effettiva per recuperare questi valori dal tuo sistema. Questo spesso comporta l’accesso a variabili lato server, local storage o l’utilizzo di altri metodi di autenticazione.
• Una volta passate, queste variabili sono disponibili all’interno della logica del tuo chatbot, permettendo risposte dinamiche e workflow personalizzati.
• La logica del chatbot può leggere e utilizzare queste variabili per personalizzare le conversazioni e renderle più contestuali.

urlSuffix: Traccia e analizza le interazioni del chatbot

Il parametro urlSuffix ti consente di aggiungere una stringa di query alla fine di ogni URL chiamato dal chatbot. Questo è prezioso per tracciare l’origine e l’efficacia delle interazioni del tuo chatbot usando strumenti di analisi come Google Analytics.

Come usare urlSuffix

Imposta semplicemente la proprietà urlSuffix sulla stringa di query desiderata, come segue:

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
(function(d, src, c) { 
  var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
  s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
    var rs=this.readyState;
    if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
    c(this);
  };
  t.parentElement.insertBefore(s,t.nextSibling);
})(document,
  'https://app.flowhunt.io/fh-chat-widget.js',
  function(e){ 
    FHChatbot.initChatbot({
      chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
      workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
      headerTitle: 'URLsLab FAQ Generator',
      maxWindowWidth: '700px',
      "urlSUffix": "?utm_source=your-custom-source"
    });
  }
);
</script>

In questo esempio, ?utm_source=your-custom-source sarà aggiunto a tutti gli URL avviati dal chatbot, permettendoti di tracciare il traffico chatbot sulla tua piattaforma di analytics.

Vantaggi

• Traccia le conversioni: Monitora quali interazioni con il chatbot portano al maggior numero di conversioni sul tuo sito web.
• Analizza il comportamento degli utenti: Comprendi come gli utenti navigano il tuo sito dopo aver interagito con il chatbot.
• Attribuzione delle campagne: Misura l’efficacia delle campagne che incoraggiano gli utenti a interagire con il chatbot.

Gestori di eventi: Reagisci alle azioni del chatbot

Flowhunt ti permette di impostare gestori di eventi che attivano funzioni personalizzate quando si verificano determinati eventi nel chatbot. Questi handler ti danno il pieno controllo sull’esperienza utente. I principali gestori di eventi includono:

• onSessionCreated: Attivato quando viene avviata una nuova sessione chatbot (anche il riavvio della sessione conta!).
• onWindowOpened: Attivato quando la finestra del chatbot viene aperta.
• onWindowClosed: Attivato quando la finestra del chatbot viene chiusa.
• onError: Attivato quando si verifica un errore nel chatbot.
• onMessageReceived: Attivato quando il bot invia un messaggio e quando un utente invia un input.
• onMessageSent: Attivato quando l’utente invia un messaggio.

Come usare i gestori di eventi

Puoi impostare i gestori usando la variabile fhChatbot restituita da FHChatbot.initChatbot, e aggiungere listener come fhChatbot.onSessionCreated(). Ecco un esempio:

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
// intercetta l’evento quando il chatbot è pronto sulla tua pagina
window.addEventListener("onFHChatbotReady", (e) => {
  console.log("Il chatbot è pronto, il pulsante della chat dovrebbe essere visibile ora, pronto per essere cliccato.");
});

(function(d, src, c) { 
  var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
  s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
    var rs=this.readyState;
    if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
    c(this);
  };
  t.parentElement.insertBefore(s,t.nextSibling);
})(document,
  'https://app.flowhunt.io/fh-chat-widget.js',
  function(e){ 
    const fhChatbot = FHChatbot.initChatbot({
      chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
      workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
      headerTitle: 'URLsLab FAQ Generator',
      maxWindowWidth: '700px',
      "urlSUffix": "?utm_source=asdfsdfgsdg"
    }); 
    
    fhChatbot.onSessionCreated(function () {
      // Logica personalizzata all’avvio della sessione: puoi effettuare chiamate API o salvare dati
      console.log("sessione avviata");
    });
    
    fhChatbot.onWindowOpened(function () {
      // logica personalizzata all’apertura della finestra, o mostrare un contenuto sopra la chat
      console.log("finestra aperta");
    });
    
    fhChatbot.onWindowClosed(function () {
      // logica personalizzata alla chiusura della finestra, o mostrare un contenuto sopra la chat
      console.log("finestra chiusa");
    });
    
    fhChatbot.onError(function (e) {
      // logica personalizzata al verificarsi di un errore, puoi tracciarlo con uno strumento di monitoraggio errori.
      console.log(e.metadata);
      console.log("errore finestra");
    });
    
    fhChatbot.onMessageReceived(function (e) {
      // logica personalizzata quando il bot risponde.
      console.log("il chatbot ha risposto");
    });
    
    fhChatbot.onMessageSent(function (e) {
      // logica personalizzata quando l’utente invia un input.
      console.log("l’utente ha inviato un input");
    });
  }
);
</script>

Ogni funzione gestore di eventi può eseguire logiche personalizzate per rendere il tuo chatbot dinamico rispetto ai comportamenti dell’utente.

Casi d’uso:

• Analytics e reporting: Traccia l’inizio delle sessioni e l’uso del chatbot tramite onSessionStart e altri eventi per inviare metriche preziose.
• Aggiornamenti dinamici dell’interfaccia: Modifica la tua pagina in base agli eventi del chatbot (es. mostra un messaggio diverso quando la chat è attiva).
• Gestione errori: Intercetta e gestisci gli errori del chatbot, migliorando l’esperienza utente.
• Flussi utente personalizzati: Implementa logiche personalizzate in base alle interazioni con la chat.

Attivazione personalizzata della chat: Apri e chiudi secondo le tue regole

Impostando showChatButton: false, puoi nascondere il pulsante della chat predefinito. Quindi, puoi aprire o chiudere programmaticamente la finestra del chatbot in base alla tua logica personalizzata. Questo ti dà il massimo controllo sull’interfaccia utente.

Come usare l’attivazione personalizzata

1. Disabilita il pulsante predefinito: Nelle opzioni di FHChatbot.initChatbot(), aggiungi: showChatButton: false.
2. Controlla programmaticamente: Usa i metodi fhChatbot.openChat() e fhChatbot.closeChat() per controllare la visibilità in base ai tuoi eventi personalizzati.

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
(function(d, src, c) { 
  var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
  s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
    var rs=this.readyState;
    if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
    c(this);
  };
  t.parentElement.insertBefore(s,t.nextSibling);
})(document,
  'https://app.flowhunt.io/fh-chat-widget.js',
  function(e){ 
    const fhChatbot = FHChatbot.initChatbot({
      chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
      workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
      headerTitle: 'URLsLab FAQ Generator',
      maxWindowWidth: '700px',
      "urlSUffix": "?utm_source=asdfsdfgsdg",
      "showChatButton": false
    }); 
    
    // Esempio: se l’utente clicca su un pulsante personalizzato
    const customChatButton = document.getElementById("myCustomChatButton")
    customChatButton.addEventListener("click", () => {
      fhChatbot.openChat();
    });

    // Esempio: se l’utente chiude tramite un pulsante di chiusura personalizzato
    const customCloseChatButton = document.getElementById("myCustomCloseChatButton")
    customCloseChatButton.addEventListener("click", () => {
      fhChatbot.closeChat();
    });
  }
);
</script>

In questo esempio, abbiamo aggiunto listener a pulsanti personalizzati per aprire o chiudere la chat.

Vantaggi:

• Design personalizzato: Integra il chatbot con lo stile del tuo sito, usando un pulsante personalizzato o altri trigger per avviare la chat.
• Controllo del flusso utente: Avvia il chatbot in momenti specifici del percorso utente, migliorando il supporto contestuale.
• Posizionamento strategico: Usa animazioni o altri segnali visivi per attirare l’attenzione degli utenti sul chatbot quando più opportuno.

Utilizzando variabili di flusso, suffissi URL, gestori di eventi e attivazione personalizzata della chat, puoi creare esperienze chatbot altamente personalizzate e coinvolgenti con Flowhunt. Queste opzioni avanzate ti forniscono gli strumenti per perfezionare il tuo chatbot e adattarlo perfettamente alle esigenze della tua azienda e alle aspettative dei tuoi utenti.