Botão de WhatsApp para site: código, plugin ou widget

SendSeven Team, Editorial Team

Integrar um botão de WhatsApp no site: código HTML para copiar, a ligação wa.me correta com acentos e cedilhas, caminhos para WordPress, Shopify e Wix, o comportamento no computador, RGPD, medição e o que acontece depois do clique. Com demonstração ao vivo.

Muitos clientes preferem escrever a telefonar, e o WhatsApp já o têm no smartphone. Um botão de WhatsApp no site transforma esse hábito num canal de contacto: um clique e o chat com a sua empresa fica aberto. Montar o botão leva poucos minutos. Este artigo mostra o código para copiar, o caminho no WordPress, Shopify e Wix, e os pontos onde um botão falha na prática: no computador, na proteção de dados, na medição e na caixa de entrada.

O que é um botão de WhatsApp para o site?

Um botão de WhatsApp é um botão ou ligação no seu site que abre diretamente um chat de WhatsApp com o número da sua empresa. Tecnicamente assenta no Click-to-Chat do WhatsApp: uma ligação para wa.me com o seu número e, se quiser, um texto que já está escrito no campo de entrada. No smartphone, a ligação abre a app do WhatsApp; no computador, o WhatsApp Web ou a app de ambiente de trabalho.

O visitante não precisa de escrever nem de guardar o seu número. Vê o texto preenchido, completa-o ou envia-o tal como está, e a sua empresa recebe na caixa de entrada um pedido com o número de telefone do visitante. Que o botão seja verde, na cor da sua marca ou uma bolha redonda no canto do ecrã é apenas design. A ligação por baixo é sempre a mesma.

Demonstração ao vivo

Experimente: estes botões abrem um chat verdadeiro

Cada botão aqui é uma ligação wa.me totalmente normal para o nosso suporte. No smartphone abre-se a app do WhatsApp; no computador, o WhatsApp Web ou a app de ambiente de trabalho.

1. Clássico, em verde WhatsApp

Perguntar no WhatsApp

Chama a atenção de imediato: toda a gente conhece esta cor.

2. Na cor da sua marca

Iniciar chat no WhatsApp

O botão assume a sua cor e o logótipo do WhatsApp mantém-se inalterado.

3. Flutuante, em baixo à direita

www.o-seu-site.pt

Dúvidas? Escreva-nos

Fica visível ao deslocar a página, em todas as páginas.

4. Código QR para o computador

Está no computador? Leia o código com a câmara do seu smartphone e o chat abre-se diretamente na sua app do WhatsApp.

Todas as variantes preenchem a mesma mensagem: Olá SendSeven, tenho mais algumas perguntas sobre botões de WhatsApp para o meu site. Só é enviada quando tocar em Enviar. Só então vemos o seu número, e a nossa equipa de suporte responde-lhe no chat.

Como se constrói corretamente a ligação wa.me?

A ligação é composta por https://wa.me/, o seu número internacional completo sem o sinal de mais, sem zero inicial e sem espaços nem carateres especiais, e, opcionalmente, por ?text= com a mensagem codificada como URL. É assim que o WhatsApp o descreve na ajuda oficial sobre o Click-to-Chat.

De +49 (0) 821 7898-8853 resulta assim 4982178988853: indicativo do país 49, e desaparecem o zero inicial do indicativo local, os parênteses, os hífenes e os espaços. A ligação final é https://wa.me/4982178988853.

A mensagem preenchida tem de estar codificada como URL. As letras, os algarismos, o hífen, o ponto, o sublinhado e o til mantêm-se e tudo o resto passa a um código com percentagem. Os acentos e o cê cedilhado falham com facilidade, porque em UTF-8 ocupam dois bytes:

Um exemplo da nossa demonstração ao vivo: «botões» passa a bot%C3%B5es. A ligação completa para o nosso suporte tem este aspeto:

https://wa.me/4982178988853?text=Ol%C3%A1%20SendSeven%2C%20tenho%20mais%20algumas%20perguntas%20sobre%20bot%C3%B5es%20de%20WhatsApp%20para%20o%20meu%20site.

Os erros mais comuns são um sinal de mais ou um zero logo a seguir ao indicativo do país (wa.me/+49… ou wa.me/490170…), os espaços por codificar e um carácter & ou um cardinal (#) no texto, que cortam o resto da mensagem. Se faltar o número por completo, o WhatsApp só abre a seleção de contactos. Se preferir não codificar nada à mão, o nosso gerador de ligações de WhatsApp gratuito cria a ligação juntamente com o código QR.

Que opções existem para integrar um botão de WhatsApp?

Há três caminhos: a ligação wa.me como código HTML próprio, um plugin pronto para o seu sistema de site ou um widget de chat que liga o WhatsApp a outros canais e a uma caixa de entrada. O código é o mais leve, o plugin dispensa conhecimentos de programação e o widget compensa assim que responde mais do que uma pessoa.

Para um único botão na página de contacto basta o código HTML. Um plugin compensa se quiser mostrar o botão em todas as páginas sem conhecimentos de programação. Um widget é o caminho certo quando os pedidos de vários canais devem chegar a uma só equipa.

Como é o código HTML de um botão de WhatsApp?

O botão de WhatsApp mais simples é uma ligação HTML normal para wa.me com target="_blank", para que a sua página fique aberta no navegador. No exemplo aparece o número do nosso suporte. Substitua-o pelo seu e adapte o texto:

<a href="https://wa.me/4982178988853?text=Ol%C3%A1%2C%20tenho%20uma%20pergunta%20sobre%20a%20vossa%20oferta."
   target="_blank" rel="noopener">
  Perguntar no WhatsApp
</a>

Para um botão flutuante que fique em baixo à direita em todas as páginas, é preciso um pouco de CSS. O código entra uma única vez antes da etiqueta de fecho </body> do seu modelo:

<a href="https://wa.me/4982178988853?text=Ol%C3%A1%2C%20tenho%20uma%20pergunta."
   class="wa-float" target="_blank" rel="noopener"
   aria-label="Iniciar chat no WhatsApp">
  <img src="/imagens/whatsapp-icon.svg" alt="" width="28" height="28">
</a>

<style>
  .wa-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  }
</style>

Três detalhes contam. O aria-label: um botão que só mostra um logótipo precisa de um nome para os leitores de ecrã. O tamanho: 56 píxeis são fáceis de acertar no smartphone e, abaixo de 44 píxeis, fica apertado. É também o tamanho mínimo que a Apple e as WCAG recomendam para elementos de toque. O ícone: descarregue o logótipo do WhatsApp dos recursos de marca oficiais do WhatsApp, não o altere, nem sequer a cor, e coloque o ficheiro no seu próprio servidor. Um ícone servido a partir de um servidor externo transmite o endereço IP dos seus visitantes a cada visita à página.

Como integro o botão de WhatsApp no WordPress, Shopify ou Wix?

Em todos os sistemas habituais vale o mesmo princípio: um botão avulso entra como bloco HTML na página e um botão flutuante entra uma única vez no rodapé, antes de </body>. Só os nomes dos menus mudam.

WordPress

• Botão numa página: no editor de blocos, insira o bloco «HTML personalizado» e copie para lá o código da ligação.
• Botão flutuante em todas as páginas: o mais seguro é um plugin para código de cabeçalho e rodapé, como o WPCode. Aí cola o código na zona do rodapé. Quem edita diretamente o footer.php num tema clássico deve usar um tema filho, caso contrário o código desaparece com a próxima atualização do tema. Os temas de blocos não têm footer.php, e aí o WPCode é o caminho mais simples.
• Plugins de WhatsApp prontos: no diretório de plugins há muitos. Antes de instalar, verifique se o plugin carrega ficheiros de servidores externos, quando foi atualizado pela última vez e se funciona bem com o seu banner de cookies.

Shopify

• Botão flutuante em toda a loja: em Loja online > Temas, clique no menu de três pontos do tema atual e depois em «Editar código». Abra o ficheiro layout/theme.liquid e cole o código mesmo antes de </body>. Duplique antes o tema através do mesmo menu.
• Botão numa página ou na página de produto: nos temas Online Store 2.0, como o Dawn, adicione no editor de temas uma secção «Liquid personalizado» e cole lá dentro o código da ligação.

Wix e Webflow

• Wix: para um botão numa página, use no editor o elemento para incorporar código HTML. O Wix mostra o código incorporado numa moldura própria. Por isso, um botão flutuante sobre todo o site deve ir para «Settings > Development & integrations > Custom code». Só pode usar essa área com um site publicado, um domínio ligado e, por isso, um plano Premium.
• Webflow: para todo o site, coloque o código nas definições do site, em «Custom code», no campo «Footer code»; isto exige um plano de site pago. Para um botão avulso, use o elemento «Code Embed».

Integrar um widget de chat com WhatsApp

Um widget como o da SendSeven integra-se da mesma forma: cola uma única vez um fragmento de script antes de </body>. No WordPress, faz-se pelo rodapé ou com o WPCode; no Shopify, através do theme.liquid; no Wix e no Webflow, pela área de código personalizado, como descrito acima. Todas as definições em detalhe estão descritas no nosso guia do widget para sites.

O que acontece quando alguém clica no botão no computador?

No computador, uma ligação wa.me abre primeiro uma página do WhatsApp, a partir da qual se passa para a app de ambiente de trabalho ou para o WhatsApp Web. Se o visitante não tiver sessão iniciada aí, tem primeiro de emparelhar o smartphone, e é precisamente neste ponto que muitos desistem.

No smartphone o caminho é curto: clique, a app abre-se e a mensagem está pronta. No computador, tudo depende de o WhatsApp já estar configurado aí. No B2B, onde muitos visitantes pesquisam no posto de trabalho, muitas vezes não está.

A solução é um código QR: o visitante lê-o com o smartphone e vai parar diretamente ao chat na sua app. Na demonstração ao vivo acima vê isso no computador como quarta variante. Com HTML puro, monta-se com uma regra CSS que mostra o código QR apenas em ecrãs grandes. O widget da SendSeven trata da passagem por si: se alguém clicar no WhatsApp no computador, o widget mostra um código QR e oferece o WhatsApp Web como segundo caminho. No smartphone, a app abre-se diretamente. A função está ativada nos widgets novos; os widgets existentes mantêm o comportamento anterior. Vale também para Telegram, Messenger, Instagram e SMS. Onde usar códigos QR fora do site, mostra-o o nosso artigo sobre seis locais para o código QR do WhatsApp.

Um botão de WhatsApp no site cumpre o RGPD?

Sim, uma ligação wa.me alojada por si pode ser integrada em conformidade com o RGPD: não transmite dados ao WhatsApp quando a sua página carrega, só o clique do visitante leva até lá. Deve olhar com mais atenção para os plugins e widgets que carregam scripts, tipos de letra ou ícones de servidores externos e para a questão de onde o chat é tratado depois.

• Antes do clique: um botão alojado por si, com ícone próprio, não carrega nada de terceiros. Os plugins que vão buscar ficheiros a servidores externos transmitem com isso o endereço IP, pelo que devem entrar na sua análise e, se for caso disso, no banner de cookies.
• Política de privacidade: costuma incluir uma menção ao WhatsApp como canal de contacto e aos dados que recebe no chat. O melhor é esclarecer a formulação exata com o seu encarregado da proteção de dados.
• Depois do clique: se o chat funcionar com a app WhatsApp Business num telemóvel de serviço, a app pode aceder à lista de contactos se lhe der essa permissão, e com isso também a números de contactos que nunca deram o seu consentimento. Com a WhatsApp Business Platform e um fornecedor com acordo de subcontratação (DPA), a lista de contactos fica de fora e a sua equipa trabalha numa única interface com funções e permissões.

Esta secção não substitui aconselhamento jurídico. Os pormenores sobre consentimento, prazos de conservação e escolha do fornecedor encontra-os no guia sobre WhatsApp Business e RGPD.

Como meço os cliques no botão de WhatsApp?

Os cliques no botão medem-se no Google Analytics 4 da forma mais simples com o Google Tag Manager: um acionador reage às ligações cujo endereço contém wa.me e envia um evento próprio. Na UE, esta medição exige em regra o consentimento no banner de cookies, pelo que a etiqueta só dispara depois de aceite.

1. Ative no Tag Manager as variáveis de clique integradas, entre elas Click URL.
2. Crie um acionador do tipo «Clique - Apenas ligações» que dispare quando Click URL contiver wa.me.
3. Ligue-o a uma etiqueta de evento do GA4, por exemplo com o nome whatsapp_click, e passe a página como parâmetro.
4. Associe a etiqueta ao consentimento do seu banner de cookies, para que não dispare sem aceitação.

No Wix, o Tag Manager integra-se através das integrações de marketing, não com código personalizado. O que acontece depois no chat, o Google Analytics não vê. O WhatsApp não transmite nem parâmetros UTM nem a página de origem. Um truque simples traz clareza: dê a cada botão a sua própria mensagem preenchida, por exemplo «Tenho uma pergunta sobre os preços» na página de preços. Assim vê no chat de onde vem o pedido. No widget da SendSeven, as estatísticas do widget mostram ainda os cliques por canal, por exemplo quantas vezes os visitantes escolheram o WhatsApp, juntamente com as visualizações e as interações. Como acompanhar as conversas de WhatsApp até à venda quando entram os anúncios, mostra-o o guia sobre anúncios Click-to-WhatsApp e wa.me.

O que acontece na sua empresa depois do clique?

Depois do clique, a mensagem chega ao número que está por trás do botão. Com a app WhatsApp Business, é um smartphone. Assim que vários colegas respondem ou chegam muitos chats, compensa uma caixa de entrada de equipa onde a sua equipa trabalhe em conjunto. É aqui que se decide se o botão traz clientes ou apenas mensagens que ninguém lê a tempo.

Uma caixa de entrada para a sua equipa

Na caixa de entrada de equipa da SendSeven, os chats de WhatsApp aparecem ao lado do e-mail, SMS, Instagram, Messenger, Live Chat e Telegram. A sua equipa atribui chats, vê quem está a responder naquele momento e escreve notas internas que o cliente não vê. Como isso é no dia a dia, descreve-o o nosso artigo sobre WhatsApp Business com vários utilizadores.

Respostas ao fim do dia e ao fim de semana

Uma parte dos pedidos através do botão chega depois do horário de trabalho. Um agente de IA responde de imediato, a partir da sua base de conhecimento, às perguntas recorrentes sobre horários, entregas ou preços, e passa tudo o resto à sua equipa. Na manhã seguinte, a passagem com todo o histórico está na caixa de entrada.

Um widget para o WhatsApp e outros canais

Nem todos os visitantes querem usar o WhatsApp. No widget da SendSeven define que canais aparecem: só o WhatsApp ou o WhatsApp ao lado de Live Chat, e-mail, Telegram e outros canais. Se desativar o Live Chat, um widget novo mostra os canais como uma lista com logótipos. Com o acesso rápido, que existe para os widgets de bolha, a bolha redonda abre os canais em leque ao clicar. O WhatsApp fica então a dois cliques. Para a bolha há 15 ícones à escolha, entre eles o logótipo do WhatsApp.

Se só precisar de botões avulsos, por exemplo para um artigo do blogue, uma landing page ou a assinatura de e-mail, encontra na área Widgets, em «Promoção», ligações e códigos QR prontos em PNG ou SVG, bem como fragmentos HTML para botões de canal, distintivos e assinaturas de e-mail. A mensagem preenchida define-a aí por si. Assim monta um botão de WhatsApp com um fragmento, sem codificar a ligação por si. Mais sobre o canal na nossa página de WhatsApp para empresas.

Quanto custa um botão de WhatsApp?

O botão em si não custa nada: uma ligação wa.me é gratuita, quer use a app WhatsApp Business quer a API. Os custos surgem apenas pelas respostas através da WhatsApp Business Platform e pelo software com que a sua equipa trabalha.

• As mensagens recebidas são sempre gratuitas.
• Se o cliente escrever primeiro, abre-se uma janela de 24 horas para as suas respostas.
• Desde 1 de outubro de 2026, a Meta cobra também as mensagens de serviço, ou seja, as suas respostas dentro da janela de 24 horas. As primeiras 1000 por número de telefone e por mês continuam gratuitas; a partir da 1001.ª aplica-se a tarifa de utilidade, na Alemanha 0,0456 € por mensagem entregue. Os pormenores estão na nossa visão geral dos preços do WhatsApp 2026 e na tabela de preços da Meta.
• Com a app WhatsApp Business não há custos por mensagem. Em contrapartida, só responde quem atende o smartphone e os dispositivos associados a ele.

Na SendSeven, os widgets para sites estão incluídos a partir do plano Basic, por 49 € por mês, e os agentes de IA e o Flow Builder, a partir do Professional, por 79 € por mês. A utilização de IA é faturada em créditos de IA. Todos os preços são líquidos, acrescidos de IVA, e o resumo está na página de preços. Pode experimentar a SendSeven gratuitamente durante 14 dias, com 100 mensagens de teste e sem cartão de crédito.

Ainda tem uma pergunta sobre o seu botão? Use a demonstração ao vivo acima e ela chega diretamente ao nosso suporte.

Perguntas frequentes