HTML do widget do WhatsApp para copiar e colar, do link wa.me simples até um botão flutuante completo, além do que o código puro sozinho deixa para você construir.
Se você procurou pelo HTML de verdade, aqui está, sem necessidade de cadastro:
<a href="https://wa.me/15551234567">Chat with us on WhatsApp</a>Substitua 15551234567 pelo seu número em formato internacional completo: código do país primeiro, sem sinal de mais, sem espaços, sem zero à esquerda. Esse link sozinho já é suficiente para abrir um chat do WhatsApp com sua empresa. Também é a resposta honesta completa para “me dê o código HTML do widget”, porque tudo depois deste ponto é você (ou um gerador) construindo as partes que essa única linha não cobre.
Um visitante chega ao link sem nada digitado. Adicione o parâmetro text para ter uma mensagem esperando na caixa quando o chat abrir:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing">
Chat with us on WhatsApp
</a>A mensagem precisa ser codificada em URL: %20 é um espaço, %2C é uma vírgula, %27 é um apóstrofo. Escreva primeiro a frase que você quer, depois passe-a por qualquer codificador de URL antes de colá-la no valor de text, já que um espaço ou sinal de pontuação puro no meio da string de consulta quebra o link em alguns navegadores.
Um link de texto não é o que a maioria das pessoas quer dizer com “widget do WhatsApp”. O botão de canto é CSS em cima do mesmo link:
<a
href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing"
target="_blank"
rel="noopener"
aria-label="Chat on WhatsApp"
style="
position: fixed;
bottom: 24px;
right: 24px;
z-index: 999;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25D366;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,.2);
"
>
<svg width="30" height="30" viewBox="0 0 24 24" fill="white" aria-hidden="true">
<path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.87 9.87 0 0 0 4.74 1.21h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Z"/>
</svg>
</a>Essa versão dispensa um arquivo de ícone separado ao incorporar o glifo de telefone/chat como SVG, então é genuinamente um bloco autocontido: cole-o antes de </body> e não há mais nada para enviar. Ainda assim, ela deixa quatro coisas para você resolver manualmente, e é aí que o gerador de verdade se justifica.
Mobile e desktop não se comportam da mesma forma, e nada neste trecho controla isso. Clicar em um link wa.me em um telefone com WhatsApp instalado abre o aplicativo diretamente. Sem o aplicativo instalado, o visitante é enviado para a loja de aplicativos, e não há mensagem alternativa ou outro método de contato que você possa configurar a partir do próprio link. Em um navegador de desktop, ele abre web.whatsapp.com em uma nova aba, o que só funciona se o visitante já estiver conectado ao WhatsApp Web naquele navegador, caso contrário ele fica olhando para um código QR sem nenhum contexto do motivo. Os três resultados vêm do mesmo href. Você não consegue detectar qual deles está prestes a acontecer nem interceptá-lo com HTML puro.
A mensagem pré-preenchida vive na URL, não em um campo de formulário. Mudá-la significa voltar a codificar manualmente uma nova string, encontrar cada página onde o link está colado e substituí-lo lá também, se você não tiver um modelo compartilhado.
Não há arquivo de ícone para trocar sem editar o caminho SVG manualmente, e nenhuma forma de reposicionar, redimensionar ou recolorir o botão sem mexer diretamente no bloco de estilo embutido, linha por linha.
Nada aqui captura um lead antes de o chat abrir. O link (ou o botão) vai direto para o WhatsApp no momento em que é clicado. Se você quiser um nome e um motivo de contato antes de a conversa começar, isso é um formulário separado que você teria que construir, conectar e de alguma forma passar para o parâmetro text você mesmo.
O Gerador de Widget de Chat do WhatsApp é uma ferramenta gratuita que transforma o mesmo punhado de configurações em uma única tag de script, em vez de um bloco de CSS que você mantém. Defina seu número, escolha uma cor, ajuste a posição e os deslocamentos, escreva uma saudação e, opcionalmente, ative um formulário pré-chat (uma pergunta curta, com e-mail ou telefone marcados como obrigatórios ou não) que coleta contexto antes mesmo de a janela do WhatsApp abrir. A ferramenta produz isto:
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#128C7E"
data-position-vertical="bottom"
data-position-horizontal="left"
data-offset-vertical="24"
data-offset-horizontal="24"
data-z-index="999"
data-greeting="Hi! Ask us anything."
data-prechat="true"
data-prechat-title="Before we chat"
data-prechat-description="Tell us what you need help with."
async
defer
></script>Cada configuração é um atributo data- rotulado em uma linha, então mudar a saudação ou mover o botão para o outro canto significa recopiar a tag do formulário, não vasculhar um arquivo CSS. O ícone, a lógica de posicionamento, o tratamento de deep-link para mobile versus desktop e o formulário pré-chat vivem todos no script hospedado para o qual a tag aponta, que é o que o HTML puro acima não consegue fazer sozinho sem que você o escreva.
Se você está colando um trecho gerado e quer saber o que cada linha controla antes de alterá-la manualmente, aqui está o que a tag aceita:
| Atributo | Controla |
|---|---|
data-widget-id | ID único emitido pelo gerador, não edite isso |
data-whatsapp-number | Número de destino, formato internacional, sem + |
data-color | Fundo do botão, qualquer valor hexadecimal |
data-position-vertical | top ou bottom |
data-position-horizontal | left ou right |
data-offset-vertical / data-offset-horizontal | Distância em pixels a partir dessa borda |
data-z-index | Ordem de empilhamento, aumente se outro elemento fixo cobrir o botão |
data-greeting | Texto da mensagem pré-preenchida, sem necessidade de codificação de URL manual |
data-prechat | true para mostrar um formulário curto antes de o chat abrir |
data-prechat-title / data-prechat-description / data-prechat-question | Texto mostrado no formulário pré-chat |
Tanto o HTML puro quanto a tag de script gerada vão no mesmo lugar: algo que renderize em todas as páginas, idealmente logo antes de </body>.
theme.liquid, logo acima de </body>, via Loja Online → Temas → Editar Código.O link em HTML puro exige uma conta do WhatsApp Business?
Não. Um número pessoal do WhatsApp funciona com um link wa.me da mesma forma que um número Business. Recursos específicos do Business, como um catálogo ou respostas automáticas, não fazem parte do link em si.
Por que meu botão mostra uma imagem quebrada em vez de um ícone?
Isso acontece quando o HTML referencia um arquivo de ícone externo (<img src="/whatsapp-icon.svg">) que não foi enviado para esse caminho. A versão com SVG embutido acima evita isso completamente, já que o ícone é escrito diretamente no HTML.
Posso colocar o HTML do widget dentro de uma tag <head> em vez disso?
Tecnicamente, a própria tag de âncora precisa renderizar dentro do <body>, já que o conteúdo do <head> não é exibido. Scripts podem carregar a partir do <head>, mas colocar o trecho logo antes de </body> evita bloqueio de renderização e é o padrão que a maioria dos construtores de sites espera.
Existe um limite de quantos widgets do WhatsApp posso adicionar a uma página? Nada te impede de colar dois, mas dois botões flutuantes empilhados no mesmo canto geralmente parece um bug em vez de um recurso. Se você precisar de dois números (vendas e suporte, por exemplo), dê a cada um uma posição distinta em vez de sobrepô-los.
Isso funciona da mesma forma no Squarespace? O painel de Injeção de Código do Squarespace (em Configurações → Avançado) aceita qualquer uma das versões da mesma forma que o bloco HTML customizado do WordPress, a injeção no rodapé a aplica em todo o site em um único lugar.
O HTML literal de um widget do WhatsApp é uma única tag <a href="https://wa.me/...">, e agora você a tem. Transformar isso no botão flutuante, personalizado e capturador de leads que as pessoas geralmente imaginam significa escrever e manter você mesmo o CSS e os casos extremos de deep-link, ou deixar que o Gerador de Widget de Chat do WhatsApp produza a tag de script pronta em uma única colagem, grátis, sem necessidade de conta.
Adicione a extensão do Chrome e transforme como você gerencia conversas do WhatsApp para seu negócio.