Intégration JS API

Référence complète pour l’intégration de FlowHunt JS API v2. Intégrez le chatbot, abonnez-vous aux 11 événements, utilisez les variables de flux, déclenchez le trigger Chat Hook en cours de conversation avec sendHook(), suivez les interactions avec les paramètres URL et contrôlez la fenêtre de chat par programmation.

FlowHunt JavaScript API Chatbot Integration

La FlowHunt JS API vous donne un contrôle total sur la façon dont votre chatbot s’intègre à votre site web. En utilisant le code d’intégration v2, vous pouvez intégrer le chatbot, vous abonner aux événements de cycle de vie et d’interaction, transmettre des données dynamiques via des variables de flux, déclencher le trigger Chat Hook en cours de conversation avec sendHook(), suivre les interactions avec des paramètres URL et contrôler la fenêtre de chat par programmation.

Ce guide couvre tous les aspects de la JS API avec des exemples de code que vous pouvez copier et adapter à votre projet.

Code d’intégration (v2)

Copiez et collez l’extrait ci-dessous dans votre HTML juste avant la balise fermante </body>. Remplacez YOUR_CHATBOT_ID et YOUR_WORKSPACE_ID par les valeurs de vos paramètres de chatbot FlowHunt.

<script id="fh-chatbot-script-YOUR_CHATBOT_ID">
  var currentScript = document.currentScript
    || document.getElementById('fh-chatbot-script-YOUR_CHATBOT_ID');

  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://app.flowhunt.io/api/chatbot/YOUR_CHATBOT_ID'
    + '?workspace_id=YOUR_WORKSPACE_ID&v=2';

  script.onload = function () {
    window.FHChatbot_YOUR_CHATBOT_ID.init(function (chatbotManager) {
      // The chatbot is ready — use chatbotManager here
    });
  };

  if (currentScript && currentScript.parentNode) {
    currentScript.parentNode.insertBefore(script, currentScript.nextSibling);
  } else {
    document.head.appendChild(script);
  }
</script>

L’ID du chatbot dans le nom de la variable globale (window.FHChatbot_YOUR_CHATBOT_ID) utilise des underscores au lieu de tirets.

Remplacer la configuration avec setConfig()

Avant d’appeler init(), vous pouvez remplacer les paramètres par défaut du chatbot en utilisant setConfig() :

<script id="fh-chatbot-script-YOUR_CHATBOT_ID">
  var currentScript = document.currentScript
    || document.getElementById('fh-chatbot-script-YOUR_CHATBOT_ID');

  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://app.flowhunt.io/api/chatbot/YOUR_CHATBOT_ID'
    + '?workspace_id=YOUR_WORKSPACE_ID&v=2';

  script.onload = function () {
    window.FHChatbot_YOUR_CHATBOT_ID.setConfig({
      headerTitle: 'Support Assistant',
      maxWindowWidth: '700px',
      showChatButton: false,
      flowVariables: {
        userId: '12345',
        plan: 'enterprise',
      },
      urlSuffix: '?utm_source=chatbot',
    });

    window.FHChatbot_YOUR_CHATBOT_ID.init(function (chatbotManager) {
      // Chatbot initialised with custom config
    });
  };

  if (currentScript && currentScript.parentNode) {
    currentScript.parentNode.insertBefore(script, currentScript.nextSibling);
  } else {
    document.head.appendChild(script);
  }
</script>

Options de configuration disponibles

OptionTypeDescription
headerTitlestringTexte personnalisé du titre de l’en-tête
maxWindowWidthstringLargeur maximale de la fenêtre de chat (par exemple, "700px")
maxWindowHeightstringHauteur maximale de la fenêtre de chat
inputPlaceholderstringTexte d’espace réservé pour le champ de saisie des messages
showChatButtonbooleanAfficher ou masquer le bouton de chat flottant par défaut
openChatPanelbooleanOuvrir automatiquement le panneau de chat au chargement de la page
flowVariablesobjectPaires clé-valeur de données personnalisées transmises au flux. Les valeurs peuvent être de tout type sérialisable en JSON (chaîne, nombre, booléen, objet, tableau).
urlSuffixstringChaîne de requête ajoutée à toutes les URL générées par le chatbot
cookieConsentbooleanActiver la persistance de session via les cookies
embeddedstringActiver le mode intégré (pas de bouton de fermeture)
themestringMode de thème

Variables de flux : transmettre des données dynamiques

Les flowVariables sont fusionnées dans chaque session créée par le chatbot. Elles sont généralement utilisées comme contexte statique (connu au chargement de la page) : l’ID de l’utilisateur, son plan, la locale courante, etc.

window.FHChatbot_YOUR_CHATBOT_ID.setConfig({
  flowVariables: {
    userId: getCurrentUserId(),
    userEmail: getCurrentUserEmail(),
    currentPage: window.location.pathname,
    plan: 'enterprise',
  },
});

Si l’utilisateur navigue après l’ouverture du chat, les valeurs transmises ici deviennent obsolètes. Pour les mettre à jour en cours de conversation, appelez chatbotManager.sendHook() avec options.flowVariables — voir Communication hôte → flux en cours de conversation ci-dessous.

Suffixe URL : suivre les interactions du chatbot

Le paramètre urlSuffix ajoute une chaîne de requête à chaque URL générée par le chatbot. Ceci est utile pour suivre le trafic provenant du chatbot dans les outils d’analyse :

window.FHChatbot_YOUR_CHATBOT_ID.setConfig({
  urlSuffix: '?utm_source=chatbot&utm_medium=widget',
});

Cas d’utilisation :

  • Suivre les conversions des interactions du chatbot dans Google Analytics.
  • Analyser le comportement des utilisateurs après leur engagement avec le chatbot.
  • Attribuer les campagnes qui stimulent l’engagement du chatbot.
Logo

Prêt à développer votre entreprise?

Commencez votre essai gratuit aujourd'hui et voyez les résultats en quelques jours.

Demander une démo Se connecter

Communication hôte → flux en cours de conversation

Ajouté en avril 2026 dans le cadre de la fonctionnalité FlowHunt Chat Hook.

Dans les applications monopage (SPA), la fenêtre de chat reste généralement ouverte pendant que l’utilisateur navigue entre les écrans. Une fois le chat lancé, les flowVariables transmises via setConfig() deviennent obsolètes, et il n’existe aucun moyen de signaler au flux qu’un événement s’est produit sur la page hôte. Une seule méthode du gestionnaire — sendHook(name, payload, options?) — couvre à la fois les cas d’usage « déclencher un trigger » et « simplement mettre à jour le contexte » :

  • Transmettez un name et (en option) un payload pour déclencher le trigger Chat Hook du flux. L’auteur du flux place un seul nœud Chat Hook sur le canevas et branche sur {ChatHook.hook_name} pour décider de l’action à effectuer.
  • Transmettez options.flowVariables pour fusionner les variables de session en même temps — les valeurs sont persistées avant que le trigger ne se déclenche et restent disponibles pour le reste de la session.
  • Si le flux n’a pas de trigger Chat Hook, l’appel est un no-op silencieux 200 : options.flowVariables est tout de même fusionné, mais aucun trigger ne s’exécute et aucun crédit n’est facturé. Cela signifie que les pages hôtes peuvent appeler sendHook() de manière optimiste sans savoir si l’auteur du flux a déjà relié un trigger.

sendHook() est un no-op sûr avant l’existence de la session (mis en mémoire tampon en interne et envoyé une fois la session créée) et ne lève jamais d’exception vers la page hôte — les erreurs réseau sont uniquement enregistrées via console.warn.

Limites d’entrée

Bornes côté serveur et côté client qui s’appliquent à sendHook(). Les enfreindre n’est pas un crash — le backend renvoie HTTP 422 et le gestionnaire enregistre via console.warn sans lever d’exception.

ContrainteLimiteApplicationEn cas de violation
Longueur de name pour sendHook1–256 car.Backend (Pydantic)HTTP 422, le trigger ne se déclenche pas
Nombre de clés dans options.flowVariables≤ 64Backend (Pydantic)HTTP 422, rien n’est persisté
Longueur de chaque clé dans options.flowVariables≤ 128 car.Backend (Pydantic)HTTP 422, rien n’est persisté
Appels pré-session mis en tampon par le gestionnaire50Widget (navigateur)L’appel le plus ancien est supprimé et un console.warn est enregistré

Le plafond du tampon pré-session ne compte que sur les pages où la création de session échoue indéfiniment (par exemple, une erreur réseau permanente). Dans des conditions normales, la file d’attente est vidée dès que onFHChatbotSessionCreated se déclenche.

1. Ajouter un trigger Chat Hook (côté auteur du flux)

  1. Ouvrez le flux associé à votre chatbot dans l’éditeur FlowHunt.
  2. Faites glisser un nœud trigger Chat Hook sur le canevas. L’éditeur impose un seul trigger par flux — plusieurs ne sont pas autorisés.
  3. (Optionnel) Activez Validate Payload Schema et définissez un JSON Schema auquel le payload entrant doit correspondre. La validation s’exécute à l’intérieur de l’étape — une non-correspondance apparaît comme un événement d’erreur de flux (l’endpoint renvoie tout de même 200 ; l’erreur est visible via onFHError).
  4. Reliez les sorties du trigger (hook_name, payload, flow_variables) aux étapes en aval que vous souhaitez déclencher (Generator, Chat Output, Tool Calls, branches conditionnelles sur hook_name, etc.).
  5. Publiez le flux.

2. Brancher sur différents noms de hook à l’intérieur du flux

Le name que la page hôte transmet à sendHook() est une étiquette sur laquelle votre flux peut brancher, et non une clé de routage — le backend ne fait pas correspondre les noms aux nœuds. À la place, l’unique trigger Chat Hook du flux se déclenche et expose le nom comme {ChatHook.hook_name}, que vous référencez dans la logique de votre flux pour décider de l’action à effectuer.

Exemple de prompt système :

If {ChatHook.hook_name} is "screen_changed", briefly summarise the page at
{ChatHook.payload.url}. If it is "user_action", acknowledge the action and
update memory. Otherwise, continue the conversation normally.

Pour un routage plus complexe, reliez une étape conditionnelle sur {ChatHook.hook_name} et créez plusieurs chemins en aval.

3. chatbotManager.sendHook(name, payload, options?)

chatbotManager.sendHook(
  name: string,
  payload?: Record<string, unknown>,
  options?: { flowVariables?: Record<string, unknown> }
): Promise<void>;

Arguments

ArgumentTypeRequisDescription
namestringouiÉtiquette transmise au flux comme {ChatHook.hook_name}. Le trigger se déclenche quelle que soit la valeur ; la logique de votre flux branche dessus.
payloadobjectnonPayload JSON remis au trigger comme {ChatHook.payload}. Validé par rapport au schéma du nœud si activé. Par défaut {}.
options.flowVariablesobjectnonVariables de session à fusionner avant que le trigger ne se déclenche. Disponibles pour les étapes en aval et les futurs messages utilisateur.

Comportement

  • Appeler avant onFHChatbotSessionCreated est sûr ; l’appel est mis en mémoire tampon et envoyé une fois la session créée. Le tampon est plafonné — voir Limites d’entrée ci-dessus.
  • Si le flux n’a pas de trigger Chat Hook, la requête est un no-op silencieux 200 — les pages hôtes peuvent donc appeler sendHook() de manière optimiste avant que l’auteur du flux ne relie un trigger. options.flowVariables est tout de même persisté dans ce cas, donc le même appel sert également de mise à jour contextuelle uniquement.
  • Si le trigger Chat Hook a la validation de schéma activée et que le payload échoue à la validation, celle-ci s’exécute à l’intérieur de l’étape — l’endpoint renvoie 200 mais le flux émet un événement d’erreur d’étape (observable via onFHError).
  • name et options.flowVariables sont bornés — voir Limites d’entrée ci-dessus. Les violations renvoient HTTP 422 et rien n’est persisté.
  • Les appels réussis émettent un événement onFHChatbotFlowVariablesUpdate si options.flowVariables a été fourni (voir Référence des événements).
  • Ne lève jamais d’exception. Les défaillances réseau et les réponses non 2xx sont enregistrées via console.warn.

Exemple — suggestion proactive lors d’une navigation SPA

window.FHChatbot_YOUR_CHATBOT_ID.init(function (chatbotManager) {
  window.addEventListener('hashchange', function () {
    chatbotManager.sendHook('screen_changed', {
      url: window.location.href,
      screen_name: getScreenName(),
    }, {
      flowVariables: { current_page_url: window.location.href },
    });
  });
});

Exemple — mise à jour contextuelle uniquement (pas de Chat Hook relié)

Si le flux n’a pas de trigger Chat Hook, l’appel est un 200 silencieux — la même API peut donc maintenir flow_variables à jour sans rien déclencher :

window.FHChatbot_YOUR_CHATBOT_ID.init(function (chatbotManager) {
  window.addEventListener('hashchange', function () {
    chatbotManager.sendHook('navigate', {}, {
      flowVariables: {
        current_page_url: window.location.href,
        screen_name: getScreenName(),
      },
    });
  });
});

4. Comment l’auteur du flux consomme ces valeurs

  • {ChatHook.hook_name} et {ChatHook.payload.foo} — les valeurs transmises via sendHook('x', { foo: 1 }) sont exposées sur le chemin d’exécution du trigger Chat Hook. Disponibles uniquement sur le chemin lancé par le déclenchement du hook.
  • {flow_variables.foo} — les valeurs transmises via options.flowVariables sont fusionnées dans le sac de variables de la session avant que le trigger ne se déclenche. Chaque chemin d’exécution (y compris les messages utilisateur normaux déclenchés par Chat Input) peut les lire.

Si vous voulez que le prochain message utilisateur voie une nouvelle valeur, placez-la dans options.flowVariables — le payload seul n’affecte que l’exécution lancée par ce hook.

Référence des événements

La FlowHunt JS API envoie 11 événements personnalisés sur l’objet window. Tous les événements utilisent l’API CustomEvent avec bubbles: true et composed: true.

onFHChatbotReady

Déclenché lorsque le widget du chatbot est entièrement rendu et prêt à être utilisé.

  • Données de l’événement : aucune.
  • Quand : après que le DOM du widget est monté et que le bouton de chat est visible.

onFHChatbotSessionCreated

Déclenché lorsqu’une nouvelle session de chat est créée sur le serveur.

  • Données de l’événement : event.detail.sessionId — l’ID de la session nouvellement créée.
  • Quand : après un appel API réussi de création de session.

onFHChatbotWindowOpened

Déclenché lorsque l’utilisateur ouvre la fenêtre de chat. Non déclenché en mode intégré.

onFHChatbotWindowClosed

Déclenché lorsque l’utilisateur ferme la fenêtre de chat. Non déclenché en mode intégré.

onFHMessageSent

Déclenché lorsque l’utilisateur envoie un message.

event.detail.metadata = {
  content: 'Hello, I need help with...',
  createdAt: '2026-02-19T10:30:00.000Z',
};

onFHMessageReceived

Déclenché lorsque le chatbot reçoit et affiche une réponse.

event.detail.metadata = {
  flow_id: 'abc123',
  message_id: 'msg_456',
  message: 'Sure, I can help you with that!',
  sender: {
    sender_name: 'Support Agent',
    sender_avatar: 'https://example.com/avatar.png',
  },
};

sender est optionnel et n’est présent que lorsqu’un agent humain est impliqué.

onFHFormDataSent

Déclenché lorsque l’utilisateur soumet des données de formulaire via le chatbot.

event.detail.metadata = {
  objectData: { name: 'John', email: 'john@example.com' },
  createdAt: '2026-02-19T10:31:00.000Z',
};

onFHFeedback

Déclenché lorsqu’un utilisateur donne un avis positif ou négatif (pouce en haut / pouce en bas) sur un message du chatbot.

event.detail.metadata = {
  message_id: 'msg_456',
  content: 'Optional feedback text',
  feedback: 'P', // 'P' = positive, 'N' = negative
};

onFHToolCall

Déclenché lorsqu’un outil ou une action est exécuté pendant le traitement du flux. Déclenché uniquement dans les modes flowAssistant et flowAssistantV3.

event.detail.metadata = {
  metadata: {
    flow_id: 'abc123',
    message_id: 'msg_789',
    message: 'Calling search API...',
  },
  createdAt: '2026-02-19T10:32:00.000Z',
};

onFHError

Déclenché lorsqu’une erreur survient pendant le fonctionnement du chatbot.

event.detail.metadata = {
  metadata: {
    flow_id: 'abc123',
    message_id: 'msg_err',
    message: 'Flow execution failed',
  },
  createdAt: '2026-02-19T10:33:00.000Z',
};

onFHChatbotFlowVariablesUpdate

Ajouté en avril 2026.

Déclenché après un appel chatbotManager.sendHook(...) réussi qui a fourni options.flowVariables. Non déclenché pour les appels sendHook() qui omettent flowVariables.

event.detail = {
  variables: {
    current_page_url: 'https://example.com/products',
    screen_name: 'products',
  },
};

Utilisez-le pour observer les variables fusionnées (par exemple pour synchroniser votre propre état côté hôte, pour le débogage, ou pour re-rendre un élément d’interface qui dépend des mêmes données).

S’abonner aux événements

Il existe deux façons de s’abonner aux événements du chatbot.

Méthode 1 : écouteurs d’événements Window

Utilisez window.addEventListener n’importe où dans votre page. Cela fonctionne même avant le chargement du chatbot :

<script>
document.addEventListener('DOMContentLoaded', function () {
  window.addEventListener('onFHChatbotReady', function () {
    console.log('Chatbot is ready');
  });

  window.addEventListener('onFHChatbotSessionCreated', function (event) {
    console.log('Session created:', event.detail.sessionId);
  });

  window.addEventListener('onFHChatbotWindowOpened', function () {
    console.log('Chat window opened');
  });

  window.addEventListener('onFHChatbotWindowClosed', function () {
    console.log('Chat window closed');
  });

  window.addEventListener('onFHMessageSent', function (event) {
    console.log('User sent:', event.detail.metadata.content);
  });

  window.addEventListener('onFHMessageReceived', function (event) {
    console.log('Bot replied:', event.detail.metadata.message);
  });

  window.addEventListener('onFHFormDataSent', function (event) {
    console.log('Form submitted:', event.detail.metadata.objectData);
  });

  window.addEventListener('onFHFeedback', function (event) {
    var fb = event.detail.metadata;
    console.log('Feedback on message', fb.message_id, ':', fb.feedback);
  });

  window.addEventListener('onFHToolCall', function (event) {
    console.log('Tool called:', event.detail.metadata);
  });

  window.addEventListener('onFHError', function (event) {
    console.error('Chatbot error:', event.detail.metadata);
  });

  window.addEventListener('onFHChatbotFlowVariablesUpdate', function (event) {
    console.log('Variables merged:', event.detail.variables);
  });
});
</script>

Pour supprimer un écouteur, conservez la référence du gestionnaire :

var handleMessage = function (event) {
  console.log(event.detail.metadata);
};
window.addEventListener('onFHMessageReceived', handleMessage);
// Later …
window.removeEventListener('onFHMessageReceived', handleMessage);

Méthode 2 : méthodes de callback du gestionnaire

À l’intérieur du callback init(), utilisez les méthodes intégrées du gestionnaire de chatbot :

window.FHChatbot_YOUR_CHATBOT_ID.init(function (chatbotManager) {
  chatbotManager.onSessionCreated(function () {
    console.log('Session created');
  });

  chatbotManager.onWindowOpened(function () {
    console.log('Window opened');
  });

  chatbotManager.onWindowClosed(function () {
    console.log('Window closed');
  });

  chatbotManager.onMessageSent(function (event) {
    console.log('User sent:', event.metadata);
  });

  chatbotManager.onMessageReceived(function (event) {
    console.log('Bot replied:', event.metadata);
  });

  chatbotManager.onFormDataSent(function (event) {
    console.log('Form data:', event.metadata);
  });

  chatbotManager.onFeedback(function (event) {
    console.log('Feedback:', event.metadata);
  });

  chatbotManager.onToolCall(function (event) {
    console.log('Tool call:', event.metadata);
  });

  chatbotManager.onError(function (event) {
    console.error('Error:', event.metadata);
  });
});

Référence des méthodes du gestionnaire

MéthodeParamètresDescription
onSessionCreated(fn)fn: () => voidÉcouter la création de session
onWindowOpened(fn)fn: () => voidÉcouter l’ouverture de la fenêtre
onWindowClosed(fn)fn: () => voidÉcouter la fermeture de la fenêtre
onMessageSent(fn)fn: (event) => voidÉcouter les messages de l’utilisateur
onMessageReceived(fn)fn: (event) => voidÉcouter les réponses du bot
onFormDataSent(fn)fn: (event) => voidÉcouter les soumissions de formulaires
onFeedback(fn)fn: (event) => voidÉcouter les retours de l’utilisateur
onToolCall(fn)fn: (event) => voidÉcouter les exécutions d’outils
onError(fn)fn: (event) => voidÉcouter les erreurs
openChat()—Ouvrir le panneau de chat
closeChat()—Fermer le panneau de chat
sendHook(name, payload?, options?) (nouveau)name: string, payload?: object, options?: { flowVariables?: object }Déclencher le trigger Chat Hook dans le flux en cours d’exécution (ou fusionner silencieusement options.flowVariables si aucun trigger n’est relié)

Activation personnalisée du chat : masquer le bouton et ouvrir au clic

Pour contrôler entièrement quand le chatbot apparaît, masquez le bouton flottant par défaut et ouvrez le chat par programmation — par exemple, depuis votre propre bouton personnalisé.

<button id="my-chat-button">Chat with us</button>

<script id="fh-chatbot-script-YOUR_CHATBOT_ID">
  var currentScript = document.currentScript
    || document.getElementById('fh-chatbot-script-YOUR_CHATBOT_ID');

  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://app.flowhunt.io/api/chatbot/YOUR_CHATBOT_ID'
    + '?workspace_id=YOUR_WORKSPACE_ID&v=2';

  script.onload = function () {
    window.FHChatbot_YOUR_CHATBOT_ID.setConfig({ showChatButton: false });

    window.FHChatbot_YOUR_CHATBOT_ID.init(function (chatbotManager) {
      document.getElementById('my-chat-button')
        .addEventListener('click', function () {
          chatbotManager.openChat();
        });
    });
  };

  if (currentScript && currentScript.parentNode) {
    currentScript.parentNode.insertBefore(script, currentScript.nextSibling);
  } else {
    document.head.appendChild(script);
  }
</script>

Afficher un bouton personnalisé uniquement lorsque le chatbot est prêt

Vous pouvez combiner l’activation masquée avec des écouteurs d’événements pour créer des interactions avancées :

<button id="open-chat" style="display:none;">Need help?</button>

<script>
  window.addEventListener('onFHChatbotReady', function () {
    document.getElementById('open-chat').style.display = 'block';
  });
</script>

<script id="fh-chatbot-script-YOUR_CHATBOT_ID">
  var currentScript = document.currentScript
    || document.getElementById('fh-chatbot-script-YOUR_CHATBOT_ID');

  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://app.flowhunt.io/api/chatbot/YOUR_CHATBOT_ID'
    + '?workspace_id=YOUR_WORKSPACE_ID&v=2';

  script.onload = function () {
    window.FHChatbot_YOUR_CHATBOT_ID.setConfig({ showChatButton: false });

    window.FHChatbot_YOUR_CHATBOT_ID.init(function (chatbotManager) {
      document.getElementById('open-chat')
        .addEventListener('click', function () {
          chatbotManager.openChat();
        });
    });
  };

  if (currentScript && currentScript.parentNode) {
    currentScript.parentNode.insertBefore(script, currentScript.nextSibling);
  } else {
    document.head.appendChild(script);
  }
</script>

Exemple d’intégration complet

Un exemple fonctionnel complet qui démontre les remplacements de configuration, le suivi des événements, l’activation personnalisée du chat et la nouvelle méthode sendHook() ensemble :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FlowHunt Chatbot Integration</title>
  </head>
  <body>
    <h1>My Website</h1>
    <button id="open-chat-btn">Talk to our AI assistant</button>
    <button id="close-chat-btn">Close chat</button>

    <!-- Subscribe to events before the chatbot loads -->
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        window.addEventListener('onFHChatbotReady', function () {
          console.log('Chatbot widget is ready');
        });

        window.addEventListener('onFHChatbotSessionCreated', function (event) {
          console.log('New chat session started:', event.detail.sessionId);
        });

        window.addEventListener('onFHMessageSent', function (event) {
          console.log('User message:', event.detail.metadata.content);
        });

        window.addEventListener('onFHMessageReceived', function (event) {
          console.log('Bot response:', event.detail.metadata.message);
        });

        window.addEventListener('onFHChatbotFlowVariablesUpdate', function (event) {
          console.log('Context updated:', event.detail.variables);
        });

        window.addEventListener('onFHError', function (event) {
          console.error('Chatbot error:', event.detail.metadata);
        });
      });
    </script>

    <!-- FlowHunt integration -->
    <script id="fh-chatbot-script-YOUR_CHATBOT_ID">
      var currentScript = document.currentScript
        || document.getElementById('fh-chatbot-script-YOUR_CHATBOT_ID');

      var script = document.createElement('script');
      script.async = true;
      script.src = 'https://app.flowhunt.io/api/chatbot/YOUR_CHATBOT_ID'
        + '?workspace_id=YOUR_WORKSPACE_ID&v=2';

      script.onload = function () {
        window.FHChatbot_YOUR_CHATBOT_ID.setConfig({
          showChatButton: false,
          headerTitle: 'AI Assistant',
          maxWindowWidth: '600px',
          flowVariables: {
            source: 'website',
            current_page_url: window.location.href,
          },
          urlSuffix: '?utm_source=chatbot',
        });

        window.FHChatbot_YOUR_CHATBOT_ID.init(function (chatbotManager) {
          // Open / close from custom buttons
          document.getElementById('open-chat-btn')
            .addEventListener('click', function () {
              chatbotManager.openChat();
            });
          document.getElementById('close-chat-btn')
            .addEventListener('click', function () {
              chatbotManager.closeChat();
            });

          // Keep the flow's context in sync with SPA navigation and
          // optionally fire the Chat Hook trigger (if the flow has one wired).
          // If the flow has no Chat Hook, the call is a silent 200 — the
          // flow_variables still get merged, so the same line covers both
          // "notify the flow" and "just update context".
          window.addEventListener('hashchange', function () {
            chatbotManager.sendHook('screen_changed', {
              url: window.location.href,
            }, {
              flowVariables: { current_page_url: window.location.href },
            });
          });
        });
      };

      if (currentScript && currentScript.parentNode) {
        currentScript.parentNode.insertBefore(script, currentScript.nextSibling);
      } else {
        document.head.appendChild(script);
      }
    </script>
  </body>
</html>

Questions fréquemment posées

En savoir plus

Démarrage avec FlowHunt
Démarrage avec FlowHunt

Démarrage avec FlowHunt

Nouveau sur FlowHunt? Commencez ici. Apprenez les bases de la construction de flux d'IA, du déploiement de chatbots et de la connexion de sources de connaissanc...

8 min de lecture
Getting Started