"Jake udalosti mohu naslouchat pomoci FlowHunt JS API?"

"FlowHunt JS API vysilá 10 udalosti: onFHChatbotReady, onFHChatbotSessionCreated, onFHChatbotWindowOpened, onFHChatbotWindowClosed, onFHMessageSent, onFHMessageReceived, onFHFormDataSent, onFHFeedback, onFHToolCall a onFHError. Muzete je odebrat pomoci window.addEventListener nebo prostrednictvim callback metod spravce chatbota."

"Jak skryji vychozi tlacitko chatu a otevre chatbota programove?"

"Pouzijte konfiguracni moznost showChatButton: false pro skryti vychoziho tlacitka a pote zavolejte chatbotManager.openChat() pro otevreni chatbota podle vasich podminek — napriklad po kliknuti na vlastni tlacitko."

"Jaky je rozdil mezi callback metodami spravce a window.addEventListener?"

"Oba pristupy funguji. Callback metody spravce (napr. chatbotManager.onMessageSent(fn)) se volaji uvnitr init callbacku a jsou vazany na instanci spravce. Pristup window.addEventListener (napr. window.addEventListener('onFHMessageSent', fn)) lze nastavit kdekoli na strance, a to i pred nactenim chatbota."

"Jak predam vlastni data chatbotovi pomoci promennych toku?"

"Pouzijte konfiguracni moznost flowVariables v setConfig() pro predani paru klic-hodnota, jako je ID uzivatele, e-mail nebo URL stranky. Tyto promenne se stanou dostupnymi ve vasem toku chatbota pro personalizovane odpovedi."

"Jaka data jsou k dispozici v obsluhach udalosti?"

"Udalosti nesouci data je obsahuji v event.detail.metadata. Napriklad onFHMessageSent obsahuje obsah zpravy a casove razitko, onFHMessageReceived obsahuje flow_id, message_id a text zpravy a onFHFeedback obsahuje message_id a informaci o tom, zda byla zpetna vazba pozitivni nebo negativni."

FlowHunt JS API: Pruvodce integraci pro pokrocile uzivatele

Kompletni reference pro integraci FlowHunt JS API v2. Naucte se, jak vlozit chatbota, odebrat vsech 10 udalosti, pouzivat promenne toku, sledovat interakce pomoci URL parametru a programove ovladat okno chatu.

FlowHunt JavaScript API Chatbot Integration

FlowHunt JS API vam dava plnou kontrolu nad tim, jak se chatbot integruje s vasim webem. Pomoci integracniho kodu v2 muzete vlozit chatbota, odebrat udalosti zivotniho cyklu a interakci, predavat dynamicka data prostrednictvim promennych toku, sledovat interakce pomoci URL parametru a programove ovladat okno chatu.

Tento pruvodce pokryva vsechny aspekty JS API s priklady kodu, ktere muzete zkopirovat a prizpusobit svemu projektu.

Integracni kod (v2)

Kdyz v FlowHunt vytvorite chatbota, ziskate integracni fragment kodu. Zkopirujte ho a vlozte do vaseho HTML tesne pred uzaviraci tag </body>:

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

Nahradte YOUR_CHATBOT_ID a YOUR_WORKSPACE_ID hodnotami z vaseho panelu FlowHunt. ID chatbota v nazvu globalni promenne (window.FHChatbot_YOUR_CHATBOT_ID) pouziva podtrzitka misto pomlcek.

Prepis konfigurace pomoci setConfig()

Pred volanim init() muzete prepsat vychozi nastaveni chatbota pomoci 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>

Dostupne konfiguracni moznosti

Option	Type	Popis
`headerTitle`	string	Vlastni text zahlavi
`maxWindowWidth`	string	Maximalni sirka okna chatu (napr. `'700px'`)
`maxWindowHeight`	string	Maximalni vyska okna chatu
`inputPlaceholder`	string	Zastupny text pole pro zadavani zprav
`showChatButton`	boolean	Zobrazit nebo skryt vychozi plovouci tlacitko chatu
`openChatPanel`	boolean	Automaticky otevrit panel chatu pri nacteni stranky
`flowVariables`	object	Pary klic-hodnota s vlastnimi daty predavanymi do toku
`urlSuffix`	string	Retezec dotazu pripojeny ke vsem URL adresam generovanym chatbotem
`cookieConsent`	boolean	Povolit uchovavani relace pomoci cookies
`embedded`	string	Nastavte pro povoleni vlozeneho rezimu (bez tlacitka zavreni)
`theme`	string	Rezim motivu

Promenne toku: Predavani dynamickych dat

Promenne toku vam umoznuji odesilat vlastni data z vaseho webu do toku chatbota. To umoznuje personalizovane konverzace na zaklade kontextu uzivatele.

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

Po nastaveni jsou tyto promenne dostupne v logice toku chatbota, coz umoznuje personalizovat odpovedi, smerovat konverzace nebo predavat kontext AI agentum.

Sufix URL: Sledovani interakci chatbota

Parametr urlSuffix pripoji retezec dotazu ke kazde URL adrese generovane chatbotem. To je uzitecne pro sledovani provozu generovaneho chatbotem v analytickych nastrojich:

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

Pripady pouziti:

Sledovani konverzi z interakci chatbota v Google Analytics.
Analyza chovani uzivatelu po zapojeni s chatbotem.
Prirazeni kampani, ktere podporuji zapojeni chatbota.

Prehled udalosti

FlowHunt JS API odesila 10 vlastnich udalosti na objektu window. Vsechny udalosti pouzivaji API CustomEvent s nastavenim bubbles: true a composed: true.

onFHChatbotReady

Spustena, kdyz je widget chatbota plne vyrenderovan a pripraven k pouziti.

Data udalosti: Zadna
Kdy: Po pripojeni DOM widgetu a kdyz je tlacitko chatu viditelne.

onFHChatbotSessionCreated

Spustena, kdyz je na serveru vytvorena nova relace chatu. Spusti se take pri restartovani relace.

Data udalosti: Zadna
Kdy: Po uspesnem API volani pro vytvoreni relace.

onFHChatbotWindowOpened

Spustena, kdyz uzivatel otevre okno chatu.

Data udalosti: Zadna
Kdy: Panel chatu se stane viditelnym.
Poznamka: Nespousti se ve vlogenem rezimu.

onFHChatbotWindowClosed

Spustena, kdyz uzivatel zavre okno chatu.

Data udalosti: Zadna
Kdy: Panel chatu je skryt.
Poznamka: Nespousti se ve vlogenem rezimu.

onFHMessageSent

Spustena, kdyz uzivatel odesle zpravu.

Data udalosti (event.detail.metadata):

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

onFHMessageReceived

Spustena, kdyz chatbot prijme a zobrazi odpoved.

Data udalosti (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"
  }
}

Pole sender je volitelne a je pritomno pouze tehdy, kdyz je zapojen lidsky agent.

onFHFormDataSent

Spustena, kdyz uzivatel odesle data formulare prostrednictvim chatbota.

Data udalosti (event.detail.metadata):

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

onFHFeedback

Spustena, kdyz uzivatel da palec nahoru nebo palec dolu na zpravu chatbota.

Data udalosti (event.detail.metadata):

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

Hodnota feedback je "P" pro pozitivni hodnoceni (palec nahoru) nebo "N" pro negativni (palec dolu).

onFHToolCall

Spustena, kdyz je behem zpracovani toku proveden nastroj nebo akce.

Data udalosti (event.detail.metadata):

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

Poznamka: Spousti se pouze v rezimech flowAssistant a flowAssistantV3, nikoli ve standardnim rezimu chatbota.

onFHError

Spustena, kdyz behem provozu chatbota dojde k chybe.

Data udalosti (event.detail.metadata):

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

Odber udalosti

Existuji dva zpusoby odberu udalosti chatbota.

Metoda 1: Naslouchace udalosti okna

Pouzijte window.addEventListener kdekoli na sve strance. Funguje to i pred nactenim chatbota:

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

Pro ukonceni naslouchani udalosti pouzijte removeEventListener se stejnou referenci funkce:

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

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

Metoda 2: Callback metody spravce

Uvnitr callbacku init() pouzijte vestavenych metod spravce chatbota:

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

Method	Parameters	Popis
`onSessionCreated(fn)`	`fn: () => void`	Naslouchejte vytvoreni relace
`onWindowOpened(fn)`	`fn: () => void`	Naslouchejte otevreni okna
`onWindowClosed(fn)`	`fn: () => void`	Naslouchejte zavreni okna
`onMessageSent(fn)`	`fn: (event) => void`	Naslouchejte uzivatelskym zpravam
`onMessageReceived(fn)`	`fn: (event) => void`	Naslouchejte odpovedim bota
`onFormDataSent(fn)`	`fn: (event) => void`	Naslouchejte odeslani formularu
`onFeedback(fn)`	`fn: (event) => void`	Naslouchejte zpetne vazbe uzivatelu
`onToolCall(fn)`	`fn: (event) => void`	Naslouchejte spusteni nastroju
`onError(fn)`	`fn: (event) => void`	Naslouchejte chybam
`openChat()`	—	Otevre panel chatu
`closeChat()`	—	Zavre panel chatu

Vlastni aktivace chatu: Skryjte tlacitko a otevrete po kliknuti

Pro uplnou kontrolu nad tim, kdy se chatbot zobrazi, skryjte vychozi plovouci tlacitko a otevrete chat programove — napriklad z vlastniho tlacitka.

Uplny priklad

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

Zobrazeni vlastniho tlacitka az kdyz je chatbot pripraven

Muzete kombinovat skrytou aktivaci s naslouchaci udalosti pro vytvoreni pokrocilych interakci:

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

Kompletni priklad integrace

Uplny funkcni priklad demonstrujici prepisy konfigurace, sledovani udalosti a vlastni aktivaci chatu dohromady:

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

Často kladené otázky

Jake udalosti mohu naslouchat pomoci FlowHunt JS API?: FlowHunt JS API vysilá 10 udalosti: onFHChatbotReady, onFHChatbotSessionCreated, onFHChatbotWindowOpened, onFHChatbotWindowClosed, onFHMessageSent, onFHMessageReceived, onFHFormDataSent, onFHFeedback, onFHToolCall a onFHError. Muzete je odebrat pomoci window.addEventListener nebo prostrednictvim callback metod spravce chatbota.
Jak skryji vychozi tlacitko chatu a otevre chatbota programove?: Pouzijte konfiguracni moznost showChatButton: false pro skryti vychoziho tlacitka a pote zavolejte chatbotManager.openChat() pro otevreni chatbota podle vasich podminek — napriklad po kliknuti na vlastni tlacitko.
Jaky je rozdil mezi callback metodami spravce a window.addEventListener?: Oba pristupy funguji. Callback metody spravce (napr. chatbotManager.onMessageSent(fn)) se volaji uvnitr init callbacku a jsou vazany na instanci spravce. Pristup window.addEventListener (napr. window.addEventListener('onFHMessageSent', fn)) lze nastavit kdekoli na strance, a to i pred nactenim chatbota.
Jak predam vlastni data chatbotovi pomoci promennych toku?: Pouzijte konfiguracni moznost flowVariables v setConfig() pro predani paru klic-hodnota, jako je ID uzivatele, e-mail nebo URL stranky. Tyto promenne se stanou dostupnymi ve vasem toku chatbota pro personalizovane odpovedi.
Jaka data jsou k dispozici v obsluhach udalosti?: Udalosti nesouci data je obsahuji v event.detail.metadata. Napriklad onFHMessageSent obsahuje obsah zpravy a casove razitko, onFHMessageReceived obsahuje flow_id, message_id a text zpravy a onFHFeedback obsahuje message_id a informaci o tom, zda byla zpetna vazba pozitivni nebo negativni.