FlowHunt JS API: Erweiterte Chatbot-Anpassung

Flowhunt ist vollgepackt mit leistungsstarken Funktionen, die eine tiefgreifende Anpassung ermöglichen, wie Ihr Chatbot sich verhält und nahtlos mit Ihrer Website oder Anwendung integriert. Auf dieser Seite lernen Sie fortgeschrittene Anpassungen – Flow-Variablen, URL-Parameter, ereignisgesteuerte Callbacks und eine individuelle Chat-Aktivierungslogik – kennen.

Flow-Variablen: Das Chat-Erlebnis personalisieren

Flow-Variablen bieten eine Möglichkeit, dem Chatbot dynamische Daten zu übergeben, sodass echte Personalisierung möglich wird. Sie können beliebige Informationen speichern, z. B. Nutzerdaten, Sitzungsdaten oder sonstige relevante Informationen.

So verwenden Sie flowVariable

Das flowVariable ist Bestandteil der Konfiguration von FHChatbot.initChatbot(). Es handelt sich um ein Objekt, bei dem jedes Schlüssel-Wert-Paar eine Variable und ihren Wert definiert. Beispiel – Übergabe der IP-Adresse und der Nutzer-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>

Wichtige Hinweise:

• Ersetzen Sie /* Code to obtain IP Address */ und /* Code to obtain User ID */ durch Ihre eigene Logik, um diese Werte aus Ihrem System zu beziehen. Dies beinhaltet oft den Zugriff auf serverseitige Variablen, lokalen Speicher oder die Nutzung anderer Authentifizierungsmethoden.
• Nach der Übergabe stehen diese Variablen in Ihrer Chatbot-Logik zur Verfügung, sodass dynamische Antworten und personalisierte Workflows möglich sind.
• Die Chatbot-Logik kann diese Variablen lesen und nutzen, um Gespräche zu personalisieren und kontextbewusster zu gestalten.

urlSuffix: Chatbot-Interaktionen nachverfolgen und analysieren

Der Parameter urlSuffix ermöglicht es, einen Query-String an jede vom Chatbot aufgerufene URL anzuhängen. Das ist unverzichtbar, um mit Analysetools wie Google Analytics die Herkunft und Wirksamkeit Ihrer Chatbot-Interaktionen zu verfolgen.

So verwenden Sie urlSuffix

Setzen Sie einfach die Eigenschaft urlSuffix auf Ihren gewünschten Query-String, zum Beispiel:

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

In diesem Beispiel wird ?utm_source=your-custom-source an alle vom Chatbot initiierten URLs angehängt, sodass Sie den Chatbot-Traffic in Ihrem Analyse-Tool nachverfolgen können.

Vorteile

• Conversions nachverfolgen: Überwachen Sie, welche Chatbot-Interaktionen zu den meisten Conversions auf Ihrer Website führen.
• Nutzerverhalten analysieren: Verstehen Sie, wie sich Nutzer nach einer Chatbot-Interaktion auf Ihrer Seite bewegen.
• Kampagnen zuordnen: Messen Sie die Effektivität von Kampagnen, die Nutzer zur Chatbot-Interaktion anregen.

Ereignishandler: Auf Chatbot-Aktionen reagieren

Mit Flowhunt können Sie Ereignishandler einrichten, die benutzerdefinierte Funktionen auslösen, wenn im Chatbot bestimmte Ereignisse eintreten. Diese Handler geben Ihnen eine präzise Kontrolle über das Nutzererlebnis. Die wichtigsten Ereignishandler sind:

• onSessionCreated: Wird ausgelöst, wenn eine neue Chatbot-Sitzung gestartet wird (auch beim Neustart der Sitzung!).
• onWindowOpened: Wird ausgelöst, wenn das Chatbot-Fenster geöffnet wird.
• onWindowClosed: Wird ausgelöst, wenn das Chatbot-Fenster geschlossen wird.
• onError: Wird ausgelöst, wenn im Chatbot ein Fehler auftritt.
• onMessageReceived: Wird ausgelöst, wenn der Bot eine Nachricht sendet und wenn ein Nutzer eine Eingabe macht.
• onMessageSent: Wird ausgelöst, wenn der Nutzer eine Nachricht sendet.

So verwenden Sie Ereignishandler

Sie können Handler mit der Variablen fhChatbot, die von FHChatbot.initChatbot zurückgegeben wird, einrichten und Listener wie fhChatbot.onSessionCreated() hinzufügen. Hier ein Beispiel:

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

Jede Ereignishandler-Funktion kann eigene Logik ausführen, um das Verhalten Ihres Chatbots dynamisch an das Nutzerverhalten anzupassen.

Anwendungsfälle:

• Analysen & Berichte: Sitzungsstarts und Chatbot-Nutzung mit onSessionStart und anderen Events verfolgen, um wertvolle Metriken zu sammeln.
• Dynamische UI-Updates: Ihre Seite basierend auf Chatbot-Ereignissen anpassen (z. B. eine andere Nachricht anzeigen, wenn der Chat aktiv ist).
• Fehlerbehandlung: Chatbot-Fehler abfangen und darauf reagieren, um das Nutzererlebnis zu verbessern.
• Individuelle Nutzerflüsse: Eigene Logik auf Basis der Nutzerinteraktionen mit dem Chat einbauen.

Individuelle Chat-Aktivierung: Öffnen und Schließen nach Ihren Regeln

Indem Sie showChatButton: false setzen, können Sie den Standard-Chatbutton ausblenden. Anschließend können Sie das Chatbot-Fenster programmatisch anhand Ihrer eigenen Logik öffnen oder schließen. Das gibt Ihnen die volle Kontrolle über die Nutzeroberfläche.

So nutzen Sie die individuelle Aktivierung

1. Standard-Button deaktivieren: Fügen Sie in Ihren Optionen zu FHChatbot.initChatbot() hinzu: showChatButton: false.
2. Programmgesteuert steuern: Verwenden Sie die Methoden fhChatbot.openChat() und fhChatbot.closeChat(), um die Sichtbarkeit abhängig von Ihren eigenen Events zu steuern.

<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
    }); 
    
    // Beispiel: Wenn der Nutzer auf einen Button klickt
    const customChatButton = document.getElementById("myCustomChatButton")
    customChatButton.addEventListener("click", () => {
      fhChatbot.openChat();
    });

    // Beispiel: Wenn der Nutzer über einen eigenen Schließen-Button schließt
    const customCloseChatButton = document.getElementById("myCustomCloseChatButton")
    customCloseChatButton.addEventListener("click", () => {
      fhChatbot.closeChat();
    });
  }
);
</script>

In diesem Beispiel haben wir Listener zu benutzerdefinierten Buttons hinzugefügt, um den Chat entweder zu öffnen oder zu schließen.

Vorteile:

• Individuelles Design: Integrieren Sie den Chatbot nahtlos in das Design Ihrer Website, z. B. mit einem eigenen Button oder anderen Triggern.
• Steuerung des Nutzerflusses: Starten Sie den Chatbot gezielt an bestimmten Punkten der User Journey für kontextbezogene Unterstützung.
• Strategische Platzierung: Setzen Sie Animationen oder visuelle Hinweise ein, um die Aufmerksamkeit der Nutzer gezielt auf den Chatbot zu lenken.

Durch die Nutzung von Flow-Variablen, URL-Suffixen, Ereignishandlern und individueller Chat-Aktivierung können Sie mit Flowhunt hochgradig angepasste und ansprechende Chatbot-Erlebnisse schaffen. Diese erweiterten Optionen geben Ihnen die Werkzeuge an die Hand, um Ihren Chatbot perfekt auf Ihre geschäftlichen Anforderungen und die Erwartungen Ihrer Nutzer abzustimmen.