FlowHunt JS API: Personalización Avanzada del Chatbot

Flowhunt está equipado con potentes funciones que permiten una personalización profunda de cómo se comporta tu chatbot e integra perfectamente con tu sitio o aplicación. En esta página, aprenderás a realizar algunas personalizaciones avanzadas: variables de flujo, parámetros de URL, callbacks basados en eventos y una lógica de activación personalizada del chat.

Variables de Flujo: Personaliza la Experiencia del Chat

Las variables de flujo ofrecen una forma de pasar datos dinámicos al chatbot para que pueda ser verdaderamente personalizado. Puedes almacenar cualquier cosa dentro de estas variables; puede ser información del usuario, datos de sesión o cualquier información relevante.

Cómo Usar flowVariable

El flowVariable forma parte de la configuración de FHChatbot.initChatbot(). Es un objeto donde cada par clave-valor define una variable y su valor. Ejemplo – Pasar la dirección IP y el ID de usuario:

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
(function(d, src, c) { 
  var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
  s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
    var rs=this.readyState;
    if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
    c(this);
  };
  t.parentElement.insertBefore(s,t.nextSibling);
})(document,
  'https://app.flowhunt.io/fh-chat-widget.js',
  function(e){ 
    FHChatbot.initChatbot({
      chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
      workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
      headerTitle: 'URLsLab FAQ Generator',
      maxWindowWidth: '700px',
      "flowVariable": {
        "ip": /* Code to obtain IP Address */ ,
        "userId":  /* Code to obtain User ID */
      }
    });
  }
);
</script>

Notas Importantes:

• Reemplaza /* Code to obtain IP Address */ y /* Code to obtain User ID */ con tu lógica real para obtener estos valores desde tu sistema. Esto a menudo implica acceder a variables del lado del servidor, almacenamiento local o depender de otros métodos de autenticación.
• Una vez pasadas, estas variables están disponibles dentro de la lógica de tu chatbot, lo que permite respuestas dinámicas y flujos personalizados.
• La lógica del chatbot puede leer y usar estas variables para personalizar las conversaciones y hacerlas más contextuales.

urlSuffix: Rastrea y Analiza las Interacciones del Chatbot

El parámetro urlSuffix te permite añadir una cadena de consulta al final de cada URL llamada por el chatbot. Esto es invaluable para rastrear el origen y la efectividad de las interacciones del chatbot usando herramientas de analítica como Google Analytics.

Cómo Usar urlSuffix

Simplemente establece la propiedad urlSuffix con la cadena de consulta que desees, de la siguiente manera:

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
(function(d, src, c) { 
  var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
  s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
    var rs=this.readyState;
    if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
    c(this);
  };
  t.parentElement.insertBefore(s,t.nextSibling);
})(document,
  'https://app.flowhunt.io/fh-chat-widget.js',
  function(e){ 
    FHChatbot.initChatbot({
      chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
      workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
      headerTitle: 'URLsLab FAQ Generator',
      maxWindowWidth: '700px',
      "urlSUffix": "?utm_source=your-custom-source"
    });
  }
);
</script>

En este ejemplo, ?utm_source=your-custom-source se añadirá a todas las URLs iniciadas por el chatbot, permitiéndote rastrear el tráfico del chatbot en tu plataforma de analítica.

Beneficios

• Rastrea Conversiones: Monitorea qué interacciones del chatbot generan más conversiones en tu sitio web.
• Analiza el Comportamiento del Usuario: Comprende cómo navegan los usuarios en tu sitio después de interactuar con el chatbot.
• Atribuye Campañas: Mide la efectividad de campañas que animan a los usuarios a interactuar con el chatbot.

Manejadores de Eventos: Reacciona a las Acciones del Chatbot

Flowhunt te permite configurar manejadores de eventos que activan funciones personalizadas cuando ocurren ciertos eventos en el chatbot. Estos handlers te dan control preciso sobre la experiencia de usuario. Los principales manejadores de eventos incluyen:

• onSessionCreated: Se activa cuando se inicia una nueva sesión del chatbot (¡reiniciar la sesión también cuenta!).
• onWindowOpened: Se activa cuando se abre la ventana del chatbot.
• onWindowClosed: Se activa cuando se cierra la ventana del chatbot.
• onError: Se activa cuando hay un error en el chatbot.
• onMessageReceived: Se activa cuando el bot envía un mensaje y cuando el usuario envía un input.
• onMessageSent: Se activa cuando el usuario envía un mensaje.

Cómo Usar los Manejadores de Eventos

Puedes configurar manejadores usando la variable fhChatbot devuelta por FHChatbot.initChatbot, y añadir listeners como fhChatbot.onSessionCreated(). Aquí tienes un ejemplo:

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
// catch event when chatbot is ready on your page
window.addEventListener("onFHChatbotReady", (e) => {
  console.log("Chatbot is ready, chat button should be visible at this time ready to be clicked.");
});

(function(d, src, c) { 
  var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
  s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
    var rs=this.readyState;
    if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
    c(this);
  };
  t.parentElement.insertBefore(s,t.nextSibling);
})(document,
  'https://app.flowhunt.io/fh-chat-widget.js',
  function(e){ 
    const fhChatbot = FHChatbot.initChatbot({
      chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
      workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
      headerTitle: 'URLsLab FAQ Generator',
      maxWindowWidth: '700px',
      "urlSUffix": "?utm_source=asdfsdfgsdg"
    }); 
    
    fhChatbot.onSessionCreated(function () {
      // Custom logic when the session is created, could fire API calls, or store data
      console.log("session started");
    });
    
    fhChatbot.onWindowOpened(function () {
      // custom logic when the window opens, or show some content above the chat
      console.log("window opened");
    });
    
    fhChatbot.onWindowClosed(function () {
      // custom logic when the window is closed, or show some content above the chat
      console.log("window closed");
    });
    
    fhChatbot.onError(function (e) {
      // custom logic when an error is fired, could track it on error tracking tool.
      console.log(e.metadata);
      console.log("window error");
    });
    
    fhChatbot.onMessageReceived(function (e) {
      // custom logic when the bot answered.
      console.log("chatbot answered");
    });
    
    fhChatbot.onMessageSent(function (e) {
      // custom logic when the user sent an input.
      console.log("user sent an input");
    });
  }
);
</script>

Cada función manejadora de eventos puede ejecutar lógica personalizada para que tu chatbot se comporte dinámicamente según el comportamiento del usuario.

Casos de Uso:

• Analítica e Informes: Haz seguimiento de inicios de sesión y uso del chatbot utilizando onSessionStart y otros eventos para enviar métricas valiosas.
• Actualizaciones Dinámicas de la UI: Modifica tu página en función de eventos del chatbot (por ejemplo, mostrar un mensaje diferente cuando el chat está activo).
• Gestión de Errores: Captura y responde a errores del chatbot, mejorando la experiencia del usuario.
• Flujos de Usuario Personalizados: Implementa lógica personalizada basada en las interacciones del usuario con el chat.

Activación Personalizada del Chat: Ábrelo y Ciérralo a Tu Manera

Al establecer showChatButton: false, puedes ocultar el botón de chat por defecto. Luego, puedes abrir o cerrar la ventana del chatbot programáticamente según tu propia lógica personalizada. Esto te da control total sobre la interfaz de usuario.

Cómo Usar la Activación Personalizada

1. Desactiva el Botón por Defecto: En tus opciones de FHChatbot.initChatbot(), añade: showChatButton: false.
2. Controla Programáticamente: Utiliza los métodos fhChatbot.openChat() y fhChatbot.closeChat() para controlar la visibilidad según tus eventos personalizados.

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
(function(d, src, c) { 
  var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
  s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
    var rs=this.readyState;
    if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
    c(this);
  };
  t.parentElement.insertBefore(s,t.nextSibling);
})(document,
  'https://app.flowhunt.io/fh-chat-widget.js',
  function(e){ 
    const fhChatbot = FHChatbot.initChatbot({
      chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
      workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
      headerTitle: 'URLsLab FAQ Generator',
      maxWindowWidth: '700px',
      "urlSUffix": "?utm_source=asdfsdfgsdg",
      "showChatButton": false
    }); 
    
    // Example: if user clicks on a button 
    const customChatButton = document.getElementById("myCustomChatButton")
    customChatButton.addEventListener("click", () => {
      fhChatbot.openChat();
    });

    // Example: if user closes by using a custom close button
    const customCloseChatButton = document.getElementById("myCustomCloseChatButton")
    customCloseChatButton.addEventListener("click", () => {
      fhChatbot.closeChat();
    });
  }
);
</script>

En este ejemplo, agregamos listeners a botones personalizados para abrir o cerrar el chat.

Beneficios:

• Diseño Personalizado: Integra el chatbot con la apariencia de tu sitio web, utilizando un botón personalizado u otros disparadores para iniciar el chat.
• Control del Flujo de Usuario: Lanza el chatbot en puntos específicos del recorrido del usuario, brindando soporte contextual.
• Ubicación Estratégica: Utiliza animaciones u otras señales visuales para atraer la atención del usuario al chatbot en el momento adecuado.

Utilizando variables de flujo, sufijos de URL, manejadores de eventos y activación personalizada del chat, puedes crear experiencias de chatbot altamente personalizadas y atractivas con Flowhunt. Estas opciones avanzadas te brindan las herramientas para ajustar tu chatbot y que se adapte perfectamente a las necesidades de tu negocio y a las expectativas de tus usuarios.