Ir para o conteúdo
OmniChannels.ai
Menu

Ferramenta gratuita

Botão do WhatsApp para o seu site

Adicione um botão flutuante do WhatsApp a qualquer site em minutos. Defina seu número, a mensagem pronta, a cor, a posição, a saudação e o atraso, acompanhe tudo ao vivo em uma prévia para computador ou celular e copie um trecho de código pequeno e independente, com instruções de instalação para WordPress, Shopify, Wix e HTML puro.

Grátis · sem cadastro · no seu navegador

Número e mensagem

Digite como você discaria localmente, ou comece com + ou 00. Espaços, hífens e parênteses são aceitos.

Aparece na caixa de texto do cliente, que pode editá-la antes de enviar. Árabe, emojis e quebras de linha são codificados automaticamente.

Configurações do botão

Posição

Um ícone branco nesta cor tem contraste de 2.0:1, abaixo dos 3:1 recomendados para ícones. O botão continua com nome acessível, mas um verde mais escuro fica mais legível.

Aparece ao lado do botão; o visitante pode fechá-lo pelo resto da visita. Deixe vazio para não exibir.

Lido por leitores de tela e exibido como dica ao passar o mouse.

Exibir em

Com 0 ele aparece na hora. Um atraso curto evita competir com a chamada principal da página.

Prévia ao vivo

Seu código de incorporação

Digite um número de WhatsApp válido para concluir o código.

<!-- WhatsApp chat button (generated with omnichannels.ai/tools/whatsapp-chat-button/) -->
<div id="ocwa" class="ocwa ocwa-r" hidden>
  <div id="ocwa-tip" class="ocwa-tip" dir="auto"><span>Olá 👋 Como podemos ajudar?</span><button type="button" class="ocwa-x" aria-label="Fechar">&times;</button></div>
  <a class="ocwa-btn" href="https://wa.me/?text=Ol%C3%A1%21%20Tenho%20uma%20d%C3%BAvida%20sobre%20o%20seu%20site." target="_blank" rel="noopener" aria-label="Converse com a gente no WhatsApp" title="Converse com a gente no WhatsApp"><svg viewBox="0 0 24 24" width="30" height="30" aria-hidden="true" focusable="false"><path fill="#ffffff" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg></a>
</div>
<style>
.ocwa{position:fixed;bottom:20px;z-index:2147483000;display:flex;flex-direction:column;align-items:flex-end;gap:10px;font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Tahoma,Arial,sans-serif}
.ocwa[hidden]{display:none}
.ocwa-r{right:20px}.ocwa-l{left:20px;align-items:flex-start}
.ocwa-btn{width:58px;height:58px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.24);transition:transform .2s ease}
.ocwa-btn:hover{transform:scale(1.07)}
.ocwa-btn:focus-visible{outline:3px solid #1a73e8;outline-offset:3px}
.ocwa-tip{position:relative;box-sizing:border-box;max-width:min(260px,calc(100vw - 40px));margin:0;padding-block:10px;padding-inline:14px 36px;background:#fff;color:#111b21;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.18);text-align:start;overflow-wrap:anywhere}
.ocwa-x{position:absolute;top:5px;inset-inline-end:5px;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;color:#54656f;font-size:20px;line-height:26px;cursor:pointer}
.ocwa-x:hover{background:#f0f2f5}.ocwa-x:focus-visible{outline:2px solid #1a73e8}
.ocwa-in{animation:ocwa-in .35s ease-out both}
@keyframes ocwa-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ocwa-in{animation:none}.ocwa-btn{transition:none}.ocwa-btn:hover{transform:none}}
@media (max-width:767px){.ocwa{bottom:16px}.ocwa-r{right:16px}.ocwa-l{left:16px}.ocwa-nomob{display:none!important}}
@media (min-width:768px){.ocwa-nodesk{display:none!important}}
@media print{.ocwa{display:none!important}}
</style>
<script>
(function(){var w=document.getElementById("ocwa");if(!w)return;var t=document.getElementById("ocwa-tip"),k="ocwa-tip-closed";if(t){var c=false;try{c=sessionStorage.getItem(k)==="1"}catch(e){}if(c){t.parentNode.removeChild(t)}else{t.querySelector("button").addEventListener("click",function(){t.parentNode.removeChild(t);try{sessionStorage.setItem(k,"1")}catch(e){}})}}setTimeout(function(){w.hidden=false;w.className+=" ocwa-in"},3000);})();
</script>

Independente: cerca de 3,8 KB, sem scripts, fontes ou imagens externas e sem cookies.

Como instalar

  1. 1Copie o código acima.
  2. 2Instale um plugin de código de cabeçalho e rodapé, como o WPCode, ou abra Aparência → Editor se usar um tema de blocos.
  3. 3Cole o código na seção de rodapé (fim do body) ou em um bloco HTML personalizado na parte de modelo do rodapé.
  4. 4Salve, limpe o cache, se houver plugin de cache, e teste no celular.

As conversas estão se acumulando em um único celular? Responda a elas em uma caixa de entrada compartilhada da equipe

Nada do que você digita é enviado aos nossos servidores.

Resposta curta

Um botão do WhatsApp é um pequeno botão flutuante em um site que, ao ser clicado, abre uma conversa no WhatsApp com a empresa. Ele é um link para https://wa.me/ mais o número da empresa e uma mensagem pronta opcional, estilizado como um ícone em um canto da página. Os visitantes iniciam a conversa no próprio celular ou no WhatsApp Web, sem formulários e sem salvar o número.

Infraestrutura confiávelMeta Business Solution Provider oficialParceiro Google RBMMembro da GSMAISO/IEC 27001:2022ISO/IEC 27018ISO 9001:2015ISO 22301SOC 2 Type IIEm conformidade com o GDPR

Como adicionar um botão do WhatsApp ao seu site

  1. 1

    Digite seu número e a mensagem

    Escolha o país, digite seu número do WhatsApp e escreva a mensagem que os visitantes vão enviar, por exemplo uma dúvida sobre um pedido.

  2. 2

    Personalize o botão

    Escolha o canto, a cor, o balão de saudação, os dispositivos e um atraso. A prévia ao vivo mostra o botão em uma página de exemplo no computador e no celular.

  3. 3

    Copie o código

    Copie o trecho de código. São poucos kilobytes de HTML, CSS e JavaScript, sem requisições externas, cookies ou rastreamento.

  4. 4

    Cole antes de </body>

    Siga os passos para WordPress, Shopify, Wix ou HTML puro, publique e teste o botão em um celular e em um computador.

O que o código gerado faz

O trecho adiciona um link de posição fixa no canto inferior das suas páginas. O link é uma URL padrão de clique para conversar, no formato que o WhatsApp documenta na sua página de ajuda (faq.whatsapp.com/5913398998672934): https://wa.me/ mais o seu número internacional completo e, se você quiser, ?text= com uma mensagem codificada para URL. Ele abre o app do WhatsApp no celular e o WhatsApp Web ou o app para desktop no computador.

Tudo fica embutido: o ícone do WhatsApp é um path SVG, os estilos ficam isolados sob um único prefixo de classe e o script tem poucas linhas, que cuidam do atraso e da saudação que pode ser fechada. Não há scripts, fontes, imagens ou cookies externos, então o botão não deixa sua página lenta nem adiciona um rastreador de terceiros.

Acessível e pronto para RTL desde o início

Botões flutuantes costumam ter só um ícone, o que deixa usuários de leitores de tela tentando adivinhar. O link gerado tem um aria-label que você controla ("Converse com a gente no WhatsApp" por padrão), um contorno de foco visível para quem usa teclado e um ícone decorativo oculto das tecnologias assistivas. A saudação tem um botão de fechar de verdade, com seu próprio rótulo.

Visitantes que configuraram o dispositivo para reduzir movimento veem o botão sem a animação de entrada nem o zoom ao passar o mouse. A saudação usa direção de texto automática e propriedades lógicas de CSS, então árabe e outros textos da direita para a esquerda ficam corretos, e você pode posicionar o botão no canto inferior esquerdo em sites RTL.

  • Link acessível pelo teclado, com um nome acessível claro.
  • Respeita prefers-reduced-motion.
  • Oculto na impressão e opcional por tipo de dispositivo.
  • O fechamento da saudação é lembrado durante a visita, sem cookies.

Como escolher cor, posição e tempo

O canto inferior direito é a convenção em sites da esquerda para a direita, e o canto inferior esquerdo costuma funcionar melhor em sites em árabe, mas confira se o botão não cobre um banner de cookies, o botão de um chatbot ou a barra de checkout no celular. O verde do WhatsApp (#25D366) é reconhecido na hora; com um ícone branco, ele tem contraste de cerca de 2:1, então, se acessibilidade for a prioridade, um verde mais escuro como #128C7E oferece cerca de 4:1.

Um atraso de alguns segundos deixa os visitantes lerem a página antes de o botão aparecer, e mostrá-lo só no celular é uma escolha sensata quando sua equipe responde pelo celular. Mantenha a saudação em uma linha curta e específica, como "Dúvidas sobre a entrega? Fale com a gente."

O botão oficial "Chat on WhatsApp" e as regras de marca

O WhatsApp também publica um botão de marca "Chat on WhatsApp" em verde e branco, em três tamanhos, e pede que as empresas o usem sem alterações. Segundo a central de ajuda do WhatsApp, no momento ele está disponível apenas em inglês. O botão flutuante com ícone desta ferramenta é um padrão diferente e compacto; seja qual for o que você usar, não altere o logo do WhatsApp nem dê a entender que o WhatsApp endossa sua empresa.

Quando um único celular já não é suficiente

Um botão no site pode multiplicar rapidamente as conversas recebidas. No app WhatsApp Business, as conversas ficam em um número limitado de dispositivos conectados. Na WhatsApp Business Platform (API), o mesmo link wa.me pode alimentar uma caixa de entrada compartilhada da equipe, onde as conversas são atribuídas a atendentes, respondidas primeiro por chatbots ou agentes de IA e acompanhadas com modelos aprovados depois que a janela de atendimento ao cliente de 24 horas se fecha.

Planeje quem responde, em quais horários e com que rapidez. Informe seu horário de atendimento na saudação se você não cobre as conversas 24 horas por dia.

Perguntas sobre o botão do WhatsApp para site

Como adiciono um botão do WhatsApp ao meu site?

Gere o código acima com seu número e sua mensagem, copie e cole logo antes da tag de fechamento </body> do seu site, ou na área de código do rodapé do seu criador de sites. Assim ele aparece em todas as páginas.

Este widget de chat do WhatsApp é grátis?

Sim. O gerador e o código são gratuitos, não exigem conta e não têm limites de uso. O botão leva direto ao WhatsApp, então não há assinatura nem script hospedado por trás dele.

Um botão do WhatsApp deixa meu site mais lento?

Não. O trecho tem poucos kilobytes de HTML, CSS e JavaScript embutidos e não faz nenhuma requisição de rede até um visitante clicar, ao contrário de widgets que carregam scripts, fontes e rastreadores externos.

Como adiciono um botão do WhatsApp no WordPress?

Use um plugin de código de cabeçalho e rodapé, como o WPCode, e cole o trecho na seção de rodapé, ou adicione-o a um bloco HTML personalizado no modelo do rodapé se você usa um tema de blocos. Limpe o cache e teste.

Como adiciono um botão do WhatsApp na Shopify?

No admin da Shopify, abra Loja virtual → Temas e clique em Editar código no seu tema publicado. Abra layout/theme.liquid e cole o trecho logo antes de </body>, depois salve e confira sua loja no celular.

Posso mostrar o botão do WhatsApp só no celular?

Sim. Desmarque Computador no gerador e o botão fica oculto em telas com 768 pixels de largura ou mais. Você também pode desmarcar Celular para mostrá-lo só no computador.

Vários atendentes podem responder às conversas do botão do site?

Não bem a partir de um único celular. Conecte o número à WhatsApp Business API e encaminhe as conversas para uma caixa de entrada compartilhada da equipe, onde vários atendentes e chatbots podem responder pelo mesmo número.

Mais ferramentas gratuitas