"Mitka tapahtumat voin kuunnella FlowHunt JS API:lla?"

"FlowHunt JS API lahettaa 10 tapahtumaa: onFHChatbotReady, onFHChatbotSessionCreated, onFHChatbotWindowOpened, onFHChatbotWindowClosed, onFHMessageSent, onFHMessageReceived, onFHFormDataSent, onFHFeedback, onFHToolCall ja onFHError. Voit tilata naita kayttamalla window.addEventListener-menetelmaa tai chatbot-hallitsijan callback-metodeja."

"Miten piilotaan oletuschat-painike ja avataan chatbot ohjelmallisesti?"

"Kayta showChatButton: false -asetusta piilottaaksesi oletuspainikkeen ja kutsu sitten chatbotManager.openChat() avataksesi chatbotin omilla ehdoillasi — esimerkiksi mukautetun painikkeen klikkauksella."

"Mika ero on hallitsijan callback-metodien ja window.addEventListener-menetelman valilla?"

"Molemmat lahestymistavat toimivat. Hallitsijan callback-metodit (esim. chatbotManager.onMessageSent(fn)) kutsutaan init-callbackin sisalla ja ne on sidottu hallitsijainstanssiin. window.addEventListener-lahestymistapa (esim. window.addEventListener('onFHMessageSent', fn)) voidaan maarittaa missa tahansa sivullasi, jopa ennen chatbotin latautumista."

"Miten valitan mukautettua dataa chatbotille vuomuuttujien avulla?"

"Kayta flowVariables-asetusta setConfig()-funktiossa valittaaksesi avain-arvo-pareja, kuten kayttajatunnus, sahkopostiosoite tai sivun URL. Nama muuttujat ovat kaytettavissa chatbot-vuossasi raataloidyille vastauksille."

"Mita dataa on saatavilla tapahtumakasittelijoissa?"

"Tapahtumat, jotka sisaltavat dataa, valittavat sen event.detail.metadata-kentassa. Esimerkiksi onFHMessageSent sisaltaa viestin sisallon ja aikaleiman, onFHMessageReceived sisaltaa flow_id:n, message_id:n ja viestitekstin, ja onFHFeedback sisaltaa message_id:n seka tiedon siita, oliko palaute positiivinen vai negatiivinen."

FlowHunt JS API: Integrointiopas edistyneille kayttajille

Taydellinen viite FlowHunt JS API v2 -integraatioon. Opi upottamaan chatbot, tilaamaan kaikki 10 tapahtumaa, kayttamaan vuomuuttujia, seuraamaan vuorovaikutuksia URL-parametreilla ja hallitsemaan chat-ikkunaa ohjelmallisesti.

FlowHunt JavaScript API Chatbot Integration

FlowHunt JS API antaa sinulle tayden hallinnan chatbotin integroimiseen verkkosivustollesi. Kayttamalla v2-integrointikoodia voit upottaa chatbotin, tilata elinkaari- ja vuorovaikutustapahtumia, valittaa dynaamista dataa vuomuuttujien kautta, seurata vuorovaikutuksia URL-parametreilla ja hallita chat-ikkunaa ohjelmallisesti.

Tama opas kattaa kaikki JS API:n osa-alueet koodiesimerkein, joita voit kopioida ja mukauttaa projektiisi.

Integrointikoodi (v2)

Kun luot chatbotin FlowHuntissa, saat integrointikoodinpatkän. Kopioi ja liita se HTML-koodiisi juuri ennen sulkevaa </body>-tagia:

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

Korvaa YOUR_CHATBOT_ID ja YOUR_WORKSPACE_ID FlowHunt-hallintapaneelisi arvoilla. Chatbot-tunnus globaalissa muuttujanimessa (window.FHChatbot_YOUR_CHATBOT_ID) kayttaa alaviivoita tavuviivojen sijaan.

Asetusten ylikirjoittaminen setConfig()-funktiolla

Ennen init()-kutsua voit ylikirjoittaa chatbotin oletusasetukset setConfig()-funktiolla:

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

Kaytettavissa olevat asetukset

Option	Type	Kuvaus
`headerTitle`	string	Mukautettu otsikkoteksti
`maxWindowWidth`	string	Chat-ikkunan enimmaisleveys (esim. `'700px'`)
`maxWindowHeight`	string	Chat-ikkunan enimmaiskorkeus
`inputPlaceholder`	string	Viestikentän paikkamerkkiteksti
`showChatButton`	boolean	Nayta tai piilota oletuskelluva chat-painike
`openChatPanel`	boolean	Avaa chat-paneeli automaattisesti sivun latautuessa
`flowVariables`	object	Avain-arvo-parit mukautetusta datasta, joka valitetaan vuohon
`urlSuffix`	string	Kyselymerkkijono, joka lisataan kaikkiin chatbotin luomiin URL-osoitteisiin
`cookieConsent`	boolean	Ota kayttoon istunnon sailyttaminen evasteiden avulla
`embedded`	string	Aseta upotettu tila kayttoon (ei sulje-painiketta)
`theme`	string	Teematila

Vuomuuttujat: Valita dynaamista dataa

Vuomuuttujien avulla voit lahettaa mukautettua dataa verkkosivustoltasi chatbot-vuohon. Tama mahdollistaa personoidut keskustelut kayttajakontekstin perusteella.

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

Asettamisen jalkeen nama muuttujat ovat kaytettavissa chatbot-vuosi logiikassa, mika mahdollistaa vastausten personoinnin, keskustelujen ohjaamisen tai kontekstin valittamisen tekoalyagenteille.

URL-suffiksi: Seuraa chatbot-vuorovaikutuksia

urlSuffix-parametri lisaa kyselymerkkijonon jokaiseen chatbotin luomaan URL-osoitteeseen. Tama on hyodyllista chatbot-lahtöisen liikenteen seurannassa analytiikkatyokaluissa:

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

Kayttotapaukset:

Seuraa konversioita chatbot-vuorovaikutuksista Google Analyticsissa.
Analysoi kayttajakayttaytymista chatbotin kanssa tapahtuvan vuorovaikutuksen jalkeen.
Kohdista kampanjat, jotka ohjaavat chatbot-sitoutumista.

Tapahtumaviite

FlowHunt JS API lahettaa 10 mukautettua tapahtumaa window-objektille. Kaikki tapahtumat kayttavat CustomEvent -API:a asetuksilla bubbles: true ja composed: true.

onFHChatbotReady

Laukeaa, kun chatbot-widget on taydellisesti renderoidytty ja valmis kaytettavaksi.

Tapahtumadata: Ei mitaan
Milloin: Kun widgetin DOM on asennettu ja chat-painike on nakyvissa.

onFHChatbotSessionCreated

Laukeaa, kun uusi chat-istunto luodaan palvelimella. Laukeaa myos istunnon uudelleenkaynistyksen yhteydessa.

Tapahtumadata: Ei mitaan
Milloin: Onnistuneen istunnon luonti -API-kutsun jalkeen.

onFHChatbotWindowOpened

Laukeaa, kun kayttaja avaa chat-ikkunan.

Tapahtumadata: Ei mitaan
Milloin: Chat-paneeli tulee nakyviin.
Huomautus: Ei laukea upotetussa tilassa.

onFHChatbotWindowClosed

Laukeaa, kun kayttaja sulkee chat-ikkunan.

Tapahtumadata: Ei mitaan
Milloin: Chat-paneeli piilotetaan.
Huomautus: Ei laukea upotetussa tilassa.

onFHMessageSent

Laukeaa, kun kayttaja lahettaa viestin.

Tapahtumadata (event.detail.metadata):

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

onFHMessageReceived

Laukeaa, kun chatbot vastaanottaa ja nayttaa vastauksen.

Tapahtumadata (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-kentta on valinnainen ja esiintyy vain, kun ihmisagentti on mukana.

onFHFormDataSent

Laukeaa, kun kayttaja lahettaa lomakedataa chatbotin kautta.

Tapahtumadata (event.detail.metadata):

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

onFHFeedback

Laukeaa, kun kayttaja antaa peukku ylos- tai peukku alas -palautteen chatbot-viestista.

Tapahtumadata (event.detail.metadata):

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

feedback-arvo on "P" positiiviselle (peukku ylos) tai "N" negatiiviselle (peukku alas).

onFHToolCall

Laukeaa, kun tyokalu tai toiminto suoritetaan vuon kasittelyn aikana.

Tapahtumadata (event.detail.metadata):

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

Huomautus: Laukeaa vain flowAssistant- ja flowAssistantV3-tiloissa, ei standardichattibottitilassa.

onFHError

Laukeaa, kun chatbotin toiminnan aikana tapahtuu virhe.

Tapahtumadata (event.detail.metadata):

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

Tapahtumien tilaaminen

Chatbot-tapahtumien tilaamiseen on kaksi tapaa.

Tapa 1: Ikkunatapahtumakuuntelijat

Kayta window.addEventListener-menetelmaa missa tahansa sivullasi. Tama toimii jopa ennen chatbotin latautumista:

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

Lopettaaksesi tapahtuman kuuntelun, kayta removeEventListener-menetelmaa samalla funktioviitteella:

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

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

Tapa 2: Hallitsijan callback-metodit

init()-callbackin sisalla kayta chatbot-hallitsijan sisaanrakennettuja metodeja:

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

Hallitsijametodien viite

Method	Parameters	Kuvaus
`onSessionCreated(fn)`	`fn: () => void`	Kuuntele istunnon luontia
`onWindowOpened(fn)`	`fn: () => void`	Kuuntele ikkunan avaamista
`onWindowClosed(fn)`	`fn: () => void`	Kuuntele ikkunan sulkemista
`onMessageSent(fn)`	`fn: (event) => void`	Kuuntele kayttajaviesteja
`onMessageReceived(fn)`	`fn: (event) => void`	Kuuntele bottivastauksia
`onFormDataSent(fn)`	`fn: (event) => void`	Kuuntele lomakelahetyksit
`onFeedback(fn)`	`fn: (event) => void`	Kuuntele kayttajapalautetta
`onToolCall(fn)`	`fn: (event) => void`	Kuuntele tyokalujen suorituksia
`onError(fn)`	`fn: (event) => void`	Kuuntele virheita
`openChat()`	—	Avaa chat-paneelin
`closeChat()`	—	Sulkee chat-paneelin

Mukautettu chat-aktivointi: Piilota painike ja avaa klikkauksella

Hallitaksesi taydellisesti chatbotin nayttamista, piilota oletuskelluva painike ja avaa chat ohjelmallisesti — esimerkiksi omasta mukautetusta painikkeestasi.

Taydellinen esimerkki

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

Nayta mukautettu painike vasta kun chatbot on valmis

Voit yhdistaa piilotetun aktivoinnin tapahtumakuuntelijoihin luodaksesi edistyneita vuorovaikutuksia:

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

Taydellinen integrointiesimerkki

Taydellinen toimiva esimerkki, joka esittelee asetusten ylikirjoituksia, tapahtumien seurantaa ja mukautettua chat-aktivointia yhdessa:

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

Usein kysytyt kysymykset

Mitka tapahtumat voin kuunnella FlowHunt JS API:lla?: FlowHunt JS API lahettaa 10 tapahtumaa: onFHChatbotReady, onFHChatbotSessionCreated, onFHChatbotWindowOpened, onFHChatbotWindowClosed, onFHMessageSent, onFHMessageReceived, onFHFormDataSent, onFHFeedback, onFHToolCall ja onFHError. Voit tilata naita kayttamalla window.addEventListener-menetelmaa tai chatbot-hallitsijan callback-metodeja.
Miten piilotaan oletuschat-painike ja avataan chatbot ohjelmallisesti?: Kayta showChatButton: false -asetusta piilottaaksesi oletuspainikkeen ja kutsu sitten chatbotManager.openChat() avataksesi chatbotin omilla ehdoillasi — esimerkiksi mukautetun painikkeen klikkauksella.
Mika ero on hallitsijan callback-metodien ja window.addEventListener-menetelman valilla?: Molemmat lahestymistavat toimivat. Hallitsijan callback-metodit (esim. chatbotManager.onMessageSent(fn)) kutsutaan init-callbackin sisalla ja ne on sidottu hallitsijainstanssiin. window.addEventListener-lahestymistapa (esim. window.addEventListener('onFHMessageSent', fn)) voidaan maarittaa missa tahansa sivullasi, jopa ennen chatbotin latautumista.
Miten valitan mukautettua dataa chatbotille vuomuuttujien avulla?: Kayta flowVariables-asetusta setConfig()-funktiossa valittaaksesi avain-arvo-pareja, kuten kayttajatunnus, sahkopostiosoite tai sivun URL. Nama muuttujat ovat kaytettavissa chatbot-vuossasi raataloidyille vastauksille.
Mita dataa on saatavilla tapahtumakasittelijoissa?: Tapahtumat, jotka sisaltavat dataa, valittavat sen event.detail.metadata-kentassa. Esimerkiksi onFHMessageSent sisaltaa viestin sisallon ja aikaleiman, onFHMessageReceived sisaltaa flow_id:n, message_id:n ja viestitekstin, ja onFHFeedback sisaltaa message_id:n seka tiedon siita, oliko palaute positiivinen vai negatiivinen.