Hvilke hendelser kan jeg lytte til med FlowHunt JS API?

FlowHunt JS API sender ut 10 hendelser: onFHChatbotReady, onFHChatbotSessionCreated, onFHChatbotWindowOpened, onFHChatbotWindowClosed, onFHMessageSent, onFHMessageReceived, onFHFormDataSent, onFHFeedback, onFHToolCall og onFHError. Du kan abonnere på disse ved hjelp av window.addEventListener eller via chatbot managerens callback-metoder.

Hvordan skjuler jeg standard chatknappen og åpner chatboten programmatisk?

Bruk konfigurasjonsalternativet showChatButton: false for å skjule standardknappen, og kall deretter chatbotManager.openChat() for å åpne chatboten på dine egne vilkår — for eksempel ved et klikk på en tilpasset knapp.

Hva er forskjellen mellom managerens callback-metoder og window.addEventListener?

Begge tilnærmingene fungerer. Managerens callback-metoder (f.eks. chatbotManager.onMessageSent(fn)) kalles inne i init-callbacken og er knyttet til manager-instansen. Window.addEventListener-tilnærmingen (f.eks. window.addEventListener('onFHMessageSent', fn)) kan settes opp hvor som helst på siden din, selv før chatboten er lastet.

Hvordan sender jeg tilpassede data til chatboten ved hjelp av flow-variabler?

Bruk konfigurasjonsalternativet flowVariables i setConfig() for å sende nøkkel-verdi-par som bruker-ID, e-post eller side-URL. Disse variablene blir tilgjengelige i chatbot-flowen din for personaliserte svar.

Hvilke data er tilgjengelige i event handlers?

Hendelser som inneholder data, inkluderer dem i event.detail.metadata. For eksempel inkluderer onFHMessageSent meldingsinnholdet og tidsstempelet, onFHMessageReceived inkluderer flow_id, message_id og meldingsteksten, og onFHFeedback inkluderer message_id og om tilbakemeldingen var positiv eller negativ.

FlowHunt JS API: Integrasjonsguide for Avanserte Brukere

Komplett referanse for FlowHunt JS API v2-integrasjon. Lær hvordan du bygger inn chatboten, abonnerer på alle 10 hendelser, bruker flow-variabler, sporer interaksjoner med URL-parametere og styrer chatvinduet programmatisk.

FlowHunt JavaScript API Chatbot Integration

FlowHunt JS API gir deg full kontroll over hvordan chatboten din integreres med nettstedet ditt. Ved hjelp av v2-integrasjonskoden kan du bygge inn chatboten, abonnere på livssyklus- og interaksjonshendelser, sende dynamiske data via flow-variabler, spore interaksjoner med URL-parametere og programmatisk styre chatvinduet.

Denne guiden dekker alle aspekter av JS API med kodeeksempler du kan kopiere og tilpasse til prosjektet ditt.

Integrasjonskode (v2)

Når du oppretter en chatbot i FlowHunt, får du et integrasjonssnippet. Kopier og lim det inn i HTML-en din like før den avsluttende </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>

Erstatt YOUR_CHATBOT_ID og YOUR_WORKSPACE_ID med verdiene fra FlowHunt-dashbordet ditt. Chatbot-ID-en i det globale variabelnavnet (window.FHChatbot_YOUR_CHATBOT_ID) bruker underscores i stedet for bindestreker.

Overstyre Konfigurasjon med setConfig()

Før du kaller init(), kan du overstyre standardinnstillingene for chatboten ved hjelp av 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>

Tilgjengelige Konfigurasjonsalternativer

Option	Type	Description
`headerTitle`	string	Tilpasset overskriftstekst
`maxWindowWidth`	string	Maksimal bredde på chatvinduet (f.eks. `'700px'`)
`maxWindowHeight`	string	Maksimal høyde på chatvinduet
`inputPlaceholder`	string	Plassholdertekst for meldingsinntastingsfeltet
`showChatButton`	boolean	Vis eller skjul den flytende standard chatknappen
`openChatPanel`	boolean	Åpne chatpanelet automatisk ved sideinnlasting
`flowVariables`	object	Nøkkel-verdi-par med tilpassede data som sendes til flowen
`urlSuffix`	string	Spørringsstreng som legges til alle chatbot-genererte URL-er
`cookieConsent`	boolean	Aktiver sesjonspersistens via informasjonskapsler
`embedded`	string	Angi for å aktivere innebygd modus (ingen lukkeknapp)
`theme`	string	Temamodus

Flow-variabler: Send Dynamiske Data

Flow-variabler lar deg sende tilpassede data fra nettstedet ditt inn i chatbot-flowen. Dette muliggjør personaliserte samtaler basert på brukerkontekst.

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

Når de er satt, er disse variablene tilgjengelige i chatbot-flow-logikken din, slik at du kan personalisere svar, rute samtaler eller sende kontekst til AI-agenter.

URL Suffix: Spor Chatbot-interaksjoner

Parameteren urlSuffix legger til en spørringsstreng til hver URL generert av chatboten. Dette er nyttig for å spore chatbot-avledet trafikk i analyseverktøy:

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

Bruksscenarier:

Spor konverteringer fra chatbot-interaksjoner i Google Analytics.
Analyser brukeratferd etter interaksjon med chatboten.
Tilskriv kampanjer som driver chatbot-engasjement.

Hendelsesreferanse

FlowHunt JS API sender ut 10 tilpassede hendelser på window-objektet. Alle hendelser bruker CustomEvent API med bubbles: true og composed: true.

onFHChatbotReady

Utløses når chatbot-widgeten er fullt gjengitt og klar til bruk.

Hendelsesdata: Ingen
Når: Etter at widget-DOM-en er montert og chatknappen er synlig.

onFHChatbotSessionCreated

Utløses når en ny chatøkt opprettes på serveren. Utløses også når økten startes på nytt.

Hendelsesdata: Ingen
Når: Etter et vellykket API-kall for øktoppretting.

onFHChatbotWindowOpened

Utløses når brukeren åpner chatvinduet.

Hendelsesdata: Ingen
Når: Chatpanelet blir synlig.
Merk: Utløses ikke i innebygd modus.

onFHChatbotWindowClosed

Utløses når brukeren lukker chatvinduet.

Hendelsesdata: Ingen
Når: Chatpanelet skjules.
Merk: Utløses ikke i innebygd modus.

onFHMessageSent

Utløses når brukeren sender en melding.

Hendelsesdata (event.detail.metadata):

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

onFHMessageReceived

Utløses når chatboten mottar og viser et svar.

Hendelsesdata (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 valgfritt og kun til stede når en menneskelig agent er involvert.

onFHFormDataSent

Utløses når brukeren sender inn skjemadata via chatboten.

Hendelsesdata (event.detail.metadata):

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

onFHFeedback

Utløses når en bruker gir tommel opp eller tommel ned tilbakemelding på en chatbot-melding.

Hendelsesdata (event.detail.metadata):

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

Verdien av feedback er "P" for positiv (tommel opp) eller "N" for negativ (tommel ned).

onFHToolCall

Utløses når et verktøy eller en handling utføres under flow-behandling.

Hendelsesdata (event.detail.metadata):

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

Merk: Utløses kun i flowAssistant- og flowAssistantV3-moduser, ikke i standard chatbot-modus.

onFHError

Utløses når det oppstår en feil under chatbot-drift.

Hendelsesdata (event.detail.metadata):

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

Abonnere på Hendelser

Det finnes to måter å abonnere på chatbot-hendelser.

Metode 1: Window Event Listeners

Bruk window.addEventListener hvor som helst på siden din. Dette fungerer selv før chatboten er lastet:

<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 å slutte å lytte til en hendelse, bruk removeEventListener med den samme funksjonsreferansen:

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

Inne i init()-callbacken bruker du chatbot managerens innebygde 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);
  });
});

Referanse for Manager-metoder

Method	Parameters	Description
`onSessionCreated(fn)`	`fn: () => void`	Lytt etter øktoppretting
`onWindowOpened(fn)`	`fn: () => void`	Lytt etter åpning av vinduet
`onWindowClosed(fn)`	`fn: () => void`	Lytt etter lukking av vinduet
`onMessageSent(fn)`	`fn: (event) => void`	Lytt etter brukermeldinger
`onMessageReceived(fn)`	`fn: (event) => void`	Lytt etter bot-svar
`onFormDataSent(fn)`	`fn: (event) => void`	Lytt etter skjemainnsendinger
`onFeedback(fn)`	`fn: (event) => void`	Lytt etter brukertilbakemeldinger
`onToolCall(fn)`	`fn: (event) => void`	Lytt etter verktøyutførelser
`onError(fn)`	`fn: (event) => void`	Lytt etter feil
`openChat()`	—	Åpner chatpanelet
`closeChat()`	—	Lukker chatpanelet

Tilpasset Chat-aktivering: Skjul Knappen og Åpne ved Klikk

For å ha full kontroll over når chatboten vises, skjul den flytende standardknappen og åpne chatten programmatisk — for eksempel fra din egen tilpassede knapp.

Komplett 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 Tilpasset Knapp Kun Når Chatboten er Klar

Du kan kombinere skjult aktivering med event listeners for å skape avanserte interaksjoner:

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

Et fullt fungerende eksempel som demonstrerer konfigurasjonsoverstyrelser, hendelsessporing og tilpasset 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>

Vanlige spørsmål

: FlowHunt JS API sender ut 10 hendelser: onFHChatbotReady, onFHChatbotSessionCreated, onFHChatbotWindowOpened, onFHChatbotWindowClosed, onFHMessageSent, onFHMessageReceived, onFHFormDataSent, onFHFeedback, onFHToolCall og onFHError. Du kan abonnere på disse ved hjelp av window.addEventListener eller via chatbot managerens callback-metoder.
: Bruk konfigurasjonsalternativet showChatButton: false for å skjule standardknappen, og kall deretter chatbotManager.openChat() for å åpne chatboten på dine egne vilkår — for eksempel ved et klikk på en tilpasset knapp.
: Begge tilnærmingene fungerer. Managerens callback-metoder (f.eks. chatbotManager.onMessageSent(fn)) kalles inne i init-callbacken og er knyttet til manager-instansen. Window.addEventListener-tilnærmingen (f.eks. window.addEventListener('onFHMessageSent', fn)) kan settes opp hvor som helst på siden din, selv før chatboten er lastet.
: Bruk konfigurasjonsalternativet flowVariables i setConfig() for å sende nøkkel-verdi-par som bruker-ID, e-post eller side-URL. Disse variablene blir tilgjengelige i chatbot-flowen din for personaliserte svar.
: Hendelser som inneholder data, inkluderer dem i event.detail.metadata. For eksempel inkluderer onFHMessageSent meldingsinnholdet og tidsstempelet, onFHMessageReceived inkluderer flow_id, message_id og meldingsteksten, og onFHFeedback inkluderer message_id og om tilbakemeldingen var positiv eller negativ.

Lær mer

interaktiv-mcp

Integrer FlowHunt med interaktiv-mcp for å muliggjøre sikker, sanntids kommunikasjon mellom store språkmodeller og brukere på lokale maskiner. Fang opp brukerin...

Aug 12, 2025 4 min lesing

AI interactive-mcp +7

Integrasjoner

FlowHunt integreres med dine favorittverktøy for kundeservice og produktivitet, slik at du kan benytte AI-chatboter og automatisering hvor som helst. Utforsk vå...

May 30, 2025 1 min lesing

Integrations AI Chatbot +7

Hvordan koble FlowHunt-chatboter til sanntids-API-er for lager og levering

Lær hvordan du gjør det mulig for FlowHunt-chatboten din å svare på kundespørsmål om produktets tilgjengelighet og ordrestatus ved å integrere med sanntids-API-...

Jun 11, 2024 5 min lesing

chatbot API +3