FlowHunt JS API: Avanceret Chatbot-Tilpasning

Flowhunt er fyldt med stærke funktioner, der gør det muligt at tilpasse din chatbots opførsel i dybden og integrere den gnidningsløst med dit website eller applikation. På denne side lærer du at udføre avancerede tilpasninger – flowvariabler, URL-parametre, eventdrevne callbacks og specialtilpasset chataktivering.

Flowvariabler: Personalisér Chatoplevelsen

Flowvariabler giver dig mulighed for at videregive dynamiske data til chatbotten, så den kan blive ægte personlig. Du kan gemme alt i disse variabler; det kan være brugerdata, sessionsdata eller enhver anden relevant information.

Sådan bruges flowVariable

flowVariable er en del af FHChatbot.initChatbot()-konfigurationen. Det er et objekt, hvor hvert key-value-par definerer en variabel og dens værdi. Eksempel – Videregivning af brugerens IP-adresse og bruger-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>

Vigtige bemærkninger:

• Udskift /* Code to obtain IP Address */ og /* Code to obtain User ID */ med din faktiske logik til at hente disse værdier fra dit system. Dette indebærer ofte adgang til server-side variabler, local storage eller brug af andre autentificeringsmetoder.
• Når disse variabler er videregivet, er de tilgængelige i din chatbots logik, hvilket muliggør dynamiske svar og personaliserede workflow.
• Chatbotlogikken kan læse og bruge disse variabler til at personalisere samtaler og gøre dem mere kontekstbevidste.

urlSuffix: Spor og Analyser Chatbot-Interaktioner

Parameteren urlSuffix gør det muligt at tilføje en query string til slutningen af hver URL, som chatbotten kalder. Dette er uvurderligt til at spore oprindelsen og effekten af dine chatbot-interaktioner via analysetools som Google Analytics.

Sådan bruges urlSuffix

Indstil blot egenskaben urlSuffix til din ønskede query string, som vist her:

<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 eksempel vil ?utm_source=your-custom-source blive tilføjet til alle URL’er, som chatbotten initierer, så du kan spore chatbot-trafik i dit analyseværktøj.

Fordele

• Spor konverteringer: Overvåg hvilke chatbot-interaktioner der fører til flest konverteringer på dit website.
• Analyser brugeradfærd: Forstå hvordan brugere navigerer på dit site efter interaktion med chatbotten.
• Kampagneattribution: Mål effekten af kampagner, der opfordrer brugere til at engagere sig med chatbotten.

Event Handlers: Reager på Chatbot-Handlinger

Flowhunt giver dig mulighed for at opsætte event-handlers, der udløser brugerdefinerede funktioner, når bestemte hændelser sker i chatbotten. Disse handlers giver dig præcis kontrol over brugeroplevelsen. De vigtigste event-handlers omfatter:

• onSessionCreated: Udløses, når en ny chatbotsession startes (også når sessionen genstartes!).
• onWindowOpened: Udløses, når chatbot-vinduet åbnes.
• onWindowClosed: Udløses, når chatbot-vinduet lukkes.
• onError: Udløses, når der opstår en fejl i chatbotten.
• onMessageReceived: Udløses, når botten sender en besked, og når brugeren sender input.
• onMessageSent: Udløses, når brugeren sender en besked.

Sådan bruges Event Handlers

Du kan opsætte handlers ved at bruge fhChatbot-variablen, som returneres af FHChatbot.initChatbot, og tilføje 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 er klar, chatknappen bør nu være synlig og klar til at blive klikket på.");
});

(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 () {
      // Brugerdefineret logik når sessionen starter, fx API-kald eller datalagring
      console.log("session startet");
    });
    
    fhChatbot.onWindowOpened(function () {
      // Brugerdefineret logik når vinduet åbner, eller vis noget indhold over chatten
      console.log("vindue åbnet");
    });
    
    fhChatbot.onWindowClosed(function () {
      // Brugerdefineret logik når vinduet lukkes, eller vis noget indhold over chatten
      console.log("vindue lukket");
    });
    
    fhChatbot.onError(function (e) {
      // Brugerdefineret logik ved fejl, fx sporing i fejlrapporteringsværktøj
      console.log(e.metadata);
      console.log("vinduesfejl");
    });
    
    fhChatbot.onMessageReceived(function (e) {
      // Brugerdefineret logik når botten har svaret
      console.log("chatbot svarede");
    });
    
    fhChatbot.onMessageSent(function (e) {
      // Brugerdefineret logik når brugeren har sendt input
      console.log("bruger har sendt input");
    });
  }
);
</script>

Hver event-handler-funktion kan udføre brugerdefineret logik, så din chatbot kan reagere dynamisk på brugerens adfærd.

Anvendelsesmuligheder:

• Analytics og rapportering: Spor session-starts og chatbot-brug via onSessionStart og andre events for at sende værdifulde metrics.
• Dynamiske UI-opdateringer: Ændr din side baseret på chatbot-events (fx vis en anden besked når chatten er aktiv).
• Fejlhåndtering: Fang og håndtér chatbot-fejl for at forbedre brugeroplevelsen.
• Brugerdefinerede flows: Implementér logik baseret på brugerens interaktioner med chatten.

Tilpasset Chataktivering: Åbn og Luk på Dine Præmisser

Ved at sætte showChatButton: false kan du skjule standard chatknappen. Derefter kan du programmere åbning eller lukning af chatbot-vinduet ud fra din egen logik. Dette giver dig fuld kontrol over brugergrænsefladen.

Sådan bruger du Tilpasset Aktivering

1. Deaktiver standardknappen: Tilføj showChatButton: false i dine FHChatbot.initChatbot()-indstillinger.
2. Styr programmatisk: Brug metoderne fhChatbot.openChat() og fhChatbot.closeChat() til at kontrollere synligheden baseret på dine egne events.

<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
    }); 
    
    // Eksempel: hvis brugeren klikker på en knap
    const customChatButton = document.getElementById("myCustomChatButton")
    customChatButton.addEventListener("click", () => {
      fhChatbot.openChat();
    });

    // Eksempel: hvis brugeren lukker med en specialknap
    const customCloseChatButton = document.getElementById("myCustomCloseChatButton")
    customCloseChatButton.addEventListener("click", () => {
      fhChatbot.closeChat();
    });
  }
);
</script>

I dette eksempel har vi tilføjet lyttere til specialknapper for at åbne eller lukke chatten.

Fordele:

• Tilpasset design: Integrér chatbotten med dit websites visuelle stil ved at bruge en specialknap eller andre triggere til at starte chatten.
• Styring af brugerflow: Start chatbotten på bestemte tidspunkter i brugerrejsen og giv kontekstuel support.
• Strategisk placering: Brug animationer eller visuelle signaler for at tiltrække brugerens opmærksomhed på chatbotten, når det er relevant.

Ved at bruge flowvariabler, URL-suffikser, event-handlers og tilpasset chataktivering kan du skabe stærkt specialtilpassede og engagerende chatbot-oplevelser med Flowhunt. Disse avancerede muligheder giver dig værktøjerne til at finjustere din chatbot, så den matcher dine forretningsbehov og dine brugeres forventninger perfekt.