FlowHunt JS API: Avancerad Chatbot-anpassning

Flowhunt är fullpackad med kraftfulla funktioner som möjliggör djup anpassning av hur din chatbot beter sig och sömlöst integreras med din webbplats eller applikation. På denna sida lär du dig att utföra några avancerade anpassningar – flödesvariabler, URL-parametrar, händelsedrivna callbacks och anpassad logik för chattaktivering.

Flödesvariabler: Personalisera chattupplevelsen

Flödesvariabler ger ett sätt att skicka dynamiska data till chatboten så att den kan bli verkligt personlig. Du kan lagra vad som helst i dessa variabler; det kan vara användardata, sessionsdata eller annan relevant information.

Så här använder du flowVariable

flowVariable är en del av konfigurationen för FHChatbot.initChatbot(). Det är ett objekt där varje nyckel-värde-par definierar en variabel och dess värde. Exempel – Skicka användarens IP-adress och användar-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>

Viktiga anteckningar:

• Byt ut /* Code to obtain IP Address */ och /* Code to obtain User ID */ mot din faktiska logik för att hämta dessa värden från ditt system. Detta innebär ofta åtkomst till servervariabler, local storage eller att använda andra autentiseringsmetoder.
• När de väl skickats är dessa variabler tillgängliga i din chatbot-logik, vilket möjliggör dynamiska svar och personliga arbetsflöden.
• Chatbot-logiken kan läsa och använda dessa variabler för att personalisera konversationer och göra dem mer kontextmedvetna.

urlSuffix: Spåra och analysera chatbot-interaktioner

Parametern urlSuffix låter dig lägga till en frågesträng till slutet på varje URL som chatboten öppnar. Detta är ovärderligt för att spåra ursprunget och effektiviteten av dina chatbot-interaktioner med analysverktyg som Google Analytics.

Så här använder du urlSuffix

Ställ bara in egenskapen urlSuffix till din önskade frågesträng, så här:

<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 detta exempel kommer ?utm_source=your-custom-source att läggas till på alla URL:er som chatboten öppnar, vilket gör att du kan spåra chatbot-trafik i ditt analysverktyg.

Fördelar

• Spåra konverteringar: Följ vilka chatbot-interaktioner som leder till flest konverteringar på din webbplats.
• Analysera användarbeteende: Förstå hur användare navigerar på din sida efter att ha interagerat med chatboten.
• Kampanjattributering: Mät effektiviteten av kampanjer som uppmuntrar användare att använda chatboten.

Händelsehanterare: Reagera på chatbot-åtgärder

Flowhunt låter dig sätta upp händelsehanterare som triggar egna funktioner när vissa händelser sker i chatboten. Dessa hanterare ger dig exakt kontroll över användarupplevelsen. De viktigaste händelsehanterarna är:

• onSessionCreated: Triggas när en ny chatbotsession startas (även vid omstart!).
• onWindowOpened: Triggas när chatbot-fönstret öppnas.
• onWindowClosed: Triggas när chatbot-fönstret stängs.
• onError: Triggas när det uppstår ett fel i chatboten.
• onMessageReceived: Triggas när boten skickar ett meddelande och när en användare skickar indata.
• onMessageSent: Triggas när användaren skickar ett meddelande.

Så här använder du händelsehanterare

Du kan sätta upp hanterare via variabeln fhChatbot som returneras av FHChatbot.initChatbot, och lägga till lyssnare som fhChatbot.onSessionCreated(). Här är ett exempel:

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
// fånga händelsen när chatboten är redo på din sida
window.addEventListener("onFHChatbotReady", (e) => {
  console.log("Chatboten är redo, chattknappen bör vara synlig och redo att klickas 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 () {
      // Egen logik när sessionen skapas, t.ex. API-anrop eller datalagring
      console.log("session startad");
    });
    
    fhChatbot.onWindowOpened(function () {
      // egen logik när fönstret öppnas, t.ex. visa innehåll ovanför chatten
      console.log("fönster öppnat");
    });
    
    fhChatbot.onWindowClosed(function () {
      // egen logik när fönstret stängs, t.ex. visa innehåll ovanför chatten
      console.log("fönster stängt");
    });
    
    fhChatbot.onError(function (e) {
      // egen logik vid fel, t.ex. skicka info till felspårningsverktyg
      console.log(e.metadata);
      console.log("fönsterfel");
    });
    
    fhChatbot.onMessageReceived(function (e) {
      // egen logik när boten svarat
      console.log("chatboten svarade");
    });
    
    fhChatbot.onMessageSent(function (e) {
      // egen logik när användaren skickat indata
      console.log("användaren skickade indata");
    });
  }
);
</script>

Varje händelsehanterare kan köra egen logik för att få din chatbot att agera dynamiskt baserat på användarens beteende.

Användningsområden:

• Analys och rapportering: Spåra sessionstarter och chatbot-användning med onSessionStart och andra händelser för att skicka värdefulla mätvärden.
• Dynamiska UI-uppdateringar: Ändra din sida baserat på chatbot-händelser (t.ex. visa ett annat meddelande när chatten är aktiv).
• Felsökning: Fånga och hantera chatbot-fel för att förbättra användarupplevelsen.
• Anpassade användarflöden: Implementera egen logik baserat på användarinteraktioner med chatten.

Anpassad chattaktivering: Öppna och stäng på dina villkor

Genom att ställa in showChatButton: false kan du dölja standardknappen för chatten. Därefter kan du programmatiskt öppna eller stänga chatbot-fönstret baserat på din egen logik. Detta ger dig fullständig kontroll över användargränssnittet.

Så här använder du anpassad aktivering

1. Inaktivera standardknappen: I dina alternativ för FHChatbot.initChatbot(), lägg till: showChatButton: false.
2. Styr programmatiskt: Använd metoderna fhChatbot.openChat() och fhChatbot.closeChat() för att styra synlighet baserat på dina egna händelser.

<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
    }); 
    
    // Exempel: om användaren klickar på en knapp
    const customChatButton = document.getElementById("myCustomChatButton")
    customChatButton.addEventListener("click", () => {
      fhChatbot.openChat();
    });

    // Exempel: om användaren stänger via en egen stäng-knapp
    const customCloseChatButton = document.getElementById("myCustomCloseChatButton")
    customCloseChatButton.addEventListener("click", () => {
      fhChatbot.closeChat();
    });
  }
);
</script>

I detta exempel har vi lagt till lyssnare till egna knappar för att öppna eller stänga chatten.

Fördelar:

• Egen design: Integrera chatboten med din webbplats utseende, t.ex. med en egen knapp eller andra triggers för att starta chatten.
• Kontroll över användarflödet: Starta chatboten vid specifika tillfällen i användarresan och ge kontextuell support.
• Strategisk placering: Använd animationer eller visuella ledtrådar för att dra användarens uppmärksamhet till chatboten vid rätt tidpunkt.

Genom att använda flödesvariabler, URL-suffix, händelsehanterare och anpassad chattaktivering kan du skapa mycket anpassade och engagerande chatbotupplevelser med Flowhunt. Dessa avancerade alternativ ger dig verktygen att finjustera din chatbot så att den perfekt matchar ditt företags behov och dina användares förväntningar.