FlowHunt JS API: Personalizare Avansată a Chatbotului

Flowhunt este echipat cu funcționalități puternice care permit personalizarea profundă a comportamentului chatbotului tău și integrarea sa perfectă cu site-ul sau aplicația ta. Pe această pagină, vei învăța cum să realizezi câteva personalizări avansate – variabile de flux, parametri URL, callback-uri bazate pe evenimente și o logică personalizată de activare a chatului.

Variabile de Flux: Personalizează Experiența de Chat

Variabilele de flux oferă o modalitate de a transmite date dinamice către chatbot, astfel încât conversațiile să fie cu adevărat personalizate. Poți stoca orice în aceste variabile, de la date despre utilizator și sesiune, până la orice informație relevantă.

Cum folosești flowVariable

flowVariable face parte din configurația FHChatbot.initChatbot(). Este un obiect în care fiecare pereche cheie-valoare definește o variabilă și valoarea sa. Exemplu – transmiterea adresei IP a utilizatorului și a id-ului acestuia:

<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": /* Code to obtain IP Address */ ,
        "userId":  /* Code to obtain User ID */
      }
    });
  }
);
</script>

Note importante:

• Înlocuiește /* Code to obtain IP Address */ și /* Code to obtain User ID */ cu logica ta reală pentru a obține aceste valori din sistemul tău. Adesea, acest lucru implică accesarea variabilelor de pe server, local storage sau folosirea altor metode de autentificare.
• Odată transmise, aceste variabile sunt disponibile în logica chatbotului tău, permițând răspunsuri dinamice și fluxuri personalizate.
• Logica chatbotului poate citi și utiliza aceste variabile pentru a personaliza conversațiile și a le face mai adaptate contextului.

urlSuffix: Urmărește și Analizează Interacțiunile Chatbotului

Parametrul urlSuffix îți permite să adaugi un șir de interogare la finalul fiecărui URL apelat de chatbot. Acest lucru este de neprețuit pentru urmărirea originii și eficienței interacțiunilor cu chatbotul folosind instrumente de analiză precum Google Analytics.

Cum folosești urlSuffix

Setează pur și simplu proprietatea urlSuffix la șirul de interogare dorit, astfel:

<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>

În acest exemplu, ?utm_source=your-custom-source va fi adăugat la toate URL-urile inițiate de chatbot, permițându-ți să monitorizezi traficul chatbotului în platforma ta de analiză.

Beneficii

• Urmărirea conversiilor: Monitorizează ce interacțiuni cu chatbotul duc la cele mai multe conversii pe website-ul tău.
• Analiza comportamentului utilizatorilor: Înțelege cum navighează utilizatorii pe site după ce interacționează cu chatbotul.
• Atribuirea campaniilor: Măsoară eficiența campaniilor care încurajează utilizatorii să folosească chatbotul.

Handleri de Evenimente: Răspunde la Acțiunile Chatbotului

Flowhunt îți permite să configurezi handleri de evenimente care declanșează funcții personalizate atunci când anumite evenimente au loc în chatbot. Acești handleri îți oferă control precis asupra experienței utilizatorului. Principalii handleri de evenimente includ:

• onSessionCreated: Se declanșează când o nouă sesiune chatbot este inițiată (inclusiv la restartul sesiunii!).
• onWindowOpened: Se declanșează când fereastra chatbotului este deschisă.
• onWindowClosed: Se declanșează când fereastra chatbotului este închisă.
• onError: Se declanșează când apare o eroare în chatbot.
• onMessageReceived: Se declanșează când botul trimite un mesaj sau când utilizatorul trimite un input.
• onMessageSent: Se declanșează când utilizatorul trimite un mesaj.

Cum folosești handlerii de evenimente

Poți configura handlerii folosind variabila fhChatbot returnată de FHChatbot.initChatbot și să adaugi ascultători precum fhChatbot.onSessionCreated(). Iată un exemplu:

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
// catch event when chatbot is ready on your page
window.addEventListener("onFHChatbotReady", (e) => {
  console.log("Chatbot is ready, chat button should be visible at this time ready to be clicked.");
});

(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 ta personalizată la crearea sesiunii, poți apela API-uri sau salva date
      console.log("session started");
    });
    
    fhChatbot.onWindowOpened(function () {
      // logica personalizată la deschiderea ferestrei sau afișează conținut deasupra chatului
      console.log("window opened");
    });
    
    fhChatbot.onWindowClosed(function () {
      // logica personalizată la închiderea ferestrei sau afișează conținut deasupra chatului
      console.log("window closed");
    });
    
    fhChatbot.onError(function (e) {
      // logica personalizată la apariția unei erori, poți urmări eroarea cu un tool dedicat
      console.log(e.metadata);
      console.log("window error");
    });
    
    fhChatbot.onMessageReceived(function (e) {
      // logica personalizată când botul răspunde
      console.log("chatbot answered");
    });
    
    fhChatbot.onMessageSent(function (e) {
      // logica personalizată când utilizatorul trimite un input
      console.log("user sent an input");
    });
  }
);
</script>

Fiecare funcție handler de eveniment poate executa logică personalizată pentru ca chatbotul să reacționeze dinamic la comportamentul utilizatorului.

Cazuri de utilizare:

• Analiză și raportare: Urmărește începuturile sesiunilor și utilizarea chatbotului folosind onSessionStart și alte evenimente pentru a trimite metrici valoroase.
• Actualizări UI dinamice: Modifică pagina în funcție de evenimentele chatbotului (de ex. afișează un mesaj diferit când chatul este activ).
• Gestionarea erorilor: Prinde și răspunde la erorile chatbotului, îmbunătățind experiența utilizatorului.
• Fluxuri personalizate: Implementează logică personalizată în funcție de interacțiunile utilizatorului cu chatul.

Activare Personalizată Chat: Deschide și Închide După Propriile Reguli

Setând showChatButton: false poți ascunde butonul implicit al chatului. Apoi, poți deschide sau închide fereastra chatbotului programatic, în baza logicii proprii. Astfel, ai control total asupra interfeței cu utilizatorul.

Cum folosești activarea personalizată

1. Dezactivează butonul implicit: În opțiunile FHChatbot.initChatbot(), adaugă: showChatButton: false.
2. Controlează programatic: Folosește metodele fhChatbot.openChat() și fhChatbot.closeChat() pentru a controla vizibilitatea în funcție de evenimentele tale personalizate.

<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
    }); 
    
    // Exemplu: dacă utilizatorul face click pe un buton personalizat
    const customChatButton = document.getElementById("myCustomChatButton")
    customChatButton.addEventListener("click", () => {
      fhChatbot.openChat();
    });

    // Exemplu: dacă utilizatorul închide chatul cu un buton personalizat
    const customCloseChatButton = document.getElementById("myCustomCloseChatButton")
    customCloseChatButton.addEventListener("click", () => {
      fhChatbot.closeChat();
    });
  }
);
</script>

În acest exemplu, am adăugat ascultători pe butoane personalizate pentru a deschide sau închide chatul.

Beneficii:

• Design personalizat: Integrează chatbotul cu aspectul și senzația website-ului tău, folosind un buton personalizat sau alte declanșatoare pentru a iniția chatul.
• Controlul fluxului utilizatorului: Pornește chatbotul în momente specifice ale parcursului utilizatorului, oferind suport contextual.
• Plasare strategică: Folosește animații sau alte indicii vizuale pentru a atrage atenția utilizatorului asupra chatbotului la momentul potrivit.

Folosind variabile de flux, sufixe URL, handleri de evenimente și activare personalizată a chatului, poți crea experiențe chatbot extrem de personalizate și captivante cu Flowhunt. Aceste opțiuni avansate îți oferă instrumentele necesare pentru a-ți ajusta chatbotul astfel încât să corespundă perfect nevoilor afacerii și așteptărilor utilizatorilor tăi.