FlowHunt JS APIxa0: Personnalisation avancée du chatbot

Flowhunt regorge de fonctionnalités puissantes qui permettent une personnalisation poussée du comportement de votre chatbot et une intégration transparente à votre site ou application. Sur cette page, vous apprendrez à effectuer des personnalisations avancées : variables de flux, paramètres d’URL, callbacks pilotés par événements et logique d’activation personnalisée du chat.

Variables de flux : personnalisez l’expérience de chat

Les variables de flux offrent un moyen de transmettre des données dynamiques au chatbot pour une véritable personnalisation. Vous pouvez stocker tout type d’information dans ces variables : données utilisateur, données de session, ou toute information pertinente.

Comment utiliser flowVariable

Le flowVariable fait partie de la configuration de FHChatbot.initChatbot(). C’est un objet où chaque paire clé-valeur définit une variable et sa valeur. Exemple – Transmettre l’adresse IP de l’utilisateur et l’identifiant utilisateur :

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

Notes importantes :

• Remplacez /* Code to obtain IP Address */ et /* Code to obtain User ID */ par votre logique réelle pour récupérer ces valeurs depuis votre système. Cela implique souvent d’accéder à des variables côté serveur, au stockage local, ou d’utiliser d’autres méthodes d’authentification.
• Une fois transmises, ces variables sont disponibles dans votre logique de chatbot, permettant des réponses dynamiques et des workflows personnalisés.
• La logique du chatbot peut lire et utiliser ces variables pour personnaliser les conversations et les rendre plus contextuelles.

urlSuffix : suivez et analysez les interactions du chatbot

Le paramètre urlSuffix vous permet d’ajouter une chaîne de requête à la fin de chaque URL appelée par le chatbot. C’est précieux pour suivre l’origine et l’efficacité de vos interactions chatbot via des outils d’analyse comme Google Analytics.

Comment utiliser urlSuffix

Définissez simplement la propriété urlSuffix sur la chaîne de requête souhaitée, comme ceci :

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

Dans cet exemple, ?utm_source=your-custom-source sera ajouté à toutes les URLs initiées par le chatbot, vous permettant de suivre le trafic chatbot dans votre plateforme analytique.

Bénéfices

• Suivi des conversions : Surveillez quelles interactions du chatbot génèrent le plus de conversions sur votre site.
• Analyse du comportement utilisateur : Comprenez comment les utilisateurs naviguent sur votre site après avoir interagi avec le chatbot.
• Attribution des campagnes : Mesurez l’efficacité des campagnes qui encouragent l’engagement avec le chatbot.

Gestionnaires d’événements : réagissez aux actions du chatbot

Flowhunt vous permet de configurer des gestionnaires d’événements qui déclenchent des fonctions personnalisées lorsque certains événements ont lieu dans le chatbot. Ces gestionnaires vous donnent un contrôle précis sur l’expérience utilisateur. Les principaux gestionnaires sont :

• onSessionCreated : déclenché à la création d’une nouvelle session chatbot (redémarrer la session compte aussi !).
• onWindowOpened : déclenché lorsque la fenêtre du chatbot est ouverte.
• onWindowClosed : déclenché lorsque la fenêtre du chatbot est fermée.
• onError : déclenché lorsqu’une erreur survient dans le chatbot.
• onMessageReceived : déclenché lorsque le bot envoie un message ou qu’un utilisateur saisit une entrée.
• onMessageSent : déclenché lorsque l’utilisateur envoie un message.

Comment utiliser les gestionnaires d’événements

Vous pouvez configurer les gestionnaires à l’aide de la variable fhChatbot retournée par FHChatbot.initChatbot, puis ajouter des listeners comme fhChatbot.onSessionCreated(). Voici un exemple :

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

Chaque fonction de gestionnaire d’événement peut exécuter une logique personnalisée pour permettre à votre chatbot de s’adapter dynamiquement au comportement de l’utilisateur.

Cas d’usage :

• Analytique et reporting : Suivez les débuts de sessions et l’utilisation du chatbot via onSessionStart et d’autres événements pour envoyer des métriques utiles.
• Mises à jour dynamiques de l’UI : Modifiez votre page selon les événements du chatbot (ex : afficher un message différent quand le chat est actif).
• Gestion des erreurs : Interceptez et gérez les erreurs du chatbot pour améliorer l’expérience utilisateur.
• Parcours utilisateurs sur-mesure : Implémentez une logique personnalisée basée sur les interactions avec le chat.

Activation personnalisée du chat : ouvrez et fermez selon vos règles

En définissant showChatButton: false, vous pouvez masquer le bouton de chat par défaut. Vous pourrez alors ouvrir ou fermer la fenêtre du chatbot de manière programmatique en fonction de votre logique personnalisée. Ceci vous offre un contrôle total sur l’interface utilisateur.

Comment utiliser l’activation personnalisée

1. Désactivez le bouton par défaut : Dans vos options FHChatbot.initChatbot(), ajoutez : showChatButton: false.
2. Contrôlez par programmation : Utilisez les méthodes fhChatbot.openChat() et fhChatbot.closeChat() pour gérer la visibilité selon vos propres événements.

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

Dans cet exemple, nous avons ajouté des listeners à des boutons personnalisés pour ouvrir ou fermer le chat.

Bénéfices :

• Design personnalisé : Intégrez le chatbot dans l’identité visuelle de votre site, en utilisant un bouton ou d’autres déclencheurs personnalisés pour lancer le chat.
• Contrôle du parcours utilisateur : Lancez le chatbot à des moments précis du parcours utilisateur pour renforcer le support contextuel.
• Placement stratégique : Utilisez des animations ou des indices visuels pour attirer l’attention sur le chatbot au bon moment.

En utilisant les variables de flux, les suffixes d’URL, les gestionnaires d’événements et l’activation personnalisée du chat, vous pouvez créer des expériences chatbot hautement personnalisées et engageantes avec Flowhunt. Ces options avancées vous donnent les outils pour affiner votre chatbot afin qu’il corresponde parfaitement à vos besoins métier et aux attentes de vos utilisateurs.