FlowHunt JS API: Avansert Chatbot-tilpasning

Flowhunt er fullpakket med kraftige funksjoner som lar deg tilpasse hvordan chatboten din oppfører seg og integreres sømløst med nettstedet eller applikasjonen din. På denne siden lærer du å utføre noen avanserte tilpasninger – flytvariabler, URL-parametere, hendelsesdrevne tilbakeringinger og egendefinert chataktiveringslogikk.

Flytvariabler: Personalisér chatteopplevelsen

Flytvariabler gir en måte å sende inn dynamiske data til chatboten, slik at den kan bli virkelig personlig. Du kan lagre hva som helst i disse variablene; det kan være brukerdata, øktdata eller annen relevant informasjon.

Hvordan bruke flowVariable

flowVariable er en del av konfigurasjonen til FHChatbot.initChatbot(). Det er et objekt hvor hvert nøkkel-verdi-par definerer en variabel og dens verdi. Eksempel – sender brukerens IP-adresse og bruker-ID:

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

Viktige merknader:

• Bytt ut /* Code to obtain IP Address */ og /* Code to obtain User ID */ med din faktiske logikk for å hente disse verdiene fra systemet ditt. Dette innebærer ofte å hente server-side variabler, lokal lagring eller bruke andre autentiseringsmetoder.
• Når de er sendt inn, er disse variablene tilgjengelige i chatbot-logikken din, som gjør det mulig med dynamiske svar og personlige arbeidsflyter.
• Chatbot-logikken kan lese og bruke disse variablene for å personalisere samtaler og gjøre dem mer kontekstavhengige.

urlSuffix: Spor og analyser chatbot-interaksjoner

Parameteren urlSuffix lar deg legge til en spørringsstreng på slutten av hver URL som chatboten benytter. Dette er uvurderlig for å spore opprinnelse og effektivitet av chatbot-interaksjoner ved bruk av analyserverktøy som Google Analytics.

Slik bruker du urlSuffix

Bare sett urlSuffix-egenskapen til ønsket spørringsstreng, slik som dette:

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

I dette eksempelet vil ?utm_source=your-custom-source legges til alle URL-er initiert av chatboten, slik at du kan spore chatbot-trafikk i analyseplattformen din.

Fordeler

• Spor konverteringer: Overvåk hvilke chatbot-interaksjoner som gir flest konverteringer på nettstedet ditt.
• Analyser brukeradferd: Forstå hvordan brukere navigerer på siden etter å ha brukt chatboten.
• Attribuer kampanjer: Mål effekten av kampanjer som får brukere til å ta i bruk chatboten.

Hendelseshåndterere: Reager på chatbot-handlinger

Flowhunt lar deg sette opp hendelseshåndterere som utløser egendefinerte funksjoner når visse hendelser skjer i chatboten. Disse håndtererne gir deg presis kontroll over brukeropplevelsen. De viktigste hendelseshåndtererne er:

• onSessionCreated: Utløses når en ny chatbot-økt startes (også ved omstart av økten!).
• onWindowOpened: Utløses når chatbot-vinduet åpnes.
• onWindowClosed: Utløses når chatbot-vinduet lukkes.
• onError: Utløses når det oppstår en feil i chatboten.
• onMessageReceived: Utløses når boten sender en melding og når en bruker sender inn et svar.
• onMessageSent: Utløses når brukeren sender en melding.

Slik bruker du hendelseshåndterere

Du kan sette opp håndterere ved å bruke fhChatbot-variabelen som returneres fra FHChatbot.initChatbot, og legge til lyttere som fhChatbot.onSessionCreated(). Her er et eksempel:

<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 () {
      // Custom logic when the session is created, could fire API calls, or store data
      console.log("session started");
    });
    
    fhChatbot.onWindowOpened(function () {
      // custom logic when the window opens, or show some content above the chat
      console.log("window opened");
    });
    
    fhChatbot.onWindowClosed(function () {
      // custom logic when the window is closed, or show some content above the chat
      console.log("window closed");
    });
    
    fhChatbot.onError(function (e) {
      // custom logic when an error is fired, could track it on error tracking tool.
      console.log(e.metadata);
      console.log("window error");
    });
    
    fhChatbot.onMessageReceived(function (e) {
      // custom logic when the bot answered.
      console.log("chatbot answered");
    });
    
    fhChatbot.onMessageSent(function (e) {
      // custom logic when the user sent an input.
      console.log("user sent an input");
    });
  }
);
</script>

Hver hendelseshåndterer kan kjøre egendefinert logikk for å få chatboten til å reagere dynamisk på brukerens adferd.

Bruksområder:

• Analyse og rapportering: Spor start av økter og chatbot-bruk med onSessionStart og andre hendelser for å sende verdifulle måledata.
• Dynamiske UI-oppdateringer: Endre siden din basert på chatbot-hendelser (f.eks. vis en annen melding når chatten er aktiv).
• Feilhåndtering: Fang opp og håndter chatbot-feil for å forbedre brukeropplevelsen.
• Egendefinerte brukerflyter: Implementer logikk basert på brukerens interaksjon med chatten.

Egendefinert chataktivering: Åpne og lukk på dine premisser

Ved å sette showChatButton: false kan du skjule standard chat-knapp. Deretter kan du programmessig åpne eller lukke chatbot-vinduet basert på din egen logikk. Dette gir deg full kontroll over brukergrensesnittet.

Slik bruker du egendefinert aktivering

1. Deaktiver standardknappen: I dine FHChatbot.initChatbot()-valg, legg til: showChatButton: false.
2. Styr programmessig: Bruk metodene fhChatbot.openChat() og fhChatbot.closeChat() for å styre synligheten basert på egendefinerte hendelser.

<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
    }); 
    
    // Example: if user clicks on a button 
    const customChatButton = document.getElementById("myCustomChatButton")
    customChatButton.addEventListener("click", () => {
      fhChatbot.openChat();
    });

    // Example: if user closes by using a custom close button
    const customCloseChatButton = document.getElementById("myCustomCloseChatButton")
    customCloseChatButton.addEventListener("click", () => {
      fhChatbot.closeChat();
    });
  }
);
</script>

I dette eksempelet har vi lagt til lyttere på egendefinerte knapper for å åpne eller lukke chatten.

Fordeler:

• Egendefinert design: Integrer chatboten med nettstedets utseende og følelse, ved å bruke en egendefinert knapp eller andre triggere for å starte chatten.
• Brukerflyt-kontroll: Start chatboten på spesifikke punkter i brukerreisen, for å gi kontekstuell støtte.
• Strategisk plassering: Bruk animasjoner eller andre visuelle indikatorer for å trekke brukerens oppmerksomhet mot chatboten når det er riktig tidspunkt.

Ved å bruke flytvariabler, URL-suffikser, hendelseshåndterere og egendefinert chataktivering, kan du lage svært tilpassede og engasjerende chatbot-opplevelser med Flowhunt. Disse avanserte alternativene gir deg verktøyene du trenger for å finjustere chatboten slik at den passer perfekt til dine forretningsbehov og brukernes forventninger.