FlowHunt JS API: Geavanceerde Chatbot Aanpassing

Flowhunt zit boordevol krachtige functies waarmee je diepgaande aanpassingen kunt doen aan het gedrag van je chatbot en deze naadloos kunt integreren met je site of applicatie. Op deze pagina leer je hoe je enkele geavanceerde aanpassingen uitvoert – flow-variabelen, URL-parameters, event-driven callbacks en aangepaste chatactivatielogica.

Flow-variabelen: Personaliseer de Chatervaring

Flow-variabelen bieden een manier om dynamische gegevens aan de chatbot door te geven zodat deze echt gepersonaliseerd kan worden. Je kunt van alles in deze variabelen opslaan; het kan gebruikersdata zijn, sessiegegevens of andere relevante informatie.

Hoe gebruik je flowVariable

De flowVariable maakt deel uit van de configuratie van FHChatbot.initChatbot(). Het is een object waarbij elk key-value-paar een variabele en de waarde ervan bepaalt. Bijvoorbeeld – het doorgeven van het IP-adres van de gebruiker en een user 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 om IP-adres te verkrijgen */ ,
        "userId":  /* Code om User ID te verkrijgen */
      }
    });
  }
);
</script>

Belangrijke opmerkingen:

• Vervang /* Code om IP-adres te verkrijgen */ en /* Code om User ID te verkrijgen */ door je eigen logica om deze waardes uit je systeem te halen. Dit houdt vaak in dat je server-side variabelen, local storage of andere authenticatiemethoden gebruikt.
• Nadat je deze variabelen hebt doorgegeven, zijn ze beschikbaar in je chatbotlogica, waardoor dynamische antwoorden en gepersonaliseerde workflows mogelijk zijn.
• De chatbotlogica kan deze variabelen lezen en gebruiken om gesprekken te personaliseren en contextbewuster te maken.

urlSuffix: Volg en Analyseer Chatbotinteracties

Met de urlSuffix parameter kun je een querystring toevoegen aan het einde van elke URL die door de chatbot wordt aangeroepen. Dit is enorm waardevol om de herkomst en effectiviteit van je chatbotinteracties te volgen via analysetools zoals Google Analytics.

Hoe gebruik je urlSuffix

Stel simpelweg de urlSuffix eigenschap in op de gewenste querystring – zoals hieronder:

<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 dit voorbeeld wordt ?utm_source=your-custom-source aan alle URLs toegevoegd die de chatbot aanroept, zodat je chatbotverkeer in je analysetool kunt volgen.

Voordelen

• Conversies volgen: Zie welke chatbotinteracties het vaakst tot conversies op je website leiden.
• Gebruikersgedrag analyseren: Begrijp hoe gebruikers je site navigeren na interactie met de chatbot.
• Campagnes toewijzen: Meet het succes van campagnes die gebruikers stimuleren om met de chatbot te praten.

Event Handlers: Reageer op Chatbotacties

Met Flowhunt kun je event handlers instellen die aangepaste functies uitvoeren wanneer bepaalde gebeurtenissen optreden in de chatbot. Hiermee krijg je nauwkeurige controle over de gebruikerservaring. De belangrijkste event handlers zijn:

• onSessionCreated: Wordt getriggerd wanneer een nieuwe chatbotsessie wordt gestart (ook bij het herstarten van de sessie!).
• onWindowOpened: Wordt getriggerd wanneer het chatbotvenster wordt geopend.
• onWindowClosed: Wordt getriggerd wanneer het chatbotvenster wordt gesloten.
• onError: Wordt getriggerd wanneer er een fout optreedt in de chatbot.
• onMessageReceived: Wordt getriggerd wanneer de bot een bericht stuurt en wanneer een gebruiker input geeft.
• onMessageSent: Wordt getriggerd wanneer de gebruiker een bericht verstuurt.

Hoe gebruik je Event Handlers

Je stelt handlers in via de fhChatbot variabele die wordt teruggegeven door FHChatbot.initChatbot, en voegt listeners toe zoals fhChatbot.onSessionCreated(). Bijvoorbeeld:

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
// vang het event wanneer de chatbot klaar is op je pagina
window.addEventListener("onFHChatbotReady", (e) => {
  console.log("Chatbot is klaar, chatknop zou nu zichtbaar moeten zijn en klaar om aangeklikt te worden.");
});

(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 () {
      // Eigen logica wanneer de sessie wordt aangemaakt, zoals het uitvoeren van API-calls of data opslaan
      console.log("sessie gestart");
    });
    
    fhChatbot.onWindowOpened(function () {
      // eigen logica bij het openen van het venster, of toon extra content boven de chat
      console.log("venster geopend");
    });
    
    fhChatbot.onWindowClosed(function () {
      // eigen logica bij het sluiten van het venster, of toon extra content boven de chat
      console.log("venster gesloten");
    });
    
    fhChatbot.onError(function (e) {
      // eigen logica bij een fout, bijvoorbeeld loggen in een error tracking tool
      console.log(e.metadata);
      console.log("vensterfout");
    });
    
    fhChatbot.onMessageReceived(function (e) {
      // eigen logica als de bot heeft geantwoord
      console.log("chatbot heeft geantwoord");
    });
    
    fhChatbot.onMessageSent(function (e) {
      // eigen logica als de gebruiker een input heeft verzonden
      console.log("gebruiker heeft een input verzonden");
    });
  }
);
</script>

Elke event handler-functie kan aangepaste logica uitvoeren, zodat je chatbot dynamisch reageert op het gedrag van je gebruikers.

Toepassingen:

• Analytics en rapportage: Volg sessiestarts en chatbotgebruik met onSessionStart en andere events om waardevolle statistieken te verzamelen.
• Dynamische UI-updates: Pas je pagina aan op basis van chatbot-events (bijvoorbeeld een ander bericht tonen als de chat actief is).
• Foutafhandeling: Vang en behandel chatbotfouten om de gebruikerservaring te verbeteren.
• Aangepaste gebruikersflows: Implementeer eigen logica op basis van gebruikersinteracties met de chat.

Aangepaste Chatactivatie: Openen en Sluiten op Jouw Voorwaarden

Door showChatButton: false in te stellen, verberg je de standaard chatknop. Vervolgens kun je het chatvenster programmatisch openen of sluiten op basis van je eigen logica. Zo behoud je de volledige controle over de gebruikersinterface.

Hoe gebruik je Aangepaste Activatie

1. Schakel de standaardknop uit: Voeg in je FHChatbot.initChatbot() opties toe: showChatButton: false.
2. Beheer programmatisch: Gebruik de methodes fhChatbot.openChat() en fhChatbot.closeChat() om de zichtbaarheid te regelen op basis van eigen 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
    }); 
    
    // Voorbeeld: als gebruiker op een knop klikt
    const customChatButton = document.getElementById("myCustomChatButton")
    customChatButton.addEventListener("click", () => {
      fhChatbot.openChat();
    });

    // Voorbeeld: als gebruiker sluit via een aangepaste sluitknop
    const customCloseChatButton = document.getElementById("myCustomCloseChatButton")
    customCloseChatButton.addEventListener("click", () => {
      fhChatbot.closeChat();
    });
  }
);
</script>

In dit voorbeeld hebben we listeners toegevoegd aan aangepaste knoppen om de chat te openen of te sluiten.

Voordelen:

• Aangepast design: Integreer de chatbot volledig met de stijl van je website, door bijvoorbeeld een eigen knop of trigger te gebruiken voor het starten van de chat.
• Gebruikersflow beheren: Start de chatbot op specifieke momenten in de gebruikersreis voor contextuele ondersteuning.
• Strategische positionering: Gebruik animaties of visuele cues om juist op het juiste moment de aandacht op de chatbot te vestigen.

Door gebruik te maken van flow-variabelen, URL-suffixen, event handlers en aangepaste chatactivatie kun je met Flowhunt zeer gepersonaliseerde en boeiende chatbotervaringen creëren. Deze geavanceerde opties bieden je de tools om je chatbot optimaal af te stemmen op de behoeften van je bedrijf en je gebruikers.