Como Adicionar um Botão do WhatsApp no Webflow (Grátis — Sem Necessidade de App)
Você constrói no Webflow porque quer controle — interações limpas, design exato, nada anexado que não mereça estar ali. Um botão do WhatsApp deve seguir essa filosofia: sem integração pesada, sem aplicativo de terceiros gerenciando seus clientes, apenas um toque do seu site para um chat real no WhatsApp com o seu número.
Aqui está como adicionar um botão flutuante do WhatsApp em qualquer site do Webflow em cerca de dois minutos — sem aplicativo do Webflow, sem conta, sem taxa mensal.
O jeito rápido: abra nosso gerador gratuito de Gerador de botão do WhatsApp para Webflow, insira seu número, escolha um estilo, copie o código e cole-o em Configurações do site → Código personalizado → Código do rodapé. Essa é toda a configuração.
Por que colocar um botão do WhatsApp no seu site do Webflow
- Chat converte onde formulários hesitam. Um visitante em dúvida — preços, disponibilidade, um pedido personalizado — responde mais rápido no WhatsApp do que em um formulário que ele precisa pensar.
- WhatsApp é onde seus clientes estão. Para bilhões de pessoas, é o aplicativo mais usado no telefone; o botão os encontra lá.
- As respostas chegam no seu telefone. O botão abre o WhatsApp com seu número e uma mensagem pré-preenchida — responda em segundos de qualquer lugar, mesmo em movimento.
- Ele funciona bem com sua pilha. As conversas chegam primeiro diretamente para você; conecte o mesmo número ao The Tech Pad depois para respostas de IA e uma caixa de entrada de equipe compartilhada.
O que você obtém com o gerador gratuito
O Gerador de botão do WhatsApp para Webflow te dá um botão flutuante real:
- 8 estilos apenas para WhatsApp — o logotipo oficial do WhatsApp e marcas de bolha em cores da marca (verde, verde escuro, branco, azul-petróleo)
- Seu número + mensagem pré-preenchida — defina a primeira mensagem que os visitantes veem
- Forma, tamanho e posição — redondo ou quadrado, esquerda ou direita, qualquer tamanho
- Pré-visualização ao vivo — veja o botão exato antes de copiar qualquer coisa
- Sem conta, sem chave de API, sem custo — gratuito para sempre
| Capacidade | Botão gratuito | O upgrade do The Tech Pad |
|---|---|---|
| Os visitantes iniciam um chat do WhatsApp com seu número | ✅ | ✅ |
| Estilos apenas para WhatsApp + pré-visualização ao vivo | ✅ | ✅ |
| IA responde 24/7 na língua do cliente | — | ✅ |
| Uma caixa de entrada de equipe para WhatsApp + chat do site | — | ✅ |
| API oficial do WhatsApp Business (Meta) | — | ✅ |
| Preço | Gratuito para sempre | Gratuito para começar |
Adicione o botão ao Webflow em 3 etapas
- Gere seu código. Abra o gerador gratuito, insira seu número do WhatsApp com o código do país (apenas números, por exemplo,
919876543210), escolha um estilo e clique Copiar código. - Abra o Código personalizado. No designer do Webflow, pressione W (ou clique no W logo no canto superior esquerdo) e abra Código personalizado.
- Cole no código do Rodapé e publique. Cole o código em Código do rodapé caixa — ele carrega em todas as páginas, logo antes da tag body de fechamento — clique em Salvar alterações, depois Publicar.
O código é uma pequena tag de script que carrega de forma assíncrona, portanto não irá deixar seu site mais lento:
<script async src="https://thetechpad.com/chat/widget.js" data-ttp-wa="919876543210" data-ttp-wa-icon="wa-classic" data-ttp-wa-shape="round" data-ttp-wa-size="56" data-ttp-wa-pos="right"></script>Quando estará ativo? O código personalizado é aplicado quando você publica seu site em um plano Webflow (incluindo a camada paga de entrada). No domínio de teste gratuito, ele é renderizado apenas para visualização — publique e seus visitantes verão o botão.
Por que usar código em vez de um aplicativo Webflow?
Aplicativos e integrações do Webflow adicionam poder real, mas um único botão flutuante do WhatsApp não precisa de um: não há instalação de marketplace, nem solicitações de permissão, nem assinatura. A via do código mantém tudo leve:
- Nada para instalar ou aprovar — apenas código personalizado e um clique em Publicar
- Seu número, suas regras — as conversas vão para o número de WhatsApp que você escolher, não para uma caixa de entrada de terceiros
- O mesmo código funciona em outros lugares — também administra um Shopify, Squarespace, Blogger, HubSpot ou Wix site? Cada um tem sua própria página geradora com passos de colagem.
Quer que o botão responda por você?
Um botão é o primeiro passo — o próximo é responder instantaneamente, mesmo quando você está ocupado ou dormindo. The Tech Pad transforma esse mesmo número de WhatsApp em um assistente de IA 24/7:
- IA responde instantaneamente do seu site e das páginas de produto — no idioma do seu cliente
- Uma caixa de entrada compartilhada da equipe para chats do WhatsApp, chat do site e notificações
- A API oficial do WhatsApp Business no seu próprio número verificado pelo Meta
- Grátis para começar, sem cartão de crédito — conecte-se em thetechpad.com
Dois minutos hoje te dão um botão do WhatsApp ativo no Webflow. Adicionar o The Tech Pad mais tarde faz com que ele responda por você.