--- title: "Botão do WhatsApp para o seu site" description: "Gere um botão flutuante do WhatsApp para o seu site: escolha cor, posição, saudação e atraso, veja a prévia ao vivo e copie um código leve. Grátis." canonical: "https://omnichannels.ai/pt/tools/whatsapp-chat-button/" language: "pt" updated: "2026-10-10" publisher: "BroadNet Technologies" brand: "OmniChannels.ai" --- # Botão do WhatsApp para o seu site Canonical: https://omnichannels.ai/pt/tools/whatsapp-chat-button/ Language: pt Publisher: OmniChannels.ai by BroadNet Technologies 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. ## Como adicionar um botão do WhatsApp ao seu site 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. **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. **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. **Cole antes de :** 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 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 , 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.