"Aké udalosti môžem počúvať pomocou FlowHunt JS API?"

"FlowHunt JS API vysiela 10 udalostí: onFHChatbotReady, onFHChatbotSessionCreated, onFHChatbotWindowOpened, onFHChatbotWindowClosed, onFHMessageSent, onFHMessageReceived, onFHFormDataSent, onFHFeedback, onFHToolCall a onFHError. Môžete sa na ne prihlásiť pomocou window.addEventListener alebo cez callback metódy chatbot managera."

"Ako skryjem predvolené tlačidlo chatu a otvorím chatbot programovo?"

"Použite konfiguračnú možnosť showChatButton: false na skrytie predvoleného tlačidla a potom zavolajte chatbotManager.openChat() na otvorenie chatbota podľa vašich podmienok — napríklad kliknutím na vlastné tlačidlo."

"Aký je rozdiel medzi callback metódami managera a window.addEventListener?"

"Oba prístupy fungujú. Callback metódy managera (napr. chatbotManager.onMessageSent(fn)) sa volajú vnútri init callbacku a sú viazané na inštanciu managera. Prístup cez window.addEventListener (napr. window.addEventListener('onFHMessageSent', fn)) je možné nastaviť kdekoľvek na stránke, dokonca pred načítaním chatbota."

"Ako odošlem vlastné dáta do chatbota pomocou premenných toku?"

"Použite konfiguračnú možnosť flowVariables v setConfig() na odoslanie párov kľúč-hodnota, ako sú ID používateľa, email alebo URL stránky. Tieto premenné sú dostupné vo vašom toku chatbota pre personalizované odpovede."

"Aké dáta sú dostupné v obsluhách udalostí?"

"Udalosti, ktoré nesú dáta, ich obsahujú v event.detail.metadata. Napríklad onFHMessageSent obsahuje obsah správy a časovú pečiatku, onFHMessageReceived obsahuje flow_id, message_id a text správy a onFHFeedback obsahuje message_id a informáciu o tom, či bola spätná väzba pozitívna alebo negatívna."

FlowHunt JS API: Sprievodca integráciou pre pokročilých používateľov

Kompletná referencia pre integráciu FlowHunt JS API v2. Naučte sa, ako vložiť chatbot, prihlásiť sa na odber všetkých 10 udalostí, používať premenné toku, sledovať interakcie pomocou URL parametrov a programovo ovládať okno chatu.

FlowHunt JavaScript API Chatbot Integration

FlowHunt JS API vám dáva plnú kontrolu nad tým, ako sa váš chatbot integruje s vašou webovou stránkou. Pomocou integračného kódu v2 môžete vložiť chatbot, prihlásiť sa na odber životného cyklu a interakčných udalostí, odosielať dynamické dáta cez premenné toku, sledovať interakcie pomocou URL parametrov a programovo ovládať okno chatu.

Tento sprievodca pokrýva každý aspekt JS API s príkladmi kódu, ktoré môžete skopírovať a prispôsobiť svojmu projektu.

Integračný kód (v2)

Keď vytvoríte chatbot vo FlowHunt, dostanete integračný snippet. Skopírujte ho a vložte do svojho HTML tesne pred uzatváraciu značku </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>

Nahraďte YOUR_CHATBOT_ID a YOUR_WORKSPACE_ID hodnotami z vášho FlowHunt dashboardu. ID chatbota v názve globálnej premennej (window.FHChatbot_YOUR_CHATBOT_ID) používa podčiarkovníky namiesto pomlčiek.

Prepísanie konfigurácie pomocou setConfig()

Pred zavolaním init() môžete prepísať predvolené nastavenia chatbota pomocou 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>

Dostupné konfiguračné možnosti

Option	Type	Description
`headerTitle`	string	Vlastný text nadpisu hlavičky
`maxWindowWidth`	string	Maximálna šírka okna chatu (napr. `'700px'`)
`maxWindowHeight`	string	Maximálna výška okna chatu
`inputPlaceholder`	string	Zástupný text pre vstupné pole správy
`showChatButton`	boolean	Zobraziť alebo skryť predvolené plávajúce tlačidlo chatu
`openChatPanel`	boolean	Automaticky otvoriť panel chatu pri načítaní stránky
`flowVariables`	object	Páry kľúč-hodnota vlastných dát odoslaných do toku
`urlSuffix`	string	Reťazec dotazu pripojený ku všetkým URL generovaným chatbotom
`cookieConsent`	boolean	Povoliť zachovanie relácie pomocou cookies
`embedded`	string	Nastaviť pre povolenie vstavaného režimu (bez tlačidla zatvorenia)
`theme`	string	Režim témy

Premenné toku: Odosielanie dynamických dát

Premenné toku vám umožňujú odosielať vlastné dáta z vašej webovej stránky do toku chatbota. To umožňuje personalizované konverzácie na základe kontextu používateľa.

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

Po nastavení sú tieto premenné dostupné v logike vášho toku chatbota, čo vám umožňuje personalizovať odpovede, smerovať konverzácie alebo odosielať kontext AI agentom.

URL Suffix: Sledovanie interakcií chatbota

Parameter urlSuffix pripojí reťazec dotazu ku každej URL generovanej chatbotom. To je užitočné na sledovanie návštevnosti pochádzajúcej z chatbota v analytických nástrojoch:

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

Príklady použitia:

Sledovanie konverzií z interakcií chatbota v Google Analytics.
Analýza správania používateľov po interakcii s chatbotom.
Priradenie kampaní, ktoré podporujú zapojenie chatbota.

Referencia udalostí

FlowHunt JS API odosiela 10 vlastných udalostí na objekte window. Všetky udalosti používajú CustomEvent API s bubbles: true a composed: true.

onFHChatbotReady

Vyvolaná, keď sa widget chatbota plne vykreslil a je pripravený na použitie.

Dáta udalosti: Žiadne
Kedy: Po namontovaní DOM widgetu a zobrazení tlačidla chatu.

onFHChatbotSessionCreated

Vyvolaná, keď sa na serveri vytvorí nová relácia chatu. Vyvolá sa aj pri reštarte relácie.

Dáta udalosti: Žiadne
Kedy: Po úspešnom API volaní na vytvorenie relácie.

onFHChatbotWindowOpened

Vyvolaná, keď používateľ otvorí okno chatu.

Dáta udalosti: Žiadne
Kedy: Panel chatu sa stane viditeľným.
Poznámka: Nevyvolá sa vo vstavanom režime.

onFHChatbotWindowClosed

Vyvolaná, keď používateľ zatvorí okno chatu.

Dáta udalosti: Žiadne
Kedy: Panel chatu sa skryje.
Poznámka: Nevyvolá sa vo vstavanom režime.

onFHMessageSent

Vyvolaná, keď používateľ odošle správu.

Dáta udalosti (event.detail.metadata):

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

onFHMessageReceived

Vyvolaná, keď chatbot prijme a zobrazí odpoveď.

Dáta 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 voliteľné a je prítomné iba vtedy, keď je zapojený ľudský agent.

onFHFormDataSent

Vyvolaná, keď používateľ odošle formulárové dáta cez chatbot.

Dáta udalosti (event.detail.metadata):

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

onFHFeedback

Vyvolaná, keď používateľ dá palec hore alebo palec dole spätnú väzbu na správu chatbota.

Dáta udalosti (event.detail.metadata):

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

Hodnota feedback je "P" pre pozitívnu (palec hore) alebo "N" pre negatívnu (palec dole).

onFHToolCall

Vyvolaná, keď sa počas spracovania toku vykoná nástroj alebo akcia.

Dáta udalosti (event.detail.metadata):

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

Poznámka: Vyvolá sa iba v režimoch flowAssistant a flowAssistantV3, nie v štandardnom režime chatbota.

onFHError

Vyvolaná, keď sa počas prevádzky chatbota vyskytne chyba.

Dáta udalosti (event.detail.metadata):

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

Prihlásenie na odber udalostí

Existujú dva spôsoby, ako sa prihlásiť na odber udalostí chatbota.

Metóda 1: Poslucháči udalostí na objekte Window

Použite window.addEventListener kdekoľvek na stránke. Funguje to aj pred načítaním 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>

Na zastavenie počúvania udalosti použite removeEventListener s rovnakým odkazom na funkciu:

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

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

Metóda 2: Callback metódy managera

Vnútri callbacku init() použite vstavané metódy chatbot managera:

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

Referencia metód managera

Method	Parameters	Description
`onSessionCreated(fn)`	`fn: () => void`	Počúvanie vytvorenia relácie
`onWindowOpened(fn)`	`fn: () => void`	Počúvanie otvorenia okna
`onWindowClosed(fn)`	`fn: () => void`	Počúvanie zatvorenia okna
`onMessageSent(fn)`	`fn: (event) => void`	Počúvanie správ od používateľa
`onMessageReceived(fn)`	`fn: (event) => void`	Počúvanie odpovedí bota
`onFormDataSent(fn)`	`fn: (event) => void`	Počúvanie odoslania formulárov
`onFeedback(fn)`	`fn: (event) => void`	Počúvanie spätnej väzby od používateľa
`onToolCall(fn)`	`fn: (event) => void`	Počúvanie vykonania nástrojov
`onError(fn)`	`fn: (event) => void`	Počúvanie chýb
`openChat()`	—	Otvorí panel chatu
`closeChat()`	—	Zatvorí panel chatu

Vlastná aktivácia chatu: Skrytie tlačidla a otvorenie kliknutím

Na úplnú kontrolu nad tým, kedy sa chatbot zobrazí, skryte predvolené plávajúce tlačidlo a otvorte chat programovo — napríklad z vášho vlastného tlačidla.

Úplný príklad

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

Zobrazenie vlastného tlačidla len keď je chatbot pripravený

Môžete skombinovať skrytú aktiváciu s poslucháčmi udalostí na vytvorenie pokročilých 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>

Kompletný integračný príklad

Úplný funkčný príklad, ktorý demonštruje prepísanie konfigurácie, sledovanie udalostí a vlastnú aktiváciu 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>

Najčastejšie kladené otázky

Aké udalosti môžem počúvať pomocou FlowHunt JS API?: FlowHunt JS API vysiela 10 udalostí: onFHChatbotReady, onFHChatbotSessionCreated, onFHChatbotWindowOpened, onFHChatbotWindowClosed, onFHMessageSent, onFHMessageReceived, onFHFormDataSent, onFHFeedback, onFHToolCall a onFHError. Môžete sa na ne prihlásiť pomocou window.addEventListener alebo cez callback metódy chatbot managera.
Ako skryjem predvolené tlačidlo chatu a otvorím chatbot programovo?: Použite konfiguračnú možnosť showChatButton: false na skrytie predvoleného tlačidla a potom zavolajte chatbotManager.openChat() na otvorenie chatbota podľa vašich podmienok — napríklad kliknutím na vlastné tlačidlo.
Aký je rozdiel medzi callback metódami managera a window.addEventListener?: Oba prístupy fungujú. Callback metódy managera (napr. chatbotManager.onMessageSent(fn)) sa volajú vnútri init callbacku a sú viazané na inštanciu managera. Prístup cez window.addEventListener (napr. window.addEventListener('onFHMessageSent', fn)) je možné nastaviť kdekoľvek na stránke, dokonca pred načítaním chatbota.
Ako odošlem vlastné dáta do chatbota pomocou premenných toku?: Použite konfiguračnú možnosť flowVariables v setConfig() na odoslanie párov kľúč-hodnota, ako sú ID používateľa, email alebo URL stránky. Tieto premenné sú dostupné vo vašom toku chatbota pre personalizované odpovede.
Aké dáta sú dostupné v obsluhách udalostí?: Udalosti, ktoré nesú dáta, ich obsahujú v event.detail.metadata. Napríklad onFHMessageSent obsahuje obsah správy a časovú pečiatku, onFHMessageReceived obsahuje flow_id, message_id a text správy a onFHFeedback obsahuje message_id a informáciu o tom, či bola spätná väzba pozitívna alebo negatívna.