FlowHunt JS API: Pokročilá prispôsobiteľnosť chatbota

Flowhunt je nabitý silnými funkciami, ktoré umožňujú hlboké prispôsobenie správania vášho chatbota a jeho plynulú integráciu s vaším webom alebo aplikáciou. Na tejto stránke sa naučíte vykonávať niektoré pokročilé prispôsobenia – premenné vo flowe, URL parametre, spätné volania na udalosti a logiku vlastnej aktivácie chatu.

Premenné vo flowe: Personalizácia chatu

Premenné vo flowe poskytujú spôsob, ako odovzdať chatbotovi dynamické dáta, aby mohol byť skutočne personalizovaný. Do týchto premenných môžete ukladať čokoľvek – používateľské údaje, údaje o relácii alebo akékoľvek relevantné informácie.

Ako používať flowVariable

flowVariable je súčasťou konfigurácie FHChatbot.initChatbot(). Je to objekt, kde každý pár kľúč-hodnota definuje premennú a jej hodnotu. Príklad – odovzdanie IP adresy a ID používateľa:

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

Dôležité poznámky:

• Nahraďte /* Code to obtain IP Address */ a /* Code to obtain User ID */ vašou skutočnou logikou na získanie týchto hodnôt z vášho systému. To často zahŕňa prístup k serverovým premenným, local storage alebo iné autentifikačné metódy.
• Po odovzdaní sú tieto premenné dostupné v rámci logiky vášho chatbota, čo umožňuje dynamické odpovede a personalizované pracovné postupy.
• Logika chatbota vie tieto premenné čítať a využiť na personalizáciu konverzácie a zvýšenie kontextovej prispôsobenosti.

urlSuffix: Sledovanie a analýza interakcií chatbota

Parameter urlSuffix vám umožňuje pripojiť dotazovací reťazec na koniec každej URL, ktorú volá chatbot. Je to veľmi užitočné pre sledovanie pôvodu a efektivity interakcií chatbota pomocou analytických nástrojov ako Google Analytics.

Ako používať urlSuffix

Jednoducho nastavte vlastnosť urlSuffix na požadovaný dotazovací reťazec takto:

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

V tomto príklade sa ku všetkým URL, ktoré iniciuje chatbot, pripojí ?utm_source=your-custom-source, takže môžete sledovať návštevnosť z chatbota vo vašej analytike.

Výhody

• Sledovanie konverzií: Sledujte, ktoré interakcie chatbota vedú k najviac konverziám na vašom webe.
• Analýza správania používateľov: Pochopte, ako používatelia navigujú váš web po zapojení sa do chatbota.
• Priraďovanie kampaní: Merajte efektivitu kampaní, ktoré motivujú používateľov zapojiť sa do chatbota.

Event handlery: Reakcia na akcie chatbota

Flowhunt vám umožňuje nastaviť event handlery, ktoré spustia vlastné funkcie pri určitých udalostiach v chatbote. Tieto handlery vám dávajú presnú kontrolu nad používateľským zážitkom. Hlavné event handlery zahŕňajú:

• onSessionCreated: Spustí sa, keď je vytvorená nová relácia chatbota (počítajú sa aj reštarty relácie!).
• onWindowOpened: Spustí sa, keď sa otvorí okno chatbota.
• onWindowClosed: Spustí sa, keď sa okno chatbota zatvorí.
• onError: Spustí sa, keď dôjde k chybe v chatbote.
• onMessageReceived: Spustí sa, keď bot odošle správu alebo keď používateľ odošle vstup.
• onMessageSent: Spustí sa, keď používateľ odošle správu.

Ako používať event handlery

Handlery môžete nastaviť pomocou premennej fhChatbot, ktorú vráti FHChatbot.initChatbot, a pridávať poslucháčov ako fhChatbot.onSessionCreated(). Tu je príklad:

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
// zachytenie udalosti, keď je chatbot pripravený na vašej stránke
window.addEventListener("onFHChatbotReady", (e) => {
  console.log("Chatbot je pripravený, tlačidlo chatu by už malo byť viditeľné a pripravené na kliknutie.");
});

(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 () {
      // Vlastná logika pri vytvorení relácie, môže spustiť API volania alebo uložiť dáta
      console.log("relácia spustená");
    });
    
    fhChatbot.onWindowOpened(function () {
      // vlastná logika pri otvorení okna, alebo zobrazenie obsahu nad chatom
      console.log("okno otvorené");
    });
    
    fhChatbot.onWindowClosed(function () {
      // vlastná logika pri zatvorení okna, alebo zobrazenie obsahu nad chatom
      console.log("okno zatvorené");
    });
    
    fhChatbot.onError(function (e) {
      // vlastná logika pri chybe, môže sa zaznamenať napríklad do nástroja na sledovanie chýb
      console.log(e.metadata);
      console.log("chyba okna");
    });
    
    fhChatbot.onMessageReceived(function (e) {
      // vlastná logika keď bot odpovie
      console.log("chatbot odpovedal");
    });
    
    fhChatbot.onMessageSent(function (e) {
      // vlastná logika keď používateľ odošle vstup
      console.log("používateľ odoslal vstup");
    });
  }
);
</script>

Každý event handler môže vykonať vlastnú logiku, vďaka čomu sa váš chatbot správa dynamicky podľa správania používateľa.

Príklady použitia:

• Analytika a reportovanie: Sledovanie začiatkov relácií a používania chatbota pomocou onSessionStart a ďalších udalostí na odosielanie dôležitých metrík.
• Dynamické úpravy rozhrania: Úprava vašej stránky na základe udalostí chatbota (napr. zobrazenie iného oznámenia pri aktívnom chate).
• Spracovanie chýb: Zachytenie a reakcia na chyby chatbota pre lepší používateľský zážitok.
• Vlastné používateľské toky: Implementácia vlastnej logiky na základe interakcií používateľa s chatom.

Vlastná aktivácia chatu: Otvárajte a zatvárajte podľa svojich potrieb

Nastavením showChatButton: false môžete skryť predvolené tlačidlo chatu. Potom môžete programovo otvárať alebo zatvárať okno chatbota podľa vlastnej logiky. Toto vám dáva úplnú kontrolu nad používateľským rozhraním.

Ako používať vlastnú aktiváciu

1. Zakážte predvolené tlačidlo: Do možností FHChatbot.initChatbot() pridajte: showChatButton: false.
2. Ovládajte programovo: Použite metódy fhChatbot.openChat() a fhChatbot.closeChat() na ovládanie viditeľnosti na základe vašich vlastných udalostí.

<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
    }); 
    
    // Príklad: ak používateľ klikne na vlastné tlačidlo
    const customChatButton = document.getElementById("myCustomChatButton")
    customChatButton.addEventListener("click", () => {
      fhChatbot.openChat();
    });

    // Príklad: ak používateľ zatvorí pomocou vlastného tlačidla na zatvorenie
    const customCloseChatButton = document.getElementById("myCustomCloseChatButton")
    customCloseChatButton.addEventListener("click", () => {
      fhChatbot.closeChat();
    });
  }
);
</script>

V tomto príklade sme pridali poslucháčov na vlastné tlačidlá, ktoré otvárajú alebo zatvárajú chat.

Výhody:

• Vlastný dizajn: Integrujte chatbota s dizajnom vášho webu pomocou vlastného tlačidla alebo iných spúšťačov na spustenie chatu.
• Kontrola používateľského toku: Spustite chatbot v konkrétnych krokoch používateľskej cesty pre lepšiu kontextovú podporu.
• Strategické umiestnenie: Použite animácie alebo iné vizuálne prvky na upútanie pozornosti používateľa na chatbot v správny čas.

Použitím premenných vo flowe, URL prípon, event handlerov a vlastnej aktivácie chatu môžete vytvoriť vysoko prispôsobené a pútavé chatbot zážitky s Flowhunt. Tieto pokročilé možnosti vám dávajú nástroje na jemné doladenie chatbota tak, aby dokonale vyhovoval vašim obchodným potrebám a očakávaniam používateľov.