FlowHunt JS API: Kehittynyt chatbottien räätälöinti

Flowhunt on täynnä vahvoja ominaisuuksia, joiden avulla voit räätälöidä chatbotin toimintaa syvällisesti ja integroida sen saumattomasti sivullesi tai sovellukseesi. Tällä sivulla opit tekemään kehittyneitä räätälöintejä – flow-muuttujat, URL-parametrit, tapahtumapohjaiset callbackit ja mukautettu chatin aktivointilogiikka.

Flow-muuttujat: Personoi keskustelukokemus

Flow-muuttujien avulla voit välittää bottiin dynaamisia tietoja, jolloin keskusteluista tulee aidosti yksilöllisiä. Näihin muuttujiiin voi tallentaa mitä tahansa – käyttäjädataa, istuntotietoa tai muuta olennaista tietoa.

Näin käytät flowVariablea

flowVariable on osa FHChatbot.initChatbot()-määritystä. Se on olio, jossa jokainen avain-arvo-pari määrittää muuttujan ja sen arvon. Esimerkki – käyttäjän IP-osoitteen ja tunnuksen välittäminen:

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

Tärkeää:

• Korvaa /* Code to obtain IP Address */ ja /* Code to obtain User ID */ omalla logiikallasi, jolla haet arvot järjestelmästäsi. Tämä tarkoittaa usein palvelinpuolen muuttujien käyttämistä, local storagen hyödyntämistä tai muuta tunnistautumismenetelmää.
• Kun arvot välitetään, ne ovat käytettävissä bottisi logiikassa, mikä mahdollistaa dynaamiset vastaukset ja personoidut työnkulut.
• Chatbotin logiikka voi lukea ja käyttää näitä muuttujia keskustelujen personointiin ja kontekstin ymmärtämiseen.

urlSuffix: Seuraa ja analysoi chatbotin vuorovaikutuksia

urlSuffix-parametrilla voit liittää kyselymerkkijonon jokaisen chatbotin käyttämän URL-osoitteen loppuun. Tämä on erittäin hyödyllistä, kun haluat seurata chatbotin vuorovaikutusten alkuperää ja tehokkuutta analytiikkatyökaluilla, kuten Google Analyticsilla.

Näin käytät urlSuffixia

Aseta urlSuffix-ominaisuudelle haluamasi kyselymerkkijono näin:

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

Tässä esimerkissä ?utm_source=your-custom-source liitetään kaikkiin chatbotin avaamiin URL-osoitteisiin, jolloin voit seurata chatbotin liikennettä analytiikka-alustalla.

Hyödyt

• Konversioiden seuranta: Tarkkaile, mitkä chatbotin vuorovaikutukset johtavat eniten konversioihin sivustollasi.
• Käyttäjäkäyttäytymisen analysointi: Ymmärrä, miten käyttäjät navigoivat sivustollasi chatbotin kanssa käytyjen keskustelujen jälkeen.
• Kampanjoiden attribuointi: Mittaa sellaisten kampanjoiden tehokkuutta, joissa käyttäjiä kannustetaan käyttämään chatbottia.

Tapahtumankäsittelijät: Reagoi chatbotin toimintaan

Flowhuntin avulla voit asettaa tapahtumankäsittelijöitä, jotka käynnistävät mukautettuja funktioita, kun bottissa tapahtuu tiettyjä asioita. Näiden avulla hallitset käyttökokemusta tarkasti. Pääasialliset tapahtumankäsittelijät ovat:

• onSessionCreated: Käynnistyy, kun uusi chatbot-istunto aloitetaan (myös uudelleenkäynnistyksessä!).
• onWindowOpened: Käynnistyy, kun chatbot-ikkuna avataan.
• onWindowClosed: Käynnistyy, kun chatbot-ikkuna suljetaan.
• onError: Käynnistyy, kun chatbotissa ilmenee virhe.
• onMessageReceived: Käynnistyy, kun botti lähettää viestin ja kun käyttäjä lähettää syötteen.
• onMessageSent: Käynnistyy, kun käyttäjä lähettää viestin.

Näin käytät tapahtumankäsittelijöitä

Voit määrittää käsittelijät fhChatbot-muuttujan kautta, jonka FHChatbot.initChatbot palauttaa, ja lisätä kuuntelijat kuten fhChatbot.onSessionCreated(). Esimerkki:

<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 () {
      // Oma logiikka kun istunto käynnistyy, esim. API-kutsujen tekeminen tai tietojen tallennus
      console.log("session started");
    });
    
    fhChatbot.onWindowOpened(function () {
      // oma logiikka kun ikkuna avataan, esim. näytä sisältöä chatin yläpuolella
      console.log("window opened");
    });
    
    fhChatbot.onWindowClosed(function () {
      // oma logiikka kun ikkuna suljetaan, esim. näytä sisältöä chatin yläpuolella
      console.log("window closed");
    });
    
    fhChatbot.onError(function (e) {
      // oma logiikka kun virhe tapahtuu, esim. virheen seuranta
      console.log(e.metadata);
      console.log("window error");
    });
    
    fhChatbot.onMessageReceived(function (e) {
      // oma logiikka kun botti vastaa
      console.log("chatbot answered");
    });
    
    fhChatbot.onMessageSent(function (e) {
      // oma logiikka kun käyttäjä lähettää syötteen
      console.log("user sent an input");
    });
  }
);
</script>

Jokainen tapahtumankäsittelijä voi suorittaa mukautettua logiikkaa, jolloin chatbotin toiminta mukautuu käyttäjän toimintaan.

Käyttötapaukset:

• Analytiikka ja raportointi: Seuraa istuntojen aloituksia ja botin käyttöä esimerkiksi onSessionStart-tapahtumalla ja lähetä arvokasta dataa analytiikkaan.
• Dynaamiset UI-päivitykset: Muokkaa sivuasi chatbotin tapahtumien perusteella (esim. näytä eri viesti kun chat on aktiivinen).
• Virheiden hallinta: Tunnista ja reagoi chatbotin virheisiin parantaaksesi käyttökokemusta.
• Mukautetut käyttäjäpolut: Toteuta omaa logiikkaasi käyttäjän vuorovaikutusten perusteella.

Mukautettu chatin aktivointi: Avaa ja sulje chat omilla ehdoillasi

Asettamalla showChatButton: false voit piilottaa oletuspainikkeen. Tämän jälkeen voit avata tai sulkea chatbotin ohjelmallisesti oman logiikkasi mukaan. Näin saat täyden hallinnan käyttöliittymästä.

Näin käytät mukautettua aktivointia

1. Poista oletuspainike: Lisää FHChatbot.initChatbot()-valintoihin: showChatButton: false.
2. Ohjaa ohjelmallisesti: Käytä fhChatbot.openChat() ja fhChatbot.closeChat() -metodeja näkyvyyden hallintaan omien tapahtumiesi perusteella.

<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
    }); 
    
    // Esimerkki: kun käyttäjä klikkaa omaa painiketta
    const customChatButton = document.getElementById("myCustomChatButton")
    customChatButton.addEventListener("click", () => {
      fhChatbot.openChat();
    });

    // Esimerkki: kun käyttäjä sulkee chatin omasta sulkupainikkeesta
    const customCloseChatButton = document.getElementById("myCustomCloseChatButton")
    customCloseChatButton.addEventListener("click", () => {
      fhChatbot.closeChat();
    });
  }
);
</script>

Tässä esimerkissä lisättiin kuuntelijat omiin painikkeisiin, joilla chat avataan tai suljetaan.

Hyödyt:

• Mukautettu ulkoasu: Sijoita chatbot saumattomasti sivustosi ulkoasuun käyttämällä omaa painiketta tai muita laukaisimia keskustelun aloittamiseen.
• Käyttäjäpolun hallinta: Käynnistä chatbot tietyissä kohdissa käyttäjän polkua ja tarjoa kontekstuaalista tukea.
• Strateginen sijoittelu: Käytä animaatioita tai muita visuaalisia keinoja ohjataksesi käyttäjän huomion chatbottiin oikealla hetkellä.

Hyödyntämällä flow-muuttujia, URL-päätteitä, tapahtumankäsittelijöitä ja mukautettua chatin aktivointia voit luoda erittäin räätälöityjä ja mukaansatempaavia chatbot-kokemuksia Flowhuntilla. Nämä kehittyneet vaihtoehdot antavat sinulle työkalut chatbotisi hienosäätöön vastaamaan täydellisesti liiketoimintasi tarpeisiin ja käyttäjiesi odotuksiin.