Hvilke events kan jeg lytte til med FlowHunt JS API?

FlowHunt JS API udsender 10 events: onFHChatbotReady, onFHChatbotSessionCreated, onFHChatbotWindowOpened, onFHChatbotWindowClosed, onFHMessageSent, onFHMessageReceived, onFHFormDataSent, onFHFeedback, onFHToolCall og onFHError. Du kan abonnere på disse ved hjælp af window.addEventListener eller via chatbot managerens callback-metoder.

Hvordan skjuler jeg standardchatknappen og åbner chatbotten programmatisk?

Brug konfigurationsindstillingen showChatButton: false for at skjule standardknappen, og kald derefter chatbotManager.openChat() for at åbne chatbotten på dine egne betingelser — for eksempel ved et klik på en brugerdefineret knap.

Hvad er forskellen mellem managerens callback-metoder og window.addEventListener?

Begge tilgange virker. Managerens callback-metoder (f.eks. chatbotManager.onMessageSent(fn)) kaldes inden i init-callbacken og er bundet til manager-instansen. Window.addEventListener-tilgangen (f.eks. window.addEventListener('onFHMessageSent', fn)) kan sættes op hvor som helst på din side, selv før chatbotten er indlæst.

Hvordan sender jeg brugerdefinerede data til chatbotten ved hjælp af flow-variabler?

Brug konfigurationsindstillingen flowVariables i setConfig() til at sende nøgle-værdi-par som bruger-ID, e-mail eller side-URL. Disse variabler bliver tilgængelige i din chatbot-flow til personaliserede svar.

Hvilke data er tilgængelige i event handlers?

Events der indeholder data, inkluderer dem i event.detail.metadata. For eksempel indeholder onFHMessageSent beskedindholdet og tidsstemplet, onFHMessageReceived indeholder flow_id, message_id og beskedteksten, og onFHFeedback indeholder message_id og om feedbacken var positiv eller negativ.

FlowHunt JS API: Integrationsvejledning for Avancerede Brugere

Komplet reference for FlowHunt JS API v2-integration. Lær hvordan du integrerer chatbotten, abonnerer på alle 10 events, bruger flow-variabler, sporer interaktioner med URL-parametre og styrer chatvinduet programmatisk.

FlowHunt JavaScript API Chatbot Integration

FlowHunt JS API giver dig fuld kontrol over, hvordan din chatbot integreres med din hjemmeside. Ved hjælp af v2-integrationskoden kan du integrere chatbotten, abonnere på livscyklus- og interaktionsevents, sende dynamiske data via flow-variabler, spore interaktioner med URL-parametre og programmatisk styre chatvinduet.

Denne vejledning dækker alle aspekter af JS API med kodeeksempler, du kan kopiere og tilpasse til dit projekt.

Integrationskode (v2)

Når du opretter en chatbot i FlowHunt, får du et integrationssnippet. Kopiér og indsæt det i din HTML lige før den afsluttende </body>-tag:

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

Erstat YOUR_CHATBOT_ID og YOUR_WORKSPACE_ID med værdierne fra dit FlowHunt-dashboard. Chatbot-ID’et i det globale variabelnavn (window.FHChatbot_YOUR_CHATBOT_ID) bruger underscores i stedet for bindestreger.

Tilsidesæt Konfiguration med setConfig()

Før du kalder init(), kan du tilsidesætte standardindstillingerne for chatbotten ved hjælp af 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>

Tilgængelige Konfigurationsindstillinger

Option	Type	Description
`headerTitle`	string	Brugerdefineret overskriftstekst
`maxWindowWidth`	string	Maksimal bredde på chatvinduet (f.eks. `'700px'`)
`maxWindowHeight`	string	Maksimal højde på chatvinduet
`inputPlaceholder`	string	Pladsholdertekst til beskedindtastningsfeltet
`showChatButton`	boolean	Vis eller skjul den flydende standardchatknap
`openChatPanel`	boolean	Åbn chatpanelet automatisk ved sideindlæsning
`flowVariables`	object	Nøgle-værdi-par med brugerdefinerede data, der sendes til flowet
`urlSuffix`	string	Forespørgselsstreng tilføjet til alle chatbot-genererede URL’er
`cookieConsent`	boolean	Aktivér sessionspersistens via cookies
`embedded`	string	Indstil for at aktivere indlejret tilstand (ingen lukkeknap)
`theme`	string	Tematilstand

Flow-variabler: Send Dynamiske Data

Flow-variabler lader dig sende brugerdefinerede data fra din hjemmeside ind i chatbot-flowet. Dette muliggør personaliserede samtaler baseret på brugerkontekst.

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

Når de er indstillet, er disse variabler tilgængelige i din chatbot-flow-logik, hvilket giver dig mulighed for at personalisere svar, dirigere samtaler eller sende kontekst til AI-agenter.

URL Suffix: Spor Chatbot-interaktioner

Parameteren urlSuffix tilføjer en forespørgselsstreng til hver URL genereret af chatbotten. Dette er nyttigt til at spore chatbot-afledt trafik i analyseværktøjer:

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

Anvendelsesscenarier:

Spor konverteringer fra chatbot-interaktioner i Google Analytics.
Analysér brugeradfærd efter interaktion med chatbotten.
Tilskriv kampagner, der driver chatbot-engagement.

Event-reference

FlowHunt JS API afsender 10 brugerdefinerede events på window-objektet. Alle events bruger CustomEvent API med bubbles: true og composed: true.

onFHChatbotReady

Udløses, når chatbot-widgetten er fuldt renderet og klar til brug.

Event-data: Ingen
Hvornår: Efter widget-DOM’en er monteret, og chatknappen er synlig.

onFHChatbotSessionCreated

Udløses, når en ny chatsession oprettes på serveren. Udløses også, når sessionen genstartes.

Event-data: Ingen
Hvornår: Efter et vellykket API-kald til sessionsoprettelse.

onFHChatbotWindowOpened

Udløses, når brugeren åbner chatvinduet.

Event-data: Ingen
Hvornår: Chatpanelet bliver synligt.
Bemærk: Udløses ikke i indlejret tilstand.

onFHChatbotWindowClosed

Udløses, når brugeren lukker chatvinduet.

Event-data: Ingen
Hvornår: Chatpanelet skjules.
Bemærk: Udløses ikke i indlejret tilstand.

onFHMessageSent

Udløses, når brugeren sender en besked.

Event-data (event.detail.metadata):

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

onFHMessageReceived

Udløses, når chatbotten modtager og viser et svar.

Event-data (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"
  }
}

Feltet sender er valgfrit og kun til stede, når en menneskelig agent er involveret.

onFHFormDataSent

Udløses, når brugeren indsender formulardata via chatbotten.

Event-data (event.detail.metadata):

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

onFHFeedback

Udløses, når en bruger giver tommelfinger op eller tommelfinger ned feedback på en chatbot-besked.

Event-data (event.detail.metadata):

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

Værdien af feedback er "P" for positiv (tommelfinger op) eller "N" for negativ (tommelfinger ned).

onFHToolCall

Udløses, når et værktøj eller en handling udføres under flow-behandling.

Event-data (event.detail.metadata):

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

Bemærk: Udløses kun i flowAssistant- og flowAssistantV3-tilstande, ikke i standard chatbot-tilstand.

onFHError

Udløses, når der opstår en fejl under chatbot-drift.

Event-data (event.detail.metadata):

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

Abonner på Events

Der er to måder at abonnere på chatbot-events.

Metode 1: Window Event Listeners

Brug window.addEventListener hvor som helst på din side. Dette virker selv før chatbotten er indlæst:

<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 at stoppe med at lytte til et event, brug removeEventListener med den samme funktionsreference:

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

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

Metode 2: Manager Callback-metoder

Inden i init()-callbacken bruger du chatbot managerens indbyggede 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);
  });
});

Reference for Manager-metoder

Method	Parameters	Description
`onSessionCreated(fn)`	`fn: () => void`	Lyt efter sessionsoprettelse
`onWindowOpened(fn)`	`fn: () => void`	Lyt efter åbning af vinduet
`onWindowClosed(fn)`	`fn: () => void`	Lyt efter lukning af vinduet
`onMessageSent(fn)`	`fn: (event) => void`	Lyt efter brugerbeskeder
`onMessageReceived(fn)`	`fn: (event) => void`	Lyt efter bot-svar
`onFormDataSent(fn)`	`fn: (event) => void`	Lyt efter formularindsendelser
`onFeedback(fn)`	`fn: (event) => void`	Lyt efter brugerfeedback
`onToolCall(fn)`	`fn: (event) => void`	Lyt efter værktøjsudførelser
`onError(fn)`	`fn: (event) => void`	Lyt efter fejl
`openChat()`	—	Åbner chatpanelet
`closeChat()`	—	Lukker chatpanelet

Brugerdefineret Chat-aktivering: Skjul Knappen og Åbn ved Klik

For at have fuld kontrol over, hvornår chatbotten vises, skjul den flydende standardknap og åbn chatten programmatisk — for eksempel fra din egen brugerdefinerede knap.

Komplet Eksempel

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

Vis en Brugerdefineret Knap Kun Når Chatbotten er Klar

Du kan kombinere skjult aktivering med event listeners for at skabe avancerede 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>

Komplet Integrationseksempel

Et fuldt fungerende eksempel, der demonstrerer konfigurationstilsidesættelser, event-sporing og brugerdefineret chat-aktivering sammen:

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

Ofte stillede spørgsmål

: FlowHunt JS API udsender 10 events: onFHChatbotReady, onFHChatbotSessionCreated, onFHChatbotWindowOpened, onFHChatbotWindowClosed, onFHMessageSent, onFHMessageReceived, onFHFormDataSent, onFHFeedback, onFHToolCall og onFHError. Du kan abonnere på disse ved hjælp af window.addEventListener eller via chatbot managerens callback-metoder.
: Brug konfigurationsindstillingen showChatButton: false for at skjule standardknappen, og kald derefter chatbotManager.openChat() for at åbne chatbotten på dine egne betingelser — for eksempel ved et klik på en brugerdefineret knap.
: Begge tilgange virker. Managerens callback-metoder (f.eks. chatbotManager.onMessageSent(fn)) kaldes inden i init-callbacken og er bundet til manager-instansen. Window.addEventListener-tilgangen (f.eks. window.addEventListener('onFHMessageSent', fn)) kan sættes op hvor som helst på din side, selv før chatbotten er indlæst.
: Brug konfigurationsindstillingen flowVariables i setConfig() til at sende nøgle-værdi-par som bruger-ID, e-mail eller side-URL. Disse variabler bliver tilgængelige i din chatbot-flow til personaliserede svar.
: Events der indeholder data, inkluderer dem i event.detail.metadata. For eksempel indeholder onFHMessageSent beskedindholdet og tidsstemplet, onFHMessageReceived indeholder flow_id, message_id og beskedteksten, og onFHFeedback indeholder message_id og om feedbacken var positiv eller negativ.

Lær mere

Chatbots

Chatbots er en måde at bringe dine flows til live på og gøre dem offentligt tilgængelige. Fra kundeservicebots, der yder 24/7 support, til niche automatiserings...

May 30, 2025 2 min læsning

AI Chatbots +3

interactive-mcp

Integrer FlowHunt med interactive-mcp for at muliggøre sikker, realtidskommunikation mellem store sprogmodeller og brugere på lokale maskiner. Indfang brugerinp...

Aug 12, 2025 4 min læsning

AI interactive-mcp +7

Sådan opretter du en hjemmeside-chatbot på få minutter: En komplet FlowHunt-guide

Lær, hvordan du bygger en kraftfuld AI-chatbot til din hjemmeside på kun 10 minutter med FlowHunt. Guiden dækker opsætning, konfiguration af vidensbase og imple...

Oct 25, 2025 19 min læsning

AI Automation Chatbots +2