Automação de IA

Integração JS API

Referência completa para a integração da FlowHunt JS API v2. Incorpore o chatbot, subscreva todos os 11 eventos, utilize variáveis de fluxo, dispare o gatilho Chat Hook a meio da conversa com sendHook(), rastreie interações com parâmetros de URL e controle a janela de chat programaticamente.

FlowHunt JavaScript API Chatbot Integration

A FlowHunt JS API dá-lhe controlo total sobre como o seu chatbot se integra com o seu website. Utilizando o código de integração v2, pode incorporar o chatbot, subscrever eventos de ciclo de vida e interação, passar dados dinâmicos através de variáveis de fluxo, disparar o gatilho Chat Hook a meio da conversa com sendHook(), rastrear interações com parâmetros de URL e controlar programaticamente a janela de chat.

Este guia cobre todos os aspetos da JS API com exemplos de código que pode copiar e adaptar ao seu projeto.

Código de Integração (v2)

Copie e cole o snippet abaixo no seu HTML imediatamente antes da tag de fecho </body>. Substitua YOUR_CHATBOT_ID e YOUR_WORKSPACE_ID pelos valores das definições do seu chatbot 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>

O ID do chatbot no nome da variável global (window.FHChatbot_YOUR_CHATBOT_ID) utiliza underscores em vez de hífens.

Substituir a Configuração com setConfig()

Antes de chamar init(), pode substituir as configurações padrão do chatbot usando 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>

Opções de Configuração Disponíveis

OpçãoTipoDescrição
headerTitlestringTexto personalizado do título do cabeçalho
maxWindowWidthstringLargura máxima da janela de chat (por exemplo, "700px")
maxWindowHeightstringAltura máxima da janela de chat
inputPlaceholderstringTexto de espaço reservado para o campo de entrada de mensagens
showChatButtonbooleanMostrar ou esconder o botão flutuante de chat padrão
openChatPanelbooleanAbrir automaticamente o painel de chat ao carregar a página
flowVariablesobjectPares chave-valor de dados personalizados passados para o fluxo. Os valores podem ser de qualquer tipo serializável em JSON (string, número, booleano, objeto, array).
urlSuffixstringCadeia de consulta anexada a todos os URLs gerados pelo chatbot
cookieConsentbooleanAtivar persistência de sessão via cookies
embeddedstringDefinir para ativar o modo incorporado (sem botão de fechar)
themestringModo de tema

Variáveis de Fluxo: Passar Dados Dinâmicos

flowVariables são mescladas em todas as sessões que o chatbot cria. Tipicamente são utilizadas como contexto estático (conhecido ao carregar a página): o ID do utilizador, o plano, o idioma atual, etc.

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

Se o utilizador navegar depois do chat ter aberto, os valores aqui passados ficam desatualizados. Para os atualizar a meio da conversa, chame chatbotManager.sendHook() com options.flowVariables — veja Comunicação host → fluxo a meio da conversa abaixo.

URL Suffix: Rastrear Interações do Chatbot

O parâmetro urlSuffix anexa uma cadeia de consulta a cada URL gerado pelo chatbot. Isto é útil para rastrear o tráfego originado pelo chatbot em ferramentas de análise:

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

Casos de uso:

  • Rastrear conversões a partir de interações do chatbot no Google Analytics.
  • Analisar o comportamento do utilizador após interagir com o chatbot.
  • Atribuir campanhas que impulsionam o envolvimento com o chatbot.
Logo

Pronto para expandir seu negócio?

Comece seu teste gratuito hoje e veja resultados em dias.

Solicitar demo Entrar

Comunicação host → fluxo a meio da conversa

Adicionado em abril de 2026 como parte da funcionalidade FlowHunt Chat Hook.

Em aplicações de página única (SPA), a janela de chat normalmente permanece aberta enquanto o utilizador navega entre ecrãs. Assim que o chat está em execução, as flowVariables passadas via setConfig() ficam desatualizadas, e não há forma de avisar o fluxo sobre algo que aconteceu na página host. Um único método do manager — sendHook(name, payload, options?) — cobre tanto o caso de uso “disparar um gatilho” como “apenas atualizar contexto”:

  • Passe um name e (opcionalmente) um payload para disparar o gatilho Chat Hook do fluxo. O autor do fluxo coloca um nó Chat Hook no canvas e ramifica em {ChatHook.hook_name} para decidir o que fazer.
  • Passe options.flowVariables para mesclar variáveis de sessão ao mesmo tempo — os valores são persistidos antes de o gatilho disparar e permanecem disponíveis para o resto da sessão.
  • Se o fluxo não tiver um gatilho Chat Hook, a chamada é um no-op silencioso 200: options.flowVariables continua a ser mesclado, mas nenhum gatilho é executado e nenhuns créditos são cobrados. Isto significa que páginas host podem chamar sendHook() de forma otimista sem saber se o autor do fluxo já ligou um gatilho.

sendHook() é um no-op seguro antes da sessão existir (colocado em buffer internamente e descarregado assim que a sessão é criada) e nunca lança exceções para a página host — erros de rede são apenas registados via console.warn.

Limites de entrada

Limites do lado do servidor e do cliente que se aplicam ao sendHook(). Violá-los não é um crash — o backend devolve HTTP 422 e o manager regista via console.warn sem lançar exceção.

RestriçãoLimiteOnde é aplicadoEm caso de violação
Comprimento do name em sendHook1–256 charsBackend (Pydantic)HTTP 422, gatilho não dispara
Número de chaves em options.flowVariables≤ 64Backend (Pydantic)HTTP 422, nada é persistido
Comprimento de cada chave em options.flowVariables≤ 128 charsBackend (Pydantic)HTTP 422, nada é persistido
Chamadas pré-sessão em buffer no manager50Widget (no browser)A chamada em fila mais antiga é descartada e regista um console.warn

O limite do buffer pré-sessão só importa em páginas onde a criação de sessão falha indefinidamente (por exemplo, um erro de rede permanente). Em condições normais, a fila é descarregada assim que onFHChatbotSessionCreated dispara.

1. Adicionar um gatilho Chat Hook (lado do autor do fluxo)

  1. Abra o fluxo associado ao seu chatbot no editor FlowHunt.
  2. Arraste um nó de gatilho Chat Hook para o canvas. O editor impõe um único gatilho por fluxo — múltiplos não são permitidos.
  3. (Opcional) Ative Validate Payload Schema e defina um JSON Schema ao qual o payload recebido deve corresponder. A validação corre dentro do passo — uma incompatibilidade aparece como um evento de erro do fluxo (o endpoint continua a devolver 200; o erro é visível via onFHError).
  4. Ligue as saídas do gatilho (hook_name, payload, flow_variables) aos passos a jusante que pretende disparar (Generator, Chat Output, Tool Calls, ramificações condicionais em hook_name, etc.).
  5. Publique o fluxo.

2. Ramificar em diferentes nomes de hook dentro do fluxo

O name que a página host passa para sendHook() é uma etiqueta para o seu fluxo ramificar, não uma chave de encaminhamento — o backend não faz correspondência de nomes com nós. Em vez disso, o único gatilho Chat Hook do fluxo dispara e expõe o nome como {ChatHook.hook_name}, que referencia na lógica do fluxo para decidir o que fazer.

Exemplo de prompt do sistema:

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.

Para encaminhamento mais complexo, ligue um passo condicional em {ChatHook.hook_name} e ramifique em vários caminhos a jusante.

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

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

Argumentos

ArgumentoTipoObrigatórioDescrição
namestringsimEtiqueta encaminhada para o fluxo como {ChatHook.hook_name}. O gatilho dispara independentemente do valor; a lógica do seu fluxo ramifica nele.
payloadobjectnãoPayload JSON entregue ao gatilho como {ChatHook.payload}. Validado contra o schema do nó se ativado. Padrão {}.
options.flowVariablesobjectnãoVariáveis de sessão a mesclar antes de o gatilho disparar. Disponíveis para passos a jusante e mensagens futuras do utilizador.

Comportamento

  • Chamar antes de onFHChatbotSessionCreated é seguro; a chamada é colocada em buffer e descarregada assim que a sessão existir. O buffer tem limite — veja Limites de entrada acima.
  • Se o fluxo não tiver um gatilho Chat Hook, o pedido é um no-op silencioso 200 — então as páginas host podem chamar sendHook() de forma otimista antes de o autor do fluxo ligar um gatilho. options.flowVariables continua a ser persistido mesmo nesse caso, pelo que a mesma chamada serve como atualização apenas de contexto.
  • Se o gatilho Chat Hook tiver validação de schema ativada e o payload falhar, a validação corre dentro do passo — o endpoint devolve 200 mas o fluxo emite um evento de erro do passo (observável via onFHError).
  • name e options.flowVariables têm limites — veja Limites de entrada acima. Violações devolvem HTTP 422 e nada é persistido.
  • Chamadas bem-sucedidas emitem um evento onFHChatbotFlowVariablesUpdate se options.flowVariables foi fornecido (veja Referência de Eventos).
  • Nunca lança exceções. Falhas de rede e respostas não-2xx são registadas via console.warn.

Exemplo — sugestão proativa em navegação 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 },
    });
  });
});

Exemplo — atualização apenas de contexto (sem Chat Hook ligado)

Se o fluxo não tiver um gatilho Chat Hook, a chamada é um 200 silencioso — assim a mesma API consegue manter flow_variables sincronizadas sem disparar nada:

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. Como o autor do fluxo consome estes valores

  • {ChatHook.hook_name} e {ChatHook.payload.foo} — valores passados via sendHook('x', { foo: 1 }) são expostos no caminho de execução do gatilho Chat Hook. Apenas disponíveis no caminho iniciado pelo disparo do hook.
  • {flow_variables.foo} — valores passados via options.flowVariables são mesclados no conjunto de variáveis da sessão antes de o gatilho disparar. Cada caminho de execução (incluindo mensagens normais de utilizador iniciadas por Chat Input) pode lê-los.

Se quiser que a próxima mensagem do utilizador veja um novo valor, coloque-o em options.flowVariables — o payload por si só apenas afeta a execução iniciada por esse hook.

Referência de Eventos

A FlowHunt JS API despacha 11 eventos personalizados no objeto window. Todos os eventos utilizam a API CustomEvent com bubbles: true e composed: true.

onFHChatbotReady

Disparado quando o widget do chatbot foi completamente renderizado e está pronto para uso.

  • Dados do evento: nenhum.
  • Quando: após o DOM do widget ser montado e o botão de chat estar visível.

onFHChatbotSessionCreated

Disparado quando uma nova sessão de chat é criada no servidor.

  • Dados do evento: event.detail.sessionId — o ID da sessão recém-criada.
  • Quando: após uma chamada de API de criação de sessão bem-sucedida.

onFHChatbotWindowOpened

Disparado quando o utilizador abre a janela de chat. Não disparado em modo incorporado.

onFHChatbotWindowClosed

Disparado quando o utilizador fecha a janela de chat. Não disparado em modo incorporado.

onFHMessageSent

Disparado quando o utilizador envia uma mensagem.

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

onFHMessageReceived

Disparado quando o chatbot recebe e exibe uma resposta.

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 é opcional e só está presente quando um agente humano está envolvido.

onFHFormDataSent

Disparado quando o utilizador submete dados de formulário através do chatbot.

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

onFHFeedback

Disparado quando um utilizador dá feedback de polegar para cima ou polegar para baixo numa mensagem do chatbot.

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

onFHToolCall

Disparado quando uma ferramenta ou ação é executada durante o processamento do fluxo. Apenas disparado nos modos flowAssistant e flowAssistantV3.

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

onFHError

Disparado quando ocorre um erro durante a operação do chatbot.

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

onFHChatbotFlowVariablesUpdate

Adicionado em abril de 2026.

Disparado após uma chamada bem-sucedida de chatbotManager.sendHook(...) que tenha fornecido options.flowVariables. Não disparado para chamadas sendHook() que omitem flowVariables.

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

Utilize-o para observar variáveis mescladas (por exemplo, para sincronizar o seu próprio estado do lado do host, para depuração, ou para voltar a renderizar um elemento de UI que depende dos mesmos dados).

Subscrever Eventos

Existem duas formas de subscrever eventos do chatbot.

Método 1: Escutadores de Eventos da Janela

Utilize window.addEventListener em qualquer parte da sua página. Isto funciona mesmo antes do chatbot ter carregado:

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

Para remover um escutador, mantenha a referência do handler:

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

Método 2: Métodos de Callback do Manager

Dentro do callback init(), utilize os métodos integrados do chatbot manager:

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

Referência de Métodos do Manager

MétodoParâmetrosDescrição
onSessionCreated(fn)fn: () => voidEscutar a criação de sessão
onWindowOpened(fn)fn: () => voidEscutar a abertura da janela
onWindowClosed(fn)fn: () => voidEscutar o fecho da janela
onMessageSent(fn)fn: (event) => voidEscutar mensagens do utilizador
onMessageReceived(fn)fn: (event) => voidEscutar respostas do bot
onFormDataSent(fn)fn: (event) => voidEscutar submissões de formulário
onFeedback(fn)fn: (event) => voidEscutar feedback do utilizador
onToolCall(fn)fn: (event) => voidEscutar execuções de ferramentas
onError(fn)fn: (event) => voidEscutar erros
openChat()—Abre o painel de chat
closeChat()—Fecha o painel de chat
sendHook(name, payload?, options?) (novo)name: string, payload?: object, options?: { flowVariables?: object }Dispara o gatilho Chat Hook no fluxo em execução (ou mescla options.flowVariables silenciosamente se nenhum gatilho estiver ligado)

Ativação Personalizada do Chat: Esconder o Botão e Abrir ao Clicar

Para controlar totalmente quando o chatbot aparece, esconda o botão flutuante padrão e abra o chat programaticamente — por exemplo, a partir do seu próprio botão personalizado.

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

Mostrar um Botão Personalizado Apenas Quando o Chatbot Está Pronto

Pode combinar a ativação oculta com escutadores de eventos para criar interações avançadas:

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

Exemplo Completo de Integração

Um exemplo completo e funcional que demonstra substituições de configuração, rastreamento de eventos, ativação personalizada do chat e o novo método sendHook() em conjunto:

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

Perguntas frequentes

Saiba mais

LiveChat
LiveChat

LiveChat

Integre o FlowHunt com o LiveChat para ativar a escalação inteligente de IA para humano. Implante chatbots de IA que transferem automaticamente conversas para a...

5 min de leitura
AI LiveChat +4
interactive-mcp
interactive-mcp

interactive-mcp

Integre o FlowHunt com o interactive-mcp para possibilitar uma comunicação segura e em tempo real entre grandes modelos de linguagem e usuários em máquinas loca...

5 min de leitura
AI interactive-mcp +7