Integración de la JS API

Referencia completa para la integración de FlowHunt JS API v2. Incrusta el chatbot, suscríbete a los 11 eventos, usa variables de flujo, dispara el trigger Chat Hook a mitad de conversación con sendHook(), rastrea interacciones con parámetros URL y controla la ventana de chat de forma programática.

FlowHunt JavaScript API Chatbot Integration

La FlowHunt JS API te da control total sobre cómo tu chatbot se integra con tu sitio web. Usando el código de integración v2, puedes incrustar el chatbot, suscribirte a eventos de ciclo de vida e interacción, pasar datos dinámicos mediante variables de flujo, disparar el trigger Chat Hook a mitad de conversación con sendHook(), rastrear interacciones con parámetros URL y controlar la ventana de chat programáticamente.

Esta guía cubre todos los aspectos de la JS API con ejemplos de código que puedes copiar y adaptar a tu proyecto.

Código de integración (v2)

Copia y pega el siguiente fragmento en tu HTML justo antes de la etiqueta de cierre </body>. Reemplaza YOUR_CHATBOT_ID y YOUR_WORKSPACE_ID con los valores de la configuración de tu chatbot en 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>

El ID del chatbot en el nombre de la variable global (window.FHChatbot_YOUR_CHATBOT_ID) usa guiones bajos en lugar de guiones.

Sobrescribir la configuración con setConfig()

Antes de llamar a init(), puedes sobrescribir la configuración predeterminada del 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>

Opciones de configuración disponibles

OpciónTipoDescripción
headerTitlestringTexto personalizado del título del encabezado
maxWindowWidthstringAncho máximo de la ventana de chat (por ejemplo, "700px")
maxWindowHeightstringAltura máxima de la ventana de chat
inputPlaceholderstringTexto del marcador de posición para el campo de entrada de mensajes
showChatButtonbooleanMostrar u ocultar el botón flotante de chat predeterminado
openChatPanelbooleanAbrir automáticamente el panel de chat al cargar la página
flowVariablesobjectPares clave-valor de datos personalizados pasados al flujo. Los valores pueden ser de cualquier tipo serializable en JSON (string, número, booleano, objeto, array).
urlSuffixstringCadena de consulta añadida a todas las URLs generadas por el chatbot
cookieConsentbooleanHabilitar la persistencia de sesión mediante cookies
embeddedstringActivar el modo incrustado (sin botón de cierre)
themestringModo de tema

Variables de flujo: pasar datos dinámicos

flowVariables se fusiona en cada sesión que crea el chatbot. Normalmente se utilizan como contexto estático (conocido en el momento de carga de la página): el ID del usuario, su plan, su locale actual, etc.

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

Si el usuario navega después de que el chat se haya abierto, los valores pasados aquí quedan obsoletos. Para actualizarlos a mitad de conversación, llama a chatbotManager.sendHook() con options.flowVariables — consulta Comunicación host → flujo a mitad de conversación más abajo.

Sufijo URL: rastrear interacciones del chatbot

El parámetro urlSuffix añade una cadena de consulta a cada URL generada por el chatbot. Esto es útil para rastrear el tráfico originado por el chatbot en herramientas de análisis:

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

Casos de uso:

  • Rastrear conversiones de las interacciones del chatbot en Google Analytics.
  • Analizar el comportamiento del usuario después de interactuar con el chatbot.
  • Atribuir campañas que impulsan el engagement del chatbot.
Logo

¿Listo para hacer crecer tu negocio?

Comienza tu prueba gratuita hoy y ve resultados en días.

Solicitar demo Iniciar sesión

Comunicación host → flujo a mitad de conversación

Añadido en abril de 2026 como parte de la funcionalidad Chat Hook de FlowHunt.

En las aplicaciones de página única, la ventana de chat suele permanecer abierta mientras el usuario navega entre pantallas. Una vez que el chat está en marcha, las flowVariables pasadas mediante setConfig() quedan obsoletas y no hay forma de avisar al flujo de algo que ha ocurrido en la página host. Un único método del administrador — sendHook(name, payload, options?) — cubre tanto el caso de “disparar un trigger” como el de “solo actualizar el contexto”:

  • Pasa un name y (opcionalmente) un payload para disparar el trigger Chat Hook del flujo. El autor del flujo coloca un único nodo Chat Hook en el lienzo y deriva en función de {ChatHook.hook_name} para decidir qué hacer.
  • Pasa options.flowVariables para fusionar variables de sesión al mismo tiempo — los valores se persisten antes de que se dispare el trigger y permanecen disponibles para el resto de la sesión.
  • Si el flujo no tiene un trigger Chat Hook, la llamada es un 200 silencioso sin efecto: options.flowVariables igualmente se fusiona, pero no se ejecuta ningún trigger ni se cobran créditos. Esto significa que las páginas host pueden llamar a sendHook() de forma optimista sin saber si el autor del flujo ha conectado ya un trigger.

sendHook() es seguro como no-op antes de que exista la sesión (se almacena internamente en un buffer y se libera una vez creada la sesión) y nunca lanza excepciones a la página host — los errores de red se registran únicamente mediante console.warn.

Límites de entrada

Límites de servidor y de cliente que aplican a sendHook(). Vulnerarlos no provoca un fallo — el backend devuelve HTTP 422 y el administrador registra la incidencia mediante console.warn sin lanzar excepciones.

RestricciónLímiteDónde se aplicaEn caso de incumplimiento
Longitud del name en sendHook1–256 charsBackend (Pydantic)HTTP 422, el trigger no se dispara
Número de claves en options.flowVariables≤ 64Backend (Pydantic)HTTP 422, no se persiste nada
Longitud de cada clave en options.flowVariables≤ 128 charsBackend (Pydantic)HTTP 422, no se persiste nada
Llamadas pre-sesión almacenadas en buffer por el administrador50Widget (en el navegador)Se descarta la llamada en cola más antigua y se registra un console.warn

El límite del buffer pre-sesión solo importa en páginas en las que la creación de sesión falle de forma indefinida (por ejemplo, un error de red permanente). En condiciones normales, la cola se libera en cuanto se dispara onFHChatbotSessionCreated.

1. Añadir un trigger Chat Hook (lado del autor del flujo)

  1. Abre el flujo asociado a tu chatbot en el editor de FlowHunt.
  2. Arrastra un nodo trigger Chat Hook al lienzo. El editor obliga a que haya un único trigger por flujo — no se permiten varios.
  3. (Opcional) Activa Validate Payload Schema y define un JSON Schema con el que debe coincidir el payload entrante. La validación se ejecuta dentro del paso — un desajuste se manifiesta como un evento de error de flujo (el endpoint sigue devolviendo 200; el error es visible mediante onFHError).
  4. Conecta las salidas del trigger (hook_name, payload, flow_variables) a los pasos posteriores que quieras disparar (Generator, Chat Output, Tool Calls, ramas condicionales sobre hook_name, etc.).
  5. Publica el flujo.

2. Derivar según distintos nombres de hook dentro del flujo

El name que la página host pasa a sendHook() es una etiqueta sobre la que el flujo deriva, no una clave de enrutamiento — el backend no compara nombres con nodos. En su lugar, el único trigger Chat Hook del flujo se dispara y expone el nombre como {ChatHook.hook_name}, al que haces referencia en la lógica del flujo para decidir qué hacer.

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

Para enrutamientos más complejos, conecta un paso condicional sobre {ChatHook.hook_name} y deriva en varias rutas posteriores.

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

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

Argumentos

ArgumentoTipoObligatorioDescripción
namestringsíEtiqueta que se reenvía al flujo como {ChatHook.hook_name}. El trigger se dispara independientemente del valor; la lógica de tu flujo deriva en función de él.
payloadobjectnoPayload JSON entregado al trigger como {ChatHook.payload}. Se valida frente al schema del nodo si está habilitado. Por defecto {}.
options.flowVariablesobjectnoVariables de sesión que se fusionarán antes de que se dispare el trigger. Disponibles para los pasos posteriores y para los futuros mensajes del usuario.

Comportamiento

  • Llamar antes de onFHChatbotSessionCreated es seguro; la llamada se almacena en buffer y se libera una vez que existe la sesión. El buffer tiene un límite — consulta Límites de entrada más arriba.
  • Si el flujo no tiene un trigger Chat Hook, la solicitud es un 200 silencioso sin efecto — de modo que las páginas host pueden llamar a sendHook() de forma optimista antes de que el autor del flujo conecte un trigger. options.flowVariables se persiste igualmente en ese caso, por lo que la misma llamada sirve también como actualización exclusiva de contexto.
  • Si el trigger Chat Hook tiene la validación de schema habilitada y el payload no la cumple, la validación se ejecuta dentro del paso — el endpoint devuelve 200 pero el flujo emite un evento de error de paso (observable mediante onFHError).
  • name y options.flowVariables están acotados — consulta Límites de entrada más arriba. Las violaciones devuelven HTTP 422 y no se persiste nada.
  • Las llamadas exitosas emiten un evento onFHChatbotFlowVariablesUpdate si se ha proporcionado options.flowVariables (consulta la Referencia de eventos).
  • Nunca lanza excepciones. Los fallos de red y las respuestas no-2xx se registran mediante console.warn.

Ejemplo — sugerencia proactiva en una navegación 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 },
    });
  });
});

Ejemplo — actualización exclusiva de contexto (sin Chat Hook conectado)

Si el flujo no tiene un trigger Chat Hook, la llamada es un 200 silencioso — por lo que la misma API permite mantener flow_variables sincronizado sin 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. Cómo consume estos valores el autor del flujo

  • {ChatHook.hook_name} y {ChatHook.payload.foo} — los valores pasados mediante sendHook('x', { foo: 1 }) quedan expuestos en la ruta de ejecución del trigger Chat Hook. Solo están disponibles en la ruta iniciada por el disparo del hook.
  • {flow_variables.foo} — los valores pasados mediante options.flowVariables se fusionan en el conjunto de variables de la sesión antes de que se dispare el trigger. Cualquier ruta de ejecución (incluidos los mensajes de usuario disparados de forma normal por Chat Input) puede leerlos.

Si quieres que el siguiente mensaje del usuario vea un nuevo valor, ponlo en options.flowVariables — el payload por sí solo solo afecta a la ejecución iniciada por ese hook.

Referencia de eventos

La FlowHunt JS API despacha 11 eventos personalizados en el objeto window. Todos los eventos usan la API CustomEvent con bubbles: true y composed: true.

onFHChatbotReady

Se dispara cuando el widget del chatbot se ha renderizado completamente y está listo para usar.

  • Datos del evento: ninguno.
  • Cuándo: después de que el DOM del widget esté montado y el botón de chat sea visible.

onFHChatbotSessionCreated

Se dispara cuando se crea una nueva sesión de chat en el servidor.

  • Datos del evento: event.detail.sessionId — el ID de la sesión recién creada.
  • Cuándo: tras una llamada API exitosa de creación de sesión.

onFHChatbotWindowOpened

Se dispara cuando el usuario abre la ventana de chat. No se dispara en modo incrustado.

onFHChatbotWindowClosed

Se dispara cuando el usuario cierra la ventana de chat. No se dispara en modo incrustado.

onFHMessageSent

Se dispara cuando el usuario envía un mensaje.

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

onFHMessageReceived

Se dispara cuando el chatbot recibe y muestra una respuesta.

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 es opcional y solo está presente cuando un agente humano está involucrado.

onFHFormDataSent

Se dispara cuando el usuario envía datos de formulario a través del chatbot.

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

onFHFeedback

Se dispara cuando un usuario da una valoración de pulgar arriba o pulgar abajo a un mensaje del chatbot.

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

onFHToolCall

Se dispara cuando se ejecuta una herramienta o acción durante el procesamiento del flujo. Solo se dispara en los modos flowAssistant y flowAssistantV3.

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

onFHError

Se dispara cuando ocurre un error durante la operación del chatbot.

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

onFHChatbotFlowVariablesUpdate

Añadido en abril de 2026.

Se dispara tras una llamada exitosa a chatbotManager.sendHook(...) que haya proporcionado options.flowVariables. No se dispara en llamadas a sendHook() que omitan flowVariables.

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

Úsalo para observar las variables fusionadas (por ejemplo, para sincronizar tu propio estado en el host, para depuración o para volver a renderizar un elemento de UI que dependa de los mismos datos).

Suscripción a eventos

Hay dos formas de suscribirse a los eventos del chatbot.

Método 1: Listeners de eventos de Window

Usa window.addEventListener en cualquier parte de tu página. Esto funciona incluso antes de que el chatbot se haya cargado:

<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 eliminar un listener, conserva la referencia al manejador:

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

Dentro del callback de init(), usa los métodos integrados del administrador del 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);
  });
});

Referencia de métodos del administrador

MétodoParámetrosDescripción
onSessionCreated(fn)fn: () => voidEscuchar la creación de sesión
onWindowOpened(fn)fn: () => voidEscuchar la apertura de ventana
onWindowClosed(fn)fn: () => voidEscuchar el cierre de ventana
onMessageSent(fn)fn: (event) => voidEscuchar mensajes del usuario
onMessageReceived(fn)fn: (event) => voidEscuchar respuestas del bot
onFormDataSent(fn)fn: (event) => voidEscuchar envíos de formularios
onFeedback(fn)fn: (event) => voidEscuchar feedback del usuario
onToolCall(fn)fn: (event) => voidEscuchar ejecuciones de herramientas
onError(fn)fn: (event) => voidEscuchar errores
openChat()—Abre el panel de chat
closeChat()—Cierra el panel de chat
sendHook(name, payload?, options?) (nuevo)name: string, payload?: object, options?: { flowVariables?: object }Dispara el trigger Chat Hook en el flujo en ejecución (o fusiona options.flowVariables de forma silenciosa si no hay un trigger conectado)

Activación personalizada del chat: ocultar botón y abrir al hacer clic

Para controlar completamente cuándo aparece el chatbot, oculta el botón flotante predeterminado y abre el chat programáticamente — por ejemplo, desde tu propio botón 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 un botón personalizado solo cuando el chatbot esté listo

Puedes combinar la activación oculta con listeners de eventos para crear interacciones avanzadas:

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

Ejemplo de integración completo

Un ejemplo funcional completo que demuestra las sobrescrituras de configuración, el seguimiento de eventos, la activación personalizada del chat y el nuevo método sendHook() juntos:

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

Preguntas frecuentes

Saber más

LiveChat
LiveChat

LiveChat

Integra FlowHunt con LiveChat para habilitar escalada inteligente de IA a humano. Despliega chatbots de IA que transfieren automáticamente conversaciones a agen...

5 min de lectura
AI LiveChat +4
Flujos
Flujos

Flujos

Los Flujos son el cerebro detrás de todo en FlowHunt. Aprende a crearlos con un constructor visual sin código, desde colocar el primer componente hasta la integ...

2 min de lectura
AI No-Code +4