Vilka handelser kan jag lyssna pa med FlowHunt JS API?

FlowHunt JS API skickar 10 handelser: onFHChatbotReady, onFHChatbotSessionCreated, onFHChatbotWindowOpened, onFHChatbotWindowClosed, onFHMessageSent, onFHMessageReceived, onFHFormDataSent, onFHFeedback, onFHToolCall och onFHError. Du kan prenumerera pa dessa med window.addEventListener eller via chatbot-hanterarens callback-metoder.

Hur doljer jag standardchattknappen och oppnar chatboten programmatiskt?

Anvand konfigurationsalternativet showChatButton: false for att dolja standardknappen och anropa sedan chatbotManager.openChat() for att oppna chatboten pa dina egna villkor — till exempel vid ett klick pa en anpassad knapp.

Vad ar skillnaden mellan hanterarens callback-metoder och window.addEventListener?

Bada metoderna fungerar. Hanterarens callback-metoder (t.ex. chatbotManager.onMessageSent(fn)) anropas i init-callbacken och ar kopplade till hanterarinstansen. Metoden med window.addEventListener (t.ex. window.addEventListener('onFHMessageSent', fn)) kan konfigueras var som helst pa din sida, aven innan chatboten har laddats.

Hur skickar jag anpassad data till chatboten med hjalp av flodesvariabler?

Anvand konfigurationsalternativet flowVariables i setConfig() for att skicka nyckel-varde-par sasom anvandar-ID, e-post eller sid-URL. Dessa variabler blir tillgangliga i ditt chatbotflode for personaliserade svar.

Vilken data ar tillganglig i handelsehantarare?

Handelser som bar data inkluderar det i event.detail.metadata. Till exempel inkluderar onFHMessageSent meddelandeinnehallet och tidsstampeln, onFHMessageReceived inkluderar flow_id, message_id och meddelandetexten, och onFHFeedback inkluderar message_id och om feedbacken var positiv eller negativ.

FlowHunt JS API: Integrationsguide for avancerade anvandare

Komplett referens for FlowHunt JS API v2-integration. Lar dig hur du baddar in chatboten, prenumererar pa alla 10 handelser, anvander flodesvariabler, sparar interaktioner med URL-parametrar och styr chattfonster programmatiskt.

FlowHunt JavaScript API Chatbot Integration

FlowHunt JS API ger dig full kontroll over hur din chatbot integreras med din webbplats. Med v2-integrationskoden kan du badda in chatboten, prenumerera pa livscykel- och interaktionshendelser, skicka dynamisk data via flodesvariabler, spara interaktioner med URL-parametrar och programmatiskt styra chattfonstret.

Denna guide tacker alla aspekter av JS API med kodexempel som du kan kopiera och anpassa till ditt projekt.

Integrationskod (v2)

Nar du skapar en chatbot i FlowHunt far du ett integrationskodfragment. Kopiera och klistra in det i din HTML strax fore den avslutande </body>-taggen:

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

Ersatt YOUR_CHATBOT_ID och YOUR_WORKSPACE_ID med vardena fran din FlowHunt-instrumentpanel. Chatbot-ID:t i det globala variabelnamnet (window.FHChatbot_YOUR_CHATBOT_ID) anvander understreck istallet for bindestreck.

Overskriva konfiguration med setConfig()

Fore anrop av init() kan du overskriva standardinstellningarna for chatboten med 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 initialized with custom config
    });
  };

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

Tillgangliga konfigurationsalternativ

Option	Type	Beskrivning
`headerTitle`	string	Anpassad rubriktext
`maxWindowWidth`	string	Maximal bredd pa chattfonstret (t.ex. `'700px'`)
`maxWindowHeight`	string	Maximal hojd pa chattfonstret
`inputPlaceholder`	string	Platshallare for meddelandeinmatningsfaltet
`showChatButton`	boolean	Visa eller dolj den flytande standardchattknappen
`openChatPanel`	boolean	Oppna chattpanelen automatiskt vid sidladdning
`flowVariables`	object	Nyckel-varde-par med anpassad data som skickas till flodet
`urlSuffix`	string	Fragesrang som laggs till alla chatbot-genererade URL:er
`cookieConsent`	boolean	Aktivera sessionsbestandighet via cookies
`embedded`	string	Stall in for att aktivera inbaddat lage (ingen stangknapp)
`theme`	string	Temalage

Flodesvariabler: Skicka dynamisk data

Flodesvariabler later dig skicka anpassad data fran din webbplats till chatbotflodet. Detta mojliggor personaliserade konversationer baserade pa anvandarkontext.

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

Nar de ar installda ar dessa variabler tillgangliga i din chatbotflodes-logik, vilket gor det mojligt att personalisera svar, dirigera konversationer eller skicka kontext till AI-agenter.

URL-suffix: Spara chatbotinteraktioner

Parametern urlSuffix lagger till en fragesrang till varje URL som genereras av chatboten. Detta ar anvandbart for att spara chatbotgenererad trafik i analysverktyg:

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

Anvandningsomraden:

Spara konverteringar fran chatbotinteraktioner i Google Analytics.
Analysera anvandarbeteende efter engagement med chatboten.
Tillskriva kampanjer som driver chatbot-engagement.

Handelseoversikt

FlowHunt JS API skickar 10 anpassade handelser pa window-objektet. Alla handelser anvander CustomEvent -API:t med bubbles: true och composed: true.

onFHChatbotReady

Utloses nar chatbot-widgeten har renderats helt och ar redo att anvandas.

Handelsedata: Ingen
Nar: Efter att widgetens DOM har monterats och chattknappen ar synlig.

onFHChatbotSessionCreated

Utloses nar en ny chattsession skapas pa servern. Utloses aven nar sessionen startas om.

Handelsedata: Ingen
Nar: Efter ett lyckat API-anrop for sessionsskapande.

onFHChatbotWindowOpened

Utloses nar anvandaren oppnar chattfonstret.

Handelsedata: Ingen
Nar: Chattpanelen blir synlig.
Observera: Utloses inte i inbaddat lage.

onFHChatbotWindowClosed

Utloses nar anvandaren stanger chattfonstret.

Handelsedata: Ingen
Nar: Chattpanelen doljs.
Observera: Utloses inte i inbaddat lage.

onFHMessageSent

Utloses nar anvandaren skickar ett meddelande.

Handelsedata (event.detail.metadata):

{
  "content": "Hello, I need help with...",
  "createdAt": "2026-02-19T10:30:00.000Z"
}

onFHMessageReceived

Utloses nar chatboten tar emot och visar ett svar.

Handelsedata (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"
  }
}

Faltet sender ar valfritt och finns bara nar en mansklig agent ar inblandad.

onFHFormDataSent

Utloses nar anvandaren skickar formulerdata via chatboten.

Handelsedata (event.detail.metadata):

{
  "objectData": { "name": "John", "email": "john@example.com" },
  "createdAt": "2026-02-19T10:31:00.000Z"
}

onFHFeedback

Utloses nar en anvandare ger tumme upp eller tumme ner-feedback pa ett chatbotmeddelande.

Handelsedata (event.detail.metadata):

{
  "message_id": "msg_456",
  "content": "Optional feedback text",
  "feedback": "P"
}

Vardet for feedback ar "P" for positivt (tumme upp) eller "N" for negativt (tumme ner).

onFHToolCall

Utloses nar ett verktyg eller en aktion kors under flodesbearbetning.

Handelsedata (event.detail.metadata):

{
  "metadata": {
    "flow_id": "abc123",
    "message_id": "msg_789",
    "message": "Calling search API..."
  },
  "createdAt": "2026-02-19T10:32:00.000Z"
}

Observera: Utloses bara i flowAssistant- och flowAssistantV3-lagen, inte i standardchattbotlaget.

onFHError

Utloses nar ett fel uppstar under chatbotens drift.

Handelsedata (event.detail.metadata):

{
  "metadata": {
    "flow_id": "abc123",
    "message_id": "msg_err",
    "message": "Flow execution failed"
  },
  "createdAt": "2026-02-19T10:33:00.000Z"
}

Prenumerera pa handelser

Det finns tva satt att prenumerera pa chatbothendelser.

Metod 1: Fonsterhendelseavlyssnare

Anvand window.addEventListener var som helst pa din sida. Detta fungerar aven innan chatboten har laddats:

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

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

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

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

  // Message events
  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);
  });

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

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

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

For att sluta lyssna pa en handelse, anvand removeEventListener med samma funktionsreferens:

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

// Later, when you want to stop listening:
window.removeEventListener('onFHMessageReceived', handleMessage);

Metod 2: Hanterarens callback-metoder

I init()-callbacken anvander du chatbot-hanterarens inbyggda metoder:

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);
  });
});

Referens for hanterarmetoder

Method	Parameters	Beskrivning
`onSessionCreated(fn)`	`fn: () => void`	Lyssna pa sessionsskapande
`onWindowOpened(fn)`	`fn: () => void`	Lyssna pa fonsterdppning
`onWindowClosed(fn)`	`fn: () => void`	Lyssna pa fonsterstangning
`onMessageSent(fn)`	`fn: (event) => void`	Lyssna pa anvandarmeddelanden
`onMessageReceived(fn)`	`fn: (event) => void`	Lyssna pa botsvar
`onFormDataSent(fn)`	`fn: (event) => void`	Lyssna pa formularinlamningar
`onFeedback(fn)`	`fn: (event) => void`	Lyssna pa anvandarfeedback
`onToolCall(fn)`	`fn: (event) => void`	Lyssna pa verktygskdrningar
`onError(fn)`	`fn: (event) => void`	Lyssna pa fel
`openChat()`	—	Oppnar chattpanelen
`closeChat()`	—	Stanger chattpanelen

Anpassad chattaktivering: Dolj knapp och oppna vid klick

For att helt kontrollera nar chatboten visas, dolj den flytande standardknappen och oppna chatten programmatiskt — till exempel fran din egen anpassade knapp.

Fullstandigt exempel

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

<!-- FlowHunt integration with hidden default 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) {
      // Open chat when your custom button is clicked
      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>

Visa en anpassad knapp forst nar chatboten ar redo

Du kan kombinera dold aktivering med handelselyssnare for att skapa avancerade interaktioner:

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

<script>
// Show a custom button only when the chatbot is ready
window.addEventListener('onFHChatbotReady', function() {
  document.getElementById('open-chat').style.display = 'block';
});
</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
    });

    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>

Komplett integrationsexempel

Ett fullstandigt fungerande exempel som demonstrerar konfigurationsdverskrivningar, handelsesparning och anpassad chattaktivering tillsammans:

<!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() {
      console.log('New chat session started');
    });

    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('onFHFeedback', function(event) {
      var fb = event.detail.metadata;
      if (fb.feedback === 'P') {
        console.log('Positive feedback on message', fb.message_id);
      } else {
        console.log('Negative feedback on message', fb.message_id);
      }
    });

    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',
          page: window.location.pathname
        },
        urlSuffix: '?utm_source=chatbot'
      });

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

        document.getElementById('close-chat-btn')
          .addEventListener('click', function() {
            chatbotManager.closeChat();
          });
      });
    };

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

Vanliga frågor

: FlowHunt JS API skickar 10 handelser: onFHChatbotReady, onFHChatbotSessionCreated, onFHChatbotWindowOpened, onFHChatbotWindowClosed, onFHMessageSent, onFHMessageReceived, onFHFormDataSent, onFHFeedback, onFHToolCall och onFHError. Du kan prenumerera pa dessa med window.addEventListener eller via chatbot-hanterarens callback-metoder.
: Anvand konfigurationsalternativet showChatButton: false for att dolja standardknappen och anropa sedan chatbotManager.openChat() for att oppna chatboten pa dina egna villkor — till exempel vid ett klick pa en anpassad knapp.
: Bada metoderna fungerar. Hanterarens callback-metoder (t.ex. chatbotManager.onMessageSent(fn)) anropas i init-callbacken och ar kopplade till hanterarinstansen. Metoden med window.addEventListener (t.ex. window.addEventListener('onFHMessageSent', fn)) kan konfigueras var som helst pa din sida, aven innan chatboten har laddats.
: Anvand konfigurationsalternativet flowVariables i setConfig() for att skicka nyckel-varde-par sasom anvandar-ID, e-post eller sid-URL. Dessa variabler blir tillgangliga i ditt chatbotflode for personaliserade svar.
: Handelser som bar data inkluderar det i event.detail.metadata. Till exempel inkluderar onFHMessageSent meddelandeinnehallet och tidsstampeln, onFHMessageReceived inkluderar flow_id, message_id och meddelandetexten, och onFHFeedback inkluderar message_id och om feedbacken var positiv eller negativ.

Lär dig mer

Integrationer

FlowHunt integreras med dina favoritverktyg för kundservice och produktivitet så att du kan använda AI-chattbottar och automatisering var som helst. Utforska vå...

May 30, 2025 1 min läsning

Integrations AI Chatbot +7

Skapa AI-minispel med en AI-spelgenerator i FlowHunt

Lär dig bygga en AI JavaScript-spelgenerator i FlowHunt med hjälp av Tool Calling Agent, Prompt-nod och Anthropic LLM. Steg-för-steg-guide baserad på flödesdiag...

May 30, 2025 4 min läsning

AI Game Generator +5

interactive-mcp

Integrera FlowHunt med interactive-mcp för att möjliggöra säker, realtidskommunikation mellan stora språkmodeller och användare på lokala maskiner. Fånga använd...

Aug 12, 2025 4 min läsning

AI interactive-mcp +7