Conteúdos sobre Atendimento Digital, Chatbots, Qualidade no Atendimento, WhatsApp Business API e outros temas que podem potencializar seu negócio.

Neste artigo, mostraremos como é possível utilizar os gatilhos da Huggy para promover as suas campanhas e potencializá-las explorando alguns recursos avançados da API do Huggy Chat.


Os gatilhos são uma poderosa ferramenta oferecida pela nossa plataforma para atrair potenciais clientes que estão navegando no seu site, encorajando-os a realizar uma ação específica como iniciar uma conversa com você.

Tudo isso por meio de configurações simples e adaptáveis de acordo com as suas necessidades: personalize a aparência, determine as condições de exibição dos gatilhos e escolha o formato que mais se adequa ao seu site e à sua estratégia.

E para turbinar ainda mais os seus gatilhos, você pode contar com os recursos avançados incluídos na API do Huggy Chat. Eles oferecem diversas possibilidades de personalização, permitindo a construção de eficientes campanhas para o seu negócio.

Neste artigo, exploraremos algumas dessas possibilidades para ensinar você a utilizá-las no seu site.

Ele está dividido da seguinte forma:

O cenário de exemplo

Vamos supor que uma universidade planeja criar um novo programa de monitoria para auxiliar especialmente os estudantes com dificuldades nas matérias.

Essa instituição possui um site com uma área restrita apenas para os estudantes, contendo informações como o calendário de eventos, notas e média geral. Como os estudantes costumam acessá-la diariamente, este é um local excelente para atrair a atenção deles por meio do recurso de gatilhos.

Para configurá-los no site, utilizaremos as opções já disponibilizadas pela nossa plataforma e alguns recursos da API do Huggy Chat:

Huggy.startTrigger Método que executa a ação configurada no gatilho.
Huggy.showTrigger Método que exibe o gatilho na tela.
Huggy.subscribe Método pelo qual o usuário se inscreve para escutar um determinado evento e executar uma função passada como parâmetro.
afterLoad Evento callback que é executado após o término do carregamento do Huggy Chat.

O que será feito

Optaremos pelo uso de um gatilho que apresente a campanha em uma janela pop-up.

Para estabelecer as condições de exibição do gatilho, é necessário pensar em uma estratégia envolvendo o público-alvo do programa de monitoria.

Utilizaremos como parâmetro a média geral de conclusão, identificando os estudantes que apresentam dificuldades com as matérias como aqueles que estão abaixo da média. O sistema de pontuação da universidade varia de 0 a 100, com média geral equivalente a 60.

Todos os estudantes poderão visualizar o gatilho ao acessar a área restrita de estudantes. Caso eles interajam com o botão de ação do gatilho, um novo atendimento será aberto pelo Huggy Chat para o cadastro dos estudantes no programa de monitoria.

Como os estudantes abaixo da média são a prioridade da campanha, adicionaremos um comportamento especial na véspera de seu encerramento: a ação do gatilho será executada automaticamente, sem a interação do estudante com o botão de ação.

E para evitar que os estudantes já cadastrados no programa recebam novamente a campanha, verificaremos se o programa de monitoria consta na lista de atividades extras dos estudantes antes de exibir o gatilho.

Passo a passo para criar um gatilho pelo Painel da Huggy

1. Escolhendo o nome e o tipo de gatilho

Acesse o nosso módulo de Automação > Gatilhos > Criar novo Gatilho.

Em seguida, estabeleça um nome para o gatilho e escolha o tipo desejado. Utilizaremos o tipo Modal neste exemplo.

Feito isso, clique em Próximo passo.

Consulte este artigo da Central de Ajuda para conhecer todos os tipos de gatilhos.

2. Definindo a aparência do gatilho

Aqui definiremos informações como título, texto, mídia (imagem ou vídeo) e cores.

3. Estabelecendo as condições

Nesta etapa, você pode definir as configurações de exibição do gatilho.

Utilizaremos a opção Selecione os widgets para vincular o novo gatilho ao Huggy Chat instalado no site da universidade.

Depois, habilitaremos a opção Nunca exibir, sem alterar as outras configurações.

Clique em Próximo passo.

Caso você tenha dúvidas sobre como instalar o Huggy Chat no seu site, consulte este artigo da nossa Central de Ajuda.

4. Determinando a ação do gatilho

No nosso exemplo, queremos iniciar um fluxo de atendimento para os estudantes que desejem se cadastrar no programa de monitoria. Para atingir este objetivo, utilizaremos o recurso Flow nesta etapa de configuração:

  • Selecione uma ação: Executar Flow
  • Selecione um Flow: Escolheremos o flow criado exclusivamente para esta campanha
  • Mensagem inicial: Olá!

Precisa de ajuda para criar fluxos de atendimento que atendam às necessidades do seu negócio? Clique aqui e fale agora mesmo com um de nossos especialistas.

Clique em Salvar gatilho para concluir a configuração do gatilho pelo nosso Painel.

Passo a passo para adicionar novas funcionalidades aos gatilhos

1. Identificando o ID do gatilho

Para configurar os gatilhos por meio da API, é necessário dispor de uma informação muito importante: o identificador (ID) único do gatilho.

Você pode consultá-lo acessando o módulo de Automação > Gatilhos e selecionando o gatilho desejado. O ID dele aparecerá no final da URL da página, conforme apresentamos na imagem abaixo:

2. Conhecendo a estrutura HTML da página

O nosso exemplo envolve um cenário pelo qual os estudantes acessam uma página restrita do site da universidade utilizando as suas credenciais (login e senha).

Essa página apresenta dados pessoais e acadêmicos dos estudantes, incluindo duas informações que serão determinantes para a exibição dos gatilhos:

  • Média geral: identificaremos os estudantes abaixo da média, prioridade desta campanha;
  • Lista de Atividades: verificaremos se os estudantes já estão cadastrados no programa de monitoria para impedir que o gatilho apareça novamente ao acessarem a página.

Observe como o HTML dessa página está estruturado, incluindo os identificadores que serão necessários para a manipulação via JavaScript mais à frente:


3. Adaptando o código do Huggy Chat

Como a ação do nosso gatilho envolve o Huggy Chat, adaptaremos o código dele para acrescentar alguns mecanismos que melhorarão a experiência de navegação dos estudantes.

O primeiro passo será utilizar o método Huggy.subscribe para capturar os estados da janela do Huggy Chat: box-opened quando aberto e box-closed quando fechado. Armazenaremos essa informação na variável chatOpened.

Em seguida, criaremos uma lógica para controlar os disparos da ação do gatilho, bloqueando eles caso o estudante esteja com o Huggy Chat aberto (verificando o estado dele pela variável chatOpened) ou com sua inscrição já confirmada no programa de monitoria (pela chamada da função registredStudent).

Por último, adicionaremos um atraso na execução das validações utilizando a função setTimeout. O intervalo desse atraso será controlado por meio da variável delayTrigger e de um fator multiplicativo capaz de converter o seu valor para segundos.

Colocaremos todas as nossas modificações na propriedade afterLoad do Huggy Chat, que permite executar uma função quando ele termina de ser carregado na página.


4. Implementando o código em JavaScript

Criaremos algumas funções JavaScript para validarem e definirem o comportamento que os gatilhos terão para cada situação.

  • todayDate e closingDate

Retorna a data atual e a data de encerramento da campanha.

  • daysUntilClosing

Retorna quantos dias faltam para o final da campanha.

  • targetStudentBehavior

Função voltada para o público-alvo principal da campanha: os estudantes abaixo da média.

Ela verifica se falta apenas um dia para o encerramento da campanha por meio da função daysUntilClosing. Quando verdadeiro, executa o método da API Huggy.startTrigger para disparar a ação do gatilho. Do contrário, apenas exibe o gatilho utilizando o método Huggy.showTrigger.

Essa lógica assegura que o sistema exiba o gatilho durante toda a campanha, mas inicie um atendimento automaticamente para os estudantes abaixo da média quando faltar apenas um dia para o seu encerramento.

  • generalBehavior

Função voltada para os estudantes que não são o público-alvo principal da campanha: os que estão acima da média.

Ela exibe o gatilho da campanha por meio do método Huggy.showTrigger.

  • activeCampaign

Verifica se a campanha está ativa, analisando se a data atual é menor ou igual à data de encerramento. Quando verdadeiro, retorna o valor true.

  • targetStudent

Analisa se o estudante faz parte do público-alvo da campanha, retornando o valor true ou false. Essa validação é feita por meio da média do estudante, recuperada pelo campo que armazena essa informação no HTML da página.

  • checkStudent

Controla o comportamento que o gatilho deve assumir, de acordo com o tipo de estudante.

Caso o estudante esteja abaixo da média, chama a função targetStudentBehavior. Do contrário, chama a função generalBehavior.

  • checkCampaign

Verifica o status da campanha. Caso ela esteja ativa, executa a função checkStudent para continuar a execução do script.

  • registredStudent

Confere se o estudante já está matriculado na monitoria pelo campo que armazena essa informação no HTML da página. Quando verdadeiro, chama a função checkCampaign.

Observe agora o código completo, contendo todas essas modificações que desenvolvemos:


Solução final

Este é o comportamento do gatilho para um estudante que está acima da média e não se cadastrou no programa de monitoria:

Agora veja o que acontece quando um estudante abaixo da média não se cadastrou no programa de monitoria e falta apenas um dia para a campanha encerrar:

Aplicando o que ensinamos aqui, você constrói a isca perfeita para atrair os usuários do seu site, oferecendo um atendimento personalizado de acordo com as necessidades deles.

E você pode fazer muito mais aproveitando os diversos recursos disponibilizados pela nossa poderosa API.

Consulte a nossa documentação e transforme o seu Atendimento Digital com a melhor tecnologia que o mercado oferece.

Clique aqui para acessar a documentação da API do Huggy Chat.
You've successfully subscribed to Huggy Blog
Welcome back! You've successfully signed in.
Great! You've successfully signed up.
Success! Your account is fully activated, you now have access to all content.