Ao ativar o botão flutuante de WhatsApp no seu site, seus leads e alunos podem entrar em contato diretamente com você para tirar dúvidas, seja antes da compra de um produto ou após a aquisição de um curso.
É possível, inclusive, configurar botões e números diferentes para cada situação, tornando o atendimento ainda mais organizado e eficiente.
E se você quiser ir além, pode integrar o seu WhatsApp à Inteligência Artificial de Vendas da EngagED, desbloqueando todo o potencial do atendimento automatizado para vender mais e melhor.
Atendimento disponível 24 horas por dia, mesmo quando você não está online
Respostas rápidas, reduzindo o tempo de espera do cliente
Aumento da taxa de conversão ao atender o lead no momento certo
Melhor experiência para alunos e clientes, com atendimento direto e prático
Automação inteligente com a IA de Vendas da EngagED, focada em vender mais
Saiba mais sobre a Inteligência Artificial de Vendas da EngagED no artigo Como configurar o seu Agente de IA para Vendas no seu Whatsapp. No admin, ela fica em Comercial > IA de Vendas.
Como adicionar o botão via Google Tag Manager (GTM)
Para seguir esse passo a passo, é necessário que sua página própria esteja integrada com o Google Tag Manager (GTM).
1. Criando seu contêiner no Google Tag Manager
Se você ainda não tem um contêiner criado no GTM, siga este processo:
-
Acesse o Google Tag Manager
-
Clique em "Criar conta"
-
Preencha os campos com as informações solicitadas
Dica de organização:
Na hora de inserir o nome do contêiner, use o subdomínio da sua conta EngagED.
Isso ajuda a identificar rapidamente a qual projeto aquele GTM pertence.
Onde encontrar o subdomínio?
Acesse Configurações > Aba Geral dentro da sua conta EngagED.
Exemplo: se seu subdomínio forminhaacademia.engaged.com.br, você pode nomear o contêiner comominhaacademia.
Depois de criar o contêiner, o GTM irá gerar um código como GTM-XXXXXXX.
Você vai usar esse código dentro da plataforma da EngagED para integrar o GTM.
2. Habilitando o GTM na EngagED
-
No menu lateral da sua conta EngagED, clique em Configurações
-
Abra a aba Integrações
-
Clique no card Google Tag Manager (GTM)
-
Habilite a integração para:
-
Habilitar integração na Área de Membros (LMS)
-
Habilitar integração em Checkouts e Links de Pagamento
-
-
Cole o ID do contêiner (
GTM-XXXXXXX) nos dois campos: Contêiner Área de membros (LMS) e Código do Contêiner
Em Checkouts associados, você pode deixar a opção "Todos os Checkouts e Links de pagamento" selecionada, ou configurar individualmente.
Clique em SALVAR ALTERAÇÕES, no canto inferior direito.
3. Criando a tag do botão de WhatsApp
Agora que a integração está pronta, vamos configurar o botão.
Copie o código abaixo:
Este é o botão flutuante que será exibido no canto inferior direito da página:
<a href="https://api.whatsapp.com/send?phone=SEU_NUMERO_AQUI"
target="_blank"
class="btWhatsapp">
<img src="https://s3-sa-east-1.amazonaws.com/media.engaged.com.br/design/icon-whatsapp.svg"
alt="Fale conosco no WhatsApp">
</a>
<style>
/* ESTILO BASE */
.btWhatsapp {
background-color: #25d366;
position: fixed;
z-index: 99;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
transition: 0.3s;
}
/* ===== DESKTOP ===== */
@media (min-width: 992px) {
.btWhatsapp {
right: 20px;
bottom: 20px;
width: 60px;
height: 60px;
border-radius: 50%;
padding: 10px;
}
.btWhatsapp img {
content: url("https://d335luupugsy2.cloudfront.net/cms/files/1446/1588875979/$5u0ndp8vgxo");
width: 100%;
height: 100%;
}
}
/* ===== MOBILE ===== */
@media (max-width: 991px) {
.btWhatsapp {
left: -45px;
bottom: 20%;
width: 100px;
height: 30px;
border-radius: 15px;
padding: 5px 10px;
transform: translateY(-50%);
justify-content: flex-end;
}
.btWhatsapp img {
height: 20px;
width: auto;
}
}
</style>
Importante: Substitua
SEU_NUMERO_AQUIpelo número de WhatsApp conectado à sua automação.
Exemplo de formato correto:5541999999999(DDI + DDD + número, sem espaços ou símbolos)
4. Configure a tag no GTM
-
No GTM, clique em "Nova tag"
-
Escolha o tipo "HTML personalizada"
-
Cole o código copiado acima
-
Nomeie a tag como:
Botão WhatsApp flutuante
5. Configure o acionamento
-
Clique em "Acionamento"
-
Selecione o tipo: "DOM pronto" (DOM Ready)
-
Defina em quais páginas o botão deve aparecer:
-
Checkout
-
Área do aluno (LMS)
-
6. Publique o contêiner
Depois de salvar a tag e o acionador:
-
Clique em "Enviar" no GTM
-
Publique a nova versão
Pronto! O botão estará visível no canto inferior direito das páginas configuradas.
Visual do botão
O botão aparece assim para o visitante na visão de desktop (telas maiores) no canto direito inferior da tela:
O botão aparece assim para o visitante na visão de mobile (telas menores, geralmente celulares e alguns tablets) no canto esquerdo inferior da tela:
Ao clicar, o usuário será redirecionado para o WhatsApp com o número configurado, iniciando uma conversa com atendimento automatizado.
Precisa de ajuda?
Se você ainda não tem um número com automação ou deseja validar se a configuração está correta, fale com o nosso time de suporte. Estamos prontos para te ajudar!