FlowHunt JS API: Personalização Avançada do Chatbot

O Flowhunt está repleto de recursos poderosos que permitem uma personalização profunda de como seu chatbot se comporta e se integra perfeitamente ao seu site ou aplicação. Nesta página, você aprende a realizar algumas customizações avançadas – variáveis de fluxo, parâmetros de URL, callbacks baseados em eventos e lógica personalizada de ativação do chat.

Variáveis de Fluxo: Personalize a Experiência do Chat

As variáveis de fluxo oferecem um meio de passar dados dinâmicos para o chatbot, possibilitando uma personalização real. Você pode armazenar qualquer coisa nessas variáveis; podem ser dados do usuário, da sessão ou qualquer informação relevante.

Como Usar flowVariable

O flowVariable faz parte da configuração do FHChatbot.initChatbot(). É um objeto onde cada par chave-valor define uma variável e seu valor. Exemplo – Passando o endereço IP e o ID do usuário:

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

• Substitua /* Code to obtain IP Address */ e /* Code to obtain User ID */ pela sua lógica para obter esses valores do seu sistema. Normalmente, isso envolve acessar variáveis do servidor, armazenamento local ou outros métodos de autenticação.
• Uma vez passadas, essas variáveis ficam disponíveis na lógica do seu chatbot, permitindo respostas dinâmicas e fluxos personalizados.
• A lógica do chatbot pode ler e usar essas variáveis para personalizar conversas e torná-las mais contextuais.

urlSuffix: Rastreie e Analise as Interações com o Chatbot

O parâmetro urlSuffix permite anexar uma string de consulta ao final de cada URL chamada pelo chatbot. Isso é fundamental para rastrear a origem e a eficácia das interações do chatbot utilizando ferramentas de análise como o Google Analytics.

Como Usar urlSuffix

Basta definir a propriedade urlSuffix para a string de consulta desejada, assim:

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

Neste exemplo, ?utm_source=your-custom-source será anexado a todas as URLs iniciadas pelo chatbot, permitindo que você rastreie o tráfego do chatbot em sua plataforma de análise.

Benefícios

• Rastreie Conversões: Monitore quais interações do chatbot levam a mais conversões em seu site.
• Analise o Comportamento do Usuário: Entenda como os usuários navegam em seu site após interagirem com o chatbot.
• Atribua Campanhas: Meça a eficácia de campanhas que incentivam os usuários a interagir com o chatbot.

Manipuladores de Eventos: Reaja às Ações do Chatbot

O Flowhunt permite configurar manipuladores de eventos que disparam funções personalizadas quando certos eventos ocorrem no chatbot. Esses handlers fornecem controle preciso sobre a experiência do usuário. Os principais manipuladores de eventos incluem:

• onSessionCreated: Disparado quando uma nova sessão do chatbot é iniciada (reiniciar a sessão também conta!).
• onWindowOpened: Disparado quando a janela do chatbot é aberta.
• onWindowClosed: Disparado quando a janela do chatbot é fechada.
• onError: Disparado quando ocorre um erro no chatbot.
• onMessageReceived: Disparado quando o bot envia uma mensagem e quando um usuário envia uma entrada.
• onMessageSent: Disparado quando o usuário envia uma mensagem.

Como Usar Manipuladores de Eventos

Você pode configurar handlers usando a variável fhChatbot retornada por FHChatbot.initChatbot, e adicionar ouvintes como fhChatbot.onSessionCreated(). Veja um exemplo:

<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 () {
      // Lógica personalizada quando a sessão é criada, pode disparar chamadas de API ou armazenar dados
      console.log("session started");
    });
    
    fhChatbot.onWindowOpened(function () {
      // lógica personalizada quando a janela é aberta, ou exibir algum conteúdo acima do chat
      console.log("window opened");
    });
    
    fhChatbot.onWindowClosed(function () {
      // lógica personalizada quando a janela é fechada, ou exibir algum conteúdo acima do chat
      console.log("window closed");
    });
    
    fhChatbot.onError(function (e) {
      // lógica personalizada ao ocorrer um erro, pode rastrear em uma ferramenta de monitoramento de erros
      console.log(e.metadata);
      console.log("window error");
    });
    
    fhChatbot.onMessageReceived(function (e) {
      // lógica personalizada quando o bot responde.
      console.log("chatbot answered");
    });
    
    fhChatbot.onMessageSent(function (e) {
      // lógica personalizada quando o usuário envia uma entrada.
      console.log("user sent an input");
    });
  }
);
</script>

Cada função de manipulador de evento pode executar lógica personalizada para que seu chatbot se comporte de forma dinâmica de acordo com o comportamento do usuário.

Casos de Uso:

• Análise e Relatórios: Rastreie início de sessões e uso do chatbot usando onSessionStart e outros eventos para enviar métricas valiosas.
• Atualizações Dinâmicas de UI: Modifique sua página com base em eventos do chatbot (ex: exibir uma mensagem diferente quando o chat está ativo).
• Tratamento de Erros: Capture e trate erros do chatbot, melhorando a experiência do usuário.
• Fluxos Personalizados: Implemente lógica personalizada baseada nas interações do usuário com o chat.

Ativação Personalizada do Chat: Abra e Feche nos Seus Termos

Definindo showChatButton: false, você pode ocultar o botão padrão do chat. Depois, é possível abrir ou fechar a janela do chatbot programaticamente, com base em sua própria lógica personalizada. Isso oferece controle total sobre a interface do usuário.

Como Usar a Ativação Personalizada

1. Desative o Botão Padrão: Em suas opções do FHChatbot.initChatbot(), adicione: showChatButton: false.
2. Controle Programaticamente: Use os métodos fhChatbot.openChat() e fhChatbot.closeChat() para controlar a visibilidade conforme seus 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
    }); 
    
    // Exemplo: se o usuário clicar em um botão personalizado 
    const customChatButton = document.getElementById("myCustomChatButton")
    customChatButton.addEventListener("click", () => {
      fhChatbot.openChat();
    });

    // Exemplo: se o usuário fechar usando um botão personalizado
    const customCloseChatButton = document.getElementById("myCustomCloseChatButton")
    customCloseChatButton.addEventListener("click", () => {
      fhChatbot.closeChat();
    });
  }
);
</script>

Neste exemplo, adicionamos ouvintes a botões personalizados para abrir ou fechar o chat.

Benefícios:

• Design Personalizado: Integre o chatbot ao visual e experiência do seu site, usando um botão personalizado ou outros gatilhos para iniciar o chat.
• Controle do Fluxo do Usuário: Inicie o chatbot em pontos específicos durante a jornada do usuário, melhorando o suporte contextual.
• Posicionamento Estratégico: Use animações ou outros elementos visuais para chamar a atenção do usuário para o chatbot no momento certo.

Utilizando variáveis de fluxo, sufixos de URL, manipuladores de eventos e ativação personalizada do chat, você pode criar experiências de chatbot altamente personalizadas e envolventes com o Flowhunt. Essas opções avançadas fornecem as ferramentas para ajustar seu chatbot, atendendo perfeitamente às necessidades do seu negócio e às expectativas dos seus usuários.