Como utilizar os gatilhos da Huggy para alavancar suas campanhas

Como utilizar os gatilhos da Huggy para alavancar suas campanhas

Promover as suas campanhas e potencializá-las ficou ainda mais fácil com os gatilhos do Huggy e os novos 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, fazendo com que eles se sintam atraídos a realizar uma ação específica, como iniciar uma conversa com você, por exemplo. Mas como isso é possível? Depois que você definir suas necessidades, é possível personalizar a aparência, determinar as condições de exibição dos gatilhos e escolher o formato que mais se adequa ao seu site e à sua estratégia, tudo isso de forma simples e adaptável, de acordo com a sua real necessidade ou objetivo.

E para turbinar ainda mais os seus gatilhos, você pode contar com os recursos avançados incluídos na API do Huggy Chat . Eles possuem diversos padrões de personalização, permitindo uma construção eficiente para o seu negócio.

Neste conteúdo vamos explorar as várias possibilidades dessa funcionalidade e como utilizá-las no seu site. Ele está dividido da seguinte forma:

Cenário como exemplo

Para que o exemplo fique mais visível, vamos usar o seguinte cenário: uma universidade planeja criar um novo programa de monitoria para ajudar os estudantes com dificuldades nas matérias.

Dos muitos ambientes online e off-line que a instituição possui, é preciso identificar o que terá mais chances de conversão da estratégia. Qual o local mais acessado por esses alunos? Nesse caso, existe uma área restrita apenas para os estudantes, contendo informações como o calendário de eventos, notas e média geral. Por ser um local de acesso frequente, já que os estudantes costumam verificar a localização das salas de aula, notas lançadas das provas e outras, este é um local excelente para atrair a atenção por meio dos gatilhos.

Exemplo de visualização do gatilho dentro da plataforma Huggy - Huggy Chat
Exemplo de visualização do gatilho dentro da plataforma Huggy - Huggy Chat

Para configurá-los no site, usaremos 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.

Identificando o gatilho Huggy Chat

Optaremos pelo uso de um gatilho que apresente a campanha em uma janela pop-up (pop-up é uma janela que se abre automaticamente no navegador mediante a uma ação do usuário.) 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, ou seja, 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, adicionar um comportamento especial na véspera de seu encerramento se torna uma boa estratégia: 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 monitoramento 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 .

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

Existem outros modelos de gatilhos que você pode escolher. Consulte este artigo da Central de Ajuda para conhecer todos eles.

2. Definindo a aparência do gatilho

Aqui definiremos informações como título, texto, mídia (imagem ou vídeo) e núcleos que irão aparecer na sua mensagem pop-up.

Definição das informações que irão aparecer na sua mensagem pop-up
Definição das informações que irão aparecer na sua mensagem pop-up

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 como outras configurações.

Clique em Próximo passo .

Definição das configurações de exibição do gatilho, como Widgets
Definição das configurações de exibição do gatilho, como Widgets

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 fluxo: Escolheremos o fluxo 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 manter a configuração do gatilho pelo nosso Painel.

Demonstração das configurações do recurso Flow dentro da plataforma Huggy Chat
Demonstração das configurações do recurso Flow dentro da plataforma Huggy Chat

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 consultar o acessando o módulo de Automação> Gatilhos e escolha o gatilho desejado. O ID DELE aparecerá nenhuma da Dinamarca URL da Página ultimo , apresentamos Conforme

Identificando o ID do gatilho
Identificando o ID do gatilho

2. Conhecendo uma 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).

Acesso a página restrita onde os estudantes receberão o pop-up
Acesso a página restrita onde os estudantes receberão o pop-up

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: identificar 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 considerados considerados para 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 adicionar alguns mecanismos que melhorarão a experiência de navegação dos navegadores.

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

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 variável pelo chatAberto) 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 uma 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

Criar algumas funções JavaScript para validar e definir o comportamento que os gatilhos precisam para cada situação.

  • todayDate e closingDate

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

  • dias até o fechamento

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 diasAté o encerramento . Quando verdadeiro, executa o método da API Huggy.startTrigger para disparar a ação do gatilho. Faça o desvio, apenas exiba o gatilho utilizando o método Huggy.showTrigger .

Essa lógica pertinente ao sistema de exibição 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 mostra 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 verdadeiro.

  • 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. Faça o contrário, chama a função geralComportamento .

  • checkCampaign

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

  • aluno registrado

Conferência se o estudante já está matriculado na monitoria pelo campo que armazena essa informação no HTML da página. Quando verdadeiro, chama uma 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 monitoramento:

Pop-up na visualização da página restrita do aluno que está com as notas abaixo da média
Pop-up na visualização da página restrita do aluno que está com as notas abaixo da média

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 uma campanha encerrar:

Exemplo de um dos gatilhos do Huggy Chat sendo executado de acordo com a estratégia escolhida
Exemplo de um dos gatilhos do Huggy Chat sendo executado de acordo com a estratégia escolhida

Aplicando o que ensinamos aqui, você constrói uma 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 API poderosa .

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.
Calebe Ribeiro
Autor(a)

Calebe Ribeiro

Analista de Incidentes
Acompanhe as últimas tendências sobre o mundo tech e dicas de Atendimento Digital com a nossa newsletter.