Integrare JS API

Referinta completa pentru integrarea FlowHunt JS API v2. Incorporati chatbot-ul, abonati-va la toate cele 11 evenimente, folositi variabile de flux, declansati Chat Hook in mijlocul conversatiei cu sendHook(), urmariti interactiunile cu parametri URL si controlati fereastra de chat programatic.

FlowHunt JavaScript API Chatbot Integration

FlowHunt JS API va ofera control complet asupra modului in care chatbot-ul se integreaza cu site-ul dvs. web. Folosind codul de integrare v2, puteti incorpora chatbot-ul, va puteti abona la evenimentele de ciclu de viata si interactiune, puteti trimite date dinamice prin variabile de flux, declansa Chat Hook in mijlocul conversatiei cu sendHook(), urmari interactiunile cu parametri URL si controla fereastra de chat programatic.

Acest ghid acopera fiecare aspect al JS API cu exemple de cod pe care le puteti copia si adapta proiectului dvs.

Cod de integrare (v2)

Copiati si lipiti snippet-ul de mai jos in HTML-ul dvs. chiar inainte de tag-ul de inchidere </body>. Inlocuiti YOUR_CHATBOT_ID si YOUR_WORKSPACE_ID cu valorile din setarile chatbot-ului FlowHunt.

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

ID-ul chatbot-ului din numele variabilei globale (window.FHChatbot_YOUR_CHATBOT_ID) foloseste underscore in loc de cratima.

Suprascrierea configuratiei cu setConfig()

Inainte de a apela init(), puteti suprascrie setarile implicite ale chatbot-ului folosind 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 initialised with custom config
    });
  };

  if (currentScript && currentScript.parentNode) {
    currentScript.parentNode.insertBefore(script, currentScript.nextSibling);
  } else {
    document.head.appendChild(script);
  }
</script>

Optiuni de configurare disponibile

OptiuneTipDescriere
headerTitlestringText personalizat pentru titlul din antet
maxWindowWidthstringLatimea maxima a ferestrei de chat (de ex. "700px")
maxWindowHeightstringInaltimea maxima a ferestrei de chat
inputPlaceholderstringText substituent pentru campul de introducere a mesajului
showChatButtonbooleanAfisarea sau ascunderea butonului flotant implicit de chat
openChatPanelbooleanDeschiderea automata a panoului de chat la incarcarea paginii
flowVariablesobjectPerechi cheie-valoare de date personalizate trimise catre flux. Valorile pot fi de orice tip serializabil JSON (string, numar, boolean, obiect, tablou).
urlSuffixstringSir de interogare adaugat la toate URL-urile generate de chatbot
cookieConsentbooleanActivarea persistentei sesiunii prin cookie-uri
embeddedstringSetare pentru activarea modului incorporat (fara buton de inchidere)
themestringModul temei

Variabile de flux: Trimiterea datelor dinamice

flowVariables sunt combinate in fiecare sesiune creata de chatbot. Acestea sunt utilizate de obicei drept context static (cunoscut la incarcarea paginii): ID-ul utilizatorului, planul, locale-ul curent etc.

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

Daca utilizatorul navigheaza dupa ce chatul s-a deschis, valorile transmise aici devin invechite. Pentru a le actualiza in mijlocul conversatiei, apelati chatbotManager.sendHook() cu options.flowVariables — vedeti Comunicare host → flux in mijlocul conversatiei mai jos.

URL Suffix: Urmarirea interactiunilor chatbot-ului

Parametrul urlSuffix adauga un sir de interogare la fiecare URL generat de chatbot. Acesta este util pentru urmarirea traficului provenit din chatbot in instrumentele de analiza:

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

Cazuri de utilizare:

  • Urmarirea conversiilor din interactiunile chatbot-ului in Google Analytics.
  • Analiza comportamentului utilizatorilor dupa interactiunea cu chatbot-ul.
  • Atribuirea campaniilor care stimuleaza implicarea chatbot-ului.
Logo

Pregătit să îți dezvolți afacerea?

Începe perioada de probă gratuită astăzi și vezi rezultate în câteva zile.

Solicită demo Autentificare

Comunicare host → flux in mijlocul conversatiei

Adaugata in aprilie 2026 ca parte a functionalitatii FlowHunt Chat Hook.

In aplicatiile single-page, fereastra de chat ramane de obicei deschisa in timp ce utilizatorul navigheaza intre ecrane. Odata ce chatul ruleaza, flowVariables transmise prin setConfig() devin invechite si nu exista nicio modalitate de a notifica fluxul despre ceva ce s-a intamplat in pagina gazda. O singura metoda a managerului — sendHook(name, payload, options?) — acopera atat cazurile “declanseaza un trigger”, cat si “doar actualizeaza contextul”:

  • Transmiteti un name si (optional) un payload pentru a declansa trigger-ul Chat Hook al fluxului. Autorul fluxului plaseaza un singur nod Chat Hook pe canvas si ramifica pe baza {ChatHook.hook_name} pentru a decide ce sa faca.
  • Transmiteti options.flowVariables pentru a combina simultan variabilele de sesiune — valorile sunt persistate inainte ca trigger-ul sa se declanseze si raman disponibile pentru restul sesiunii.
  • Daca fluxul nu are un Chat Hook trigger, apelul este un no-op silentios cu 200: options.flowVariables este in continuare combinat, dar niciun trigger nu ruleaza si nu se taxeaza credite. Aceasta inseamna ca paginile gazda pot apela sendHook() optimist, fara a sti daca autorul fluxului a conectat deja un trigger.

sendHook() este un no-op sigur inainte ca sesiunea sa existe (pus in buffer intern si trimis odata ce sesiunea este creata) si nu arunca niciodata exceptii catre pagina gazda — erorile de retea sunt inregistrate doar prin console.warn.

Limite de intrare

Limite server-side si client-side care se aplica sendHook(). Incalcarea lor nu este o eroare critica — backend-ul returneaza HTTP 422 si managerul inregistreaza prin console.warn fara a arunca exceptii.

RestrictieLimitaUnde se aplicaLa incalcare
Lungimea name din sendHook1–256 caract.Backend (Pydantic)HTTP 422, trigger-ul nu se declanseaza
Numarul de chei in options.flowVariables≤ 64Backend (Pydantic)HTTP 422, nimic nu este persistat
Lungimea fiecarei chei in options.flowVariables≤ 128 caract.Backend (Pydantic)HTTP 422, nimic nu este persistat
Apeluri pre-sesiune puse in buffer de catre manager50Widget (in browser)Cel mai vechi apel din coada este eliminat si se inregistreaza un console.warn

Limita buffer-ului pre-sesiune conteaza doar pe paginile unde crearea sesiunii esueaza la nesfarsit (de ex. o eroare permanenta de retea). In conditii normale, coada este trimisa imediat ce se declanseaza onFHChatbotSessionCreated.

1. Adaugarea unui Chat Hook trigger (din partea autorului fluxului)

  1. Deschideti fluxul asociat chatbot-ului dvs. in editorul FlowHunt.
  2. Trageti un nod trigger Chat Hook pe canvas. Editorul impune un singur trigger per flux — nu sunt permise mai multe.
  3. (Optional) Activati Validate Payload Schema si definiti un JSON Schema pe care payload-ul primit trebuie sa il respecte. Validarea ruleaza in interiorul pasului — o nepotrivire apare ca un eveniment de eroare in flux (endpoint-ul returneaza in continuare 200; eroarea este vizibila prin onFHError).
  4. Conectati iesirile trigger-ului (hook_name, payload, flow_variables) la pasii din aval pe care doriti sa ii declansati (Generator, Chat Output, Tool Calls, ramuri conditionale pe hook_name etc.).
  5. Publicati fluxul.

2. Ramificare pe diferite nume de hook in interiorul fluxului

name-ul transmis de pagina gazda catre sendHook() este o eticheta pe care fluxul dvs. o foloseste pentru ramificare, nu o cheie de rutare — backend-ul nu potriveste numele cu nodurile. In schimb, singurul Chat Hook trigger al fluxului se declanseaza si expune numele ca {ChatHook.hook_name}, pe care il referentiati in logica fluxului pentru a decide ce sa faceti.

Exemplu de system prompt:

If {ChatHook.hook_name} is "screen_changed", briefly summarise the page at
{ChatHook.payload.url}. If it is "user_action", acknowledge the action and
update memory. Otherwise, continue the conversation normally.

Pentru rutare mai complexa, conectati un pas conditional pe {ChatHook.hook_name} si ramificati in mai multe cai din aval.

3. chatbotManager.sendHook(name, payload, options?)

chatbotManager.sendHook(
  name: string,
  payload?: Record<string, unknown>,
  options?: { flowVariables?: Record<string, unknown> }
): Promise<void>;

Argumente

ArgumentTipNecesarDescriere
namestringdaEticheta transmisa fluxului ca {ChatHook.hook_name}. Trigger-ul se declanseaza indiferent de valoare; logica fluxului dvs. ramifica pe baza ei.
payloadobjectnuPayload JSON transmis trigger-ului ca {ChatHook.payload}. Validat fata de schema nodului daca este activata. Implicit {}.
options.flowVariablesobjectnuVariabile de sesiune care vor fi combinate inainte ca trigger-ul sa se declanseze. Disponibile pentru pasii din aval si pentru viitoarele mesaje ale utilizatorului.

Comportament

  • Apelarea inainte de onFHChatbotSessionCreated este sigura; apelul este pus in buffer si trimis odata ce sesiunea exista. Buffer-ul are o limita — vedeti Limite de intrare mai sus.
  • Daca fluxul nu are un Chat Hook trigger, cererea este un no-op silentios cu 200 — astfel paginile gazda pot apela sendHook() optimist inainte ca autorul fluxului sa conecteze un trigger. options.flowVariables este in continuare persistat chiar si in acest caz, astfel ca acelasi apel serveste si ca actualizare de context.
  • Daca Chat Hook trigger-ul are validarea schemei activata si payload-ul nu trece, validarea ruleaza in interiorul pasului — endpoint-ul returneaza 200, dar fluxul emite un eveniment de eroare la nivel de pas (observabil prin onFHError).
  • name si options.flowVariables au limite — vedeti Limite de intrare mai sus. Incalcarile returneaza HTTP 422 si nimic nu este persistat.
  • Apelurile reusite emit un eveniment onFHChatbotFlowVariablesUpdate daca a fost furnizat options.flowVariables (vedeti Referinta evenimente).
  • Nu arunca niciodata exceptii. Esecurile de retea si raspunsurile non-2xx sunt inregistrate prin console.warn.

Exemplu — sugestie proactiva la navigare SPA

window.FHChatbot_YOUR_CHATBOT_ID.init(function (chatbotManager) {
  window.addEventListener('hashchange', function () {
    chatbotManager.sendHook('screen_changed', {
      url: window.location.href,
      screen_name: getScreenName(),
    }, {
      flowVariables: { current_page_url: window.location.href },
    });
  });
});

Exemplu — actualizare doar de context (fara Chat Hook conectat)

Daca fluxul nu are un Chat Hook trigger, apelul este un 200 silentios — astfel acelasi API poate mentine flow_variables sincronizate fara a declansa nimic:

window.FHChatbot_YOUR_CHATBOT_ID.init(function (chatbotManager) {
  window.addEventListener('hashchange', function () {
    chatbotManager.sendHook('navigate', {}, {
      flowVariables: {
        current_page_url: window.location.href,
        screen_name: getScreenName(),
      },
    });
  });
});

4. Cum consuma autorul fluxului aceste valori

  • {ChatHook.hook_name} si {ChatHook.payload.foo} — valorile transmise prin sendHook('x', { foo: 1 }) sunt expuse pe calea de executie a Chat Hook trigger-ului. Disponibile doar pe calea pornita de declansarea hook-ului.
  • {flow_variables.foo} — valorile transmise prin options.flowVariables sunt combinate in punga de variabile a sesiunii inainte ca trigger-ul sa se declanseze. Toate caile de executie (inclusiv mesajele utilizatorului declansate normal de Chat Input) le pot citi.

Daca doriti ca urmatorul mesaj al utilizatorului sa vada o noua valoare, puneti-o in options.flowVariables — payload-ul singur afecteaza doar rularea de executie pornita de acel hook.

Referinta evenimente

FlowHunt JS API distribuie 11 evenimente personalizate pe obiectul window. Toate evenimentele folosesc API-ul CustomEvent cu bubbles: true si composed: true.

onFHChatbotReady

Declansat cand widget-ul chatbot-ului s-a randat complet si este gata de utilizare.

  • Date eveniment: niciuna.
  • Cand: dupa montarea DOM-ului widget-ului si afisarea butonului de chat.

onFHChatbotSessionCreated

Declansat cand se creeaza o noua sesiune de chat pe server.

  • Date eveniment: event.detail.sessionId — ID-ul sesiunii nou create.
  • Cand: dupa un apel API reusit de creare a sesiunii.

onFHChatbotWindowOpened

Declansat cand utilizatorul deschide fereastra de chat. Nu se declanseaza in modul incorporat.

onFHChatbotWindowClosed

Declansat cand utilizatorul inchide fereastra de chat. Nu se declanseaza in modul incorporat.

onFHMessageSent

Declansat cand utilizatorul trimite un mesaj.

event.detail.metadata = {
  content: 'Hello, I need help with...',
  createdAt: '2026-02-19T10:30:00.000Z',
};

onFHMessageReceived

Declansat cand chatbot-ul primeste si afiseaza un raspuns.

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 este optional si este prezent doar cand este implicat un agent uman.

onFHFormDataSent

Declansat cand utilizatorul trimite date de formular prin chatbot.

event.detail.metadata = {
  objectData: { name: 'John', email: 'john@example.com' },
  createdAt: '2026-02-19T10:31:00.000Z',
};

onFHFeedback

Declansat cand un utilizator ofera feedback pozitiv sau negativ la un mesaj al chatbot-ului.

event.detail.metadata = {
  message_id: 'msg_456',
  content: 'Optional feedback text',
  feedback: 'P', // 'P' = positive, 'N' = negative
};

onFHToolCall

Declansat cand un instrument sau o actiune este executata in timpul procesarii fluxului. Se declanseaza doar in modurile flowAssistant si flowAssistantV3.

event.detail.metadata = {
  metadata: {
    flow_id: 'abc123',
    message_id: 'msg_789',
    message: 'Calling search API...',
  },
  createdAt: '2026-02-19T10:32:00.000Z',
};

onFHError

Declansat cand apare o eroare in timpul functionarii chatbot-ului.

event.detail.metadata = {
  metadata: {
    flow_id: 'abc123',
    message_id: 'msg_err',
    message: 'Flow execution failed',
  },
  createdAt: '2026-02-19T10:33:00.000Z',
};

onFHChatbotFlowVariablesUpdate

Adaugat in aprilie 2026.

Declansat dupa un apel reusit chatbotManager.sendHook(...) care a furnizat options.flowVariables. Nu se declanseaza pentru apelurile sendHook() care omit flowVariables.

event.detail = {
  variables: {
    current_page_url: 'https://example.com/products',
    screen_name: 'products',
  },
};

Folositi-l pentru a observa variabilele combinate (de ex. pentru a sincroniza propria stare din partea gazdei, pentru depanare sau pentru a re-randa un element UI care depinde de aceleasi date).

Abonarea la evenimente

Exista doua modalitati de a va abona la evenimentele chatbot-ului.

Metoda 1: Ascultatori de evenimente pe fereastra

Folositi window.addEventListener oriunde in pagina dvs. Aceasta functioneaza chiar si inainte de incarcarea chatbot-ului:

<script>
document.addEventListener('DOMContentLoaded', function () {
  window.addEventListener('onFHChatbotReady', function () {
    console.log('Chatbot is ready');
  });

  window.addEventListener('onFHChatbotSessionCreated', function (event) {
    console.log('Session created:', event.detail.sessionId);
  });

  window.addEventListener('onFHChatbotWindowOpened', function () {
    console.log('Chat window opened');
  });

  window.addEventListener('onFHChatbotWindowClosed', function () {
    console.log('Chat window closed');
  });

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

  window.addEventListener('onFHFeedback', function (event) {
    var fb = event.detail.metadata;
    console.log('Feedback on message', fb.message_id, ':', fb.feedback);
  });

  window.addEventListener('onFHToolCall', function (event) {
    console.log('Tool called:', event.detail.metadata);
  });

  window.addEventListener('onFHError', function (event) {
    console.error('Chatbot error:', event.detail.metadata);
  });

  window.addEventListener('onFHChatbotFlowVariablesUpdate', function (event) {
    console.log('Variables merged:', event.detail.variables);
  });
});
</script>

Pentru a elimina un ascultator, pastrati referinta handler-ului:

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

Metoda 2: Metodele callback ale managerului

In interiorul callback-ului init(), folositi metodele incorporate ale managerului de chatbot:

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

Referinta metode manager

MetodaParametriDescriere
onSessionCreated(fn)fn: () => voidAscultare pentru crearea sesiunii
onWindowOpened(fn)fn: () => voidAscultare pentru deschiderea ferestrei
onWindowClosed(fn)fn: () => voidAscultare pentru inchiderea ferestrei
onMessageSent(fn)fn: (event) => voidAscultare pentru mesajele utilizatorului
onMessageReceived(fn)fn: (event) => voidAscultare pentru raspunsurile bot-ului
onFormDataSent(fn)fn: (event) => voidAscultare pentru trimiterea formularelor
onFeedback(fn)fn: (event) => voidAscultare pentru feedback-ul utilizatorului
onToolCall(fn)fn: (event) => voidAscultare pentru executarea instrumentelor
onError(fn)fn: (event) => voidAscultare pentru erori
openChat()—Deschide panoul de chat
closeChat()—Inchide panoul de chat
sendHook(name, payload?, options?) (nou)name: string, payload?: object, options?: { flowVariables?: object }Declanseaza Chat Hook trigger-ul in fluxul care ruleaza (sau combina silentios options.flowVariables daca nu este conectat niciun trigger)

Activare personalizata a chatului: Ascunderea butonului si deschiderea la click

Pentru a controla complet cand apare chatbot-ul, ascundeti butonul flotant implicit si deschideti chatul programatic — de exemplu, de la propriul buton personalizat.

<button id="my-chat-button">Chat with us</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) {
      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>

Afisarea unui buton personalizat doar cand chatbot-ul este gata

Puteti combina activarea ascunsa cu ascultatorii de evenimente pentru a crea interactiuni avansate:

<button id="open-chat" style="display:none;">Need help?</button>

<script>
  window.addEventListener('onFHChatbotReady', function () {
    document.getElementById('open-chat').style.display = 'block';
  });
</script>

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

Exemplu complet de integrare

Un exemplu complet functional care demonstreaza suprascrierea configuratiei, urmarirea evenimentelor, activarea personalizata a chatului si noua metoda sendHook() impreuna:

<!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 (event) {
          console.log('New chat session started:', event.detail.sessionId);
        });

        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('onFHChatbotFlowVariablesUpdate', function (event) {
          console.log('Context updated:', event.detail.variables);
        });

        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',
            current_page_url: window.location.href,
          },
          urlSuffix: '?utm_source=chatbot',
        });

        window.FHChatbot_YOUR_CHATBOT_ID.init(function (chatbotManager) {
          // Open / close from custom buttons
          document.getElementById('open-chat-btn')
            .addEventListener('click', function () {
              chatbotManager.openChat();
            });
          document.getElementById('close-chat-btn')
            .addEventListener('click', function () {
              chatbotManager.closeChat();
            });

          // Keep the flow's context in sync with SPA navigation and
          // optionally fire the Chat Hook trigger (if the flow has one wired).
          // If the flow has no Chat Hook, the call is a silent 200 — the
          // flow_variables still get merged, so the same line covers both
          // "notify the flow" and "just update context".
          window.addEventListener('hashchange', function () {
            chatbotManager.sendHook('screen_changed', {
              url: window.location.href,
            }, {
              flowVariables: { current_page_url: window.location.href },
            });
          });
        });
      };

      if (currentScript && currentScript.parentNode) {
        currentScript.parentNode.insertBefore(script, currentScript.nextSibling);
      } else {
        document.head.appendChild(script);
      }
    </script>
  </body>
</html>

Întrebări frecvente

Află mai multe

FlowHunt 2.6.12: Integrare Slack, Clasificare a Intentiilor și Mai Mult
FlowHunt 2.6.12: Integrare Slack, Clasificare a Intentiilor și Mai Mult

FlowHunt 2.6.12: Integrare Slack, Clasificare a Intentiilor și Mai Mult

FlowHunt 2.6.12 introduce integrarea Slack, clasificarea intentiilor și modelul Gemini, îmbunătățind funcționalitatea chatbot-ului AI, înțelegerea clienților și...

3 min citire
FlowHunt AI Chatbot +5
interactive-mcp
interactive-mcp

interactive-mcp

Integrează FlowHunt cu interactive-mcp pentru a permite comunicarea securizată, în timp real, între modelele lingvistice mari și utilizatorii de pe mașinile loc...

5 min citire
AI interactive-mcp +7