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;
- Identificando o gatilho Huggy Chat;
- Passo a passo para criar um gatilho pelo Painel da Huggy;
- Passo a passo para adicionar novas funcionalidades aos gatilhos;
- Solução final.
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.
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 .
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.
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 .
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.
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
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).
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:
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:
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.
