Como Utilizar o Botão de WhatsApp no Seu Site com o ChatFunnel
Introdução
Este guia explica como instalar e utilizar o botão de WhatsApp no seu site para direcionar as mensagens para um número conectado ao ChatFunnel. O botão permitirá que os visitantes iniciem uma conversa diretamente pelo WhatsApp e acionem um flow de automação configurado no ChatFunnel.
Passo 1: Inserindo o Código no Seu Site
Para adicionar o botão ao seu site, você precisará inserir dois trechos de código.
1. Adicionar o Código no <head>
Dentro do <head> do seu site, adicione o seguinte código para carregar os ícones necessários:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
2. Adicionar o Código no <body>
No final do <body>, insira este código para exibir o botão de WhatsApp na sua página:
<script>
(function() {
const style = document.createElement("style");
style.innerHTML = `
/* Container do botão */
#whatsapp-btn {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #25d366;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
z-index: 9999;
cursor: pointer;
transition: transform 0.2s ease-in-out;
}
/* Efeito hover */
#whatsapp-btn:hover {
transform: scale(1.05);
}
/* Ícone */
#whatsapp-btn i {
font-size: 30px;
color: #ffffff;
}
/* Tooltip */
#whatsapp-btn::after {
content: 'Enviar mensagem no WhatsApp';
position: absolute;
bottom: 70px;
right: 0;
background-color: #333;
color: #fff;
padding: 5px 8px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transform: translateX(-30%);
transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}
/* Mostrar tooltip ao passar o mouse */
#whatsapp-btn:hover::after {
opacity: 1;
transform: translateX(-30%) translateY(-5px);
}
/* Responsividade */
@media (max-width: 480px) {
#whatsapp-btn {
width: 50px;
height: 50px;
}
#whatsapp-btn i {
font-size: 24px;
}
#whatsapp-btn::after {
font-size: 12px;
}
}
`;
document.head.appendChild(style);
// Criar botão do WhatsApp
const whatsappBtn = document.createElement("a");
whatsappBtn.href = "https://api.whatsapp.com/send?phone=5500000000000&text=Iniciar%20atendimento.";
whatsappBtn.target = "_blank";
whatsappBtn.id = "whatsapp-btn";
// Ícone do WhatsApp
whatsappBtn.innerHTML = `<i class="fab fa-whatsapp"></i>`;
// Adiciona o botão ao final do <body>
document.body.appendChild(whatsappBtn);
})();
</script>
Passo 2: Personalizando o Botão
1. Alterando o Número de WhatsApp
Para que o botão direcione as mensagens corretamente, substitua o número no código pelo número do WhatsApp vinculado ao ChatFunnel:
href="https://api.whatsapp.com/send?phone=559912345678&text=Iniciar%20atendimento."
Formato correto:
O número deve estar no formato internacional, sem espaços ou símbolos (exemplo:
55para Brasil).
2. Configurando a Mensagem de Acionamento
A mensagem enviada ao clicar no botão deve conter a palavra-chave que ativa um Flow de WhatsApp no ChatFunnel.
Para isso, edite o valor do parâmetro text= com a palavra-chave configurada no seu flow:
href="https://api.whatsapp.com/send?phone=559912345678&text=Quero%20receber%20mais%20informações"
Importante:
A mensagem precisa ser exatamente igual à configurada no seu Flow para acionar corretamente a automação.
Utilize
%20no lugar de espaços para formatar corretamente o link.
Conclusão
Agora seu botão de WhatsApp está ativo e direcionado ao número do ChatFunnel com a mensagem correta para iniciar um Flow de automação. Basta inserir os códigos no seu site, configurar o número e a mensagem de acionamento para garantir que o fluxo desejado seja ativado automaticamente quando o visitante clicar no botão.
Caso tenha dúvidas ou precise de suporte, consulte a documentação do ChatFunnel ou entre em contato com a equipe técnica.
Aprenda a criar um flow aqui :