Como adicionar um widget de chat do WhatsApp grátis a qualquer site em poucos minutos: a abordagem de link wa.me simples e um gerador que produz um trecho customizável e sem código.
Existem duas formas honestas de adicionar um widget de chat do WhatsApp a um site sem pagar por um: colar um link wa.me simples e estilizá-lo você mesmo, ou usar um gerador que fornece um trecho acabado e customizável. Ambos são genuinamente grátis e ambos levam alguns minutos. Eles apenas o deixam em lugares muito diferentes seis meses depois.
Isto explora ambas as abordagens, começando com o link simples para que você saiba exatamente o que está renunciando quando o ignora.
A versão absolutamente mínima é uma linha de HTML:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question">Chat with us</a>Substitua 15551234567 pelo seu número em formato internacional completo, sem sinal de mais, sem espaços, sem zero à esquerda. O parâmetro text é uma mensagem pré-preenchida, codificada em URL, então %20 é um espaço e %2C é uma vírgula. Clique nele e o WhatsApp abre com essa mensagem já digitada na caixa, esperando que o visitante pressione enviar.
wa.me é o próprio link curto da Meta para isso, então o comportamento no outro lado é consistente: em um telefone, ele abre o aplicativo WhatsApp diretamente se estiver instalado, ou envia o visitante para a loja de aplicativos se não estiver. Em um navegador de desktop sem o aplicativo instalado, ele abre web.whatsapp.com em uma nova aba. Você não precisa construir nenhuma dessa detecção você mesmo, que é a única parte dessa abordagem que é genuinamente resolvida para você.
Tudo o mais não é. Esse link único é apenas texto azul sublinhado em qualquer lugar que você o coloque. Para transformá-lo no botão flutuante no canto inferior que as pessoas realmente significam quando dizem “widget de chat do WhatsApp”, você está escrevendo o CSS você mesmo:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question"
target="_blank" rel="noopener"
style="position:fixed; bottom:20px; right:20px; z-index:5000;
width:56px; height:56px; border-radius:50%;
background:#25D366; display:flex; align-items:center;
justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.25);">
<img src="/whatsapp-icon.svg" alt="Chat on WhatsApp" width="28" height="28">
</a>Isso funciona, mas agora você também precisa de um arquivo de ícone, um z-index alto o suficiente para ficar acima do seu banner de cookie e qualquer modal sem cobrir sua própria navegação em mobile, e um plano para o que acontece quando alguém quer que o texto da mensagem seja alterado no próximo mês, o que significa abrir esse mesmo bloco de markup novamente, em qualquer lugar que esteja colado, em cada página ou modelo que o tenha.
O Gerador de Widget de Chat do WhatsApp faz o mesmo trabalho do link acima, além do estilo, posicionamento e ícone, e devolve uma tag de script em vez de um bloco de CSS customizado pelo qual você é responsável por manter. É grátis, não requer uma conta e não toca na API do WhatsApp Business, portanto não há etapa de verificação antes que você possa usá-lo.
Aqui está o passo a passo real:
#25D366) é o padrão, mas o campo aceita qualquer valor hexadecimal se você quiser que corresponda à cor da marca do seu site.text no link simples, mas editável no formulário em vez de uma string codificada em URL.Conforme você preenche o formulário, uma visualização ao vivo do botão é renderizada à direita na página, e o painel de código ao lado se atualiza em tempo real com o trecho acabado:
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#25D366"
data-position-vertical="bottom"
data-position-horizontal="right"
data-offset-vertical="20"
data-offset-horizontal="20"
data-z-index="5000"
data-greeting="Hi! How can we help?"
async
defer
></script>Clique em Copiar, cole essa tag única em qualquer lugar antes da tag de fechamento </body> em seu site, e o widget está ativo. Nada mais precisa ser enviado, nenhum arquivo de ícone, nenhuma folha de estilo separada. Cada configuração do formulário (cor, posição, deslocamentos, saudação, pop-up) é codificada como um atributo data- nessa tag única, para que a coisa toda viaje como uma cola.
Os dois outputs parecem semelhantes na superfície, um botão no canto que abre o WhatsApp, mas envelhecem de forma diferente.
Com a versão feita à mão, cada configuração é um valor enterrado dentro de estilos embutidos ou um arquivo CSS separado. Alterar a saudação significa encontrar e editar o parâmetro text em uma string codificada em URL. Mover o botão porque um novo banner de cookie agora o sobrepõe significa reeditar o CSS em cada página ou modelo onde você o colou, e se você esqueceu de um, aquela página discretamente tem um widget com aparência quebrada até que alguém perceba. Nada disso falha ruidosamente, só fica fora de sincronização página por página.
O trecho gerado mantém cada uma dessas configurações como um atributo rotulado em uma linha que você pode recopiar do formulário em segundos, depois localizar e substituir em todo o site se você não estiver usando um include de cabeçalho ou rodapé compartilhado. E porque a lógica real do botão vive no arquivo de script hospedado que a tag aponta, não em código que você colou, correções de bugs e melhorias de comportamento para o próprio widget são lançadas sem você tocar no site novamente.
A mecânica é a mesma em qualquer lugar: coloque o trecho em algum lugar que seja renderizado em todas as páginas, idealmente logo antes de </body>.
theme.liquid, logo acima da tag de fechamento </body>, via Loja Online → Temas → Editar Código.Cada um desses tem suas próprias peculiaridades que valem uma análise mais longa por conta própria. Vamos cobrir WordPress em mais detalhes separadamente, mas a etapa de cola em si é idêntica em todas as partes: uma tag de script, um lugar, aplicada a cada página de uma vez.
Carregue o site em uma janela anônima para que estilos em cache não escondam um problema real, e verifique o botão tanto em desktop quanto em um telefone real, não apenas uma janela do navegador redimensionada. Clique nele uma vez em cada um e confirme que ele abre WhatsApp (o aplicativo em mobile, web.whatsapp.com em desktop) com seu número e mensagem de saudação já preenchidos. Então role a página com qualquer banner de cookie ou elementos sticky visíveis. O problema mais comum neste ponto é um conflito de z-index, onde o widget é renderizado atrás de outro elemento de posição fixa em vez de na frente.
Isso é realmente grátis, ou há um truque? O gerador em si é grátis sem necessidade de conta. O script do widget que aponta é hospedado e servido sem custo. Se você depois instalar a extensão Chrome da The Chat Quotient para gerenciar as conversas que chegam através do widget, essa tem seu próprio plano gratuito também, mas é uma etapa separada e opcional, não um requisito para usar o widget.
Um widget do WhatsApp é a mesma coisa que o WhatsApp Web?
Não, e é uma mistura comum. O WhatsApp Web (web.whatsapp.com) é a interface que você usa para ler e enviar mensagens do WhatsApp de um navegador. Um elemento de widget web do WhatsApp é o pequeno botão que você adiciona ao seu próprio site que, quando clicado, abre um chat, seja no aplicativo WhatsApp em mobile ou no WhatsApp Web em um desktop que não tem o aplicativo de desktop instalado. O widget é algo que você incorpora. WhatsApp Web é onde a conversa resultante abre.
O widget funciona se um visitante não tiver o WhatsApp instalado? Em mobile, clicar nele sem o aplicativo instalado envia o visitante para sua loja de aplicativos para instalar o WhatsApp primeiro. Não há como contornar essa etapa, uma vez que o link só sabe como entregar ao próprio WhatsApp, não para substituir outro canal de mensagem.
Posso ter mais de um número do WhatsApp, como vendas e suporte, no mesmo widget? Não em um botão. O widget é construído em torno de um único número do WhatsApp por instância. Se você precisar de dois pontos de entrada, adicionaria dois widgets com posições e saudações diferentes, embora neste ponto uma página de contato dedicada com ambas listadas separadamente geralmente seja mais clara para visitantes do que dois botões flutuantes empilhados no mesmo canto.
Preciso saber codificar para usar o gerador? Não. Cada configuração é um campo de formulário, e a única coisa que você cola é a tag de script única que ele produz, a mesma etapa de cópia e cola independentemente de qual plataforma seu site funciona.
Um link wa.me é genuinamente tudo o que você precisa se você estiver confortável escrevendo e mantendo seu próprio CSS e não se importar em revisitar esse código cada vez que algo precisa mudar. O Gerador de Widget de Chat do WhatsApp produz o mesmo resultado, um botão flutuante que abre um chat pré-preenchido do WhatsApp, sem o CSS, o arquivo de ícone ou a manutenção que vem com fazê-lo manualmente, e ainda é grátis.
Adicione a extensão do Chrome e transforme como você gerencia conversas do WhatsApp para seu negócio.