Free Tool

Build a WhatsApp chat widget for your website

Configure it below and try it out right on this page. The bubble in the corner is the real widget, live.

Configure your widget

Changes update the live preview and the snippet instantly.

Pick your country so the code is right (WhatsApp can't find the chat without it), then enter the rest of the number, digits only.

Raise this if the widget ends up hidden behind another element on your site, like a cookie banner or a different chat tool.

Your embed snippet

Paste this before the closing </body> tag on your website.

Live preview

Look at the bottom corner of this page. That's your widget, rendered from the settings above using the real embed script.

Manage your leads on WhatsApp Web

Download the free Chat Quotient Chrome extension to see and manage every conversation directly inside WhatsApp Web, a full WhatsApp CRM experience.

Add to Chrome, It's Free

O que é um widget de chat WhatsApp?

Um widget de chat WhatsApp é um pequeno botão que fica no canto de um site e, quando clicado, abre uma conversa do WhatsApp com a empresa, seja diretamente para o número WhatsApp da empresa ou através de um formulário curto primeiro. Ele substitui um link estático "Entre em contato" ou um formulário de email por um canal que a maioria dos visitantes já tem aberto no telefone.

É diferente de um simples link "clique para conversar" (apenas texto ou ícone que abre wa.me) porque um widget é configurável: posição, cor e uma saudação pré-preenchida.

Como adicionar um widget de chat WhatsApp ao seu site

  1. 1

    Configure seu widget

    Insira seu número WhatsApp, depois escolha uma cor e um canto para o widget.

  2. 2

    Copie o snippet

    Use o botão "Copiar snippet" acima. É uma única tag <script>, sem outros arquivos ou dependências.

  3. 3

    Cole-o em seu site

    Adicione-o logo antes da tag de fechamento </body> do HTML do seu site.

  4. 4

    Publique

    É isso. O widget se renderiza a partir do snippet, sem etapa de compilação, backend ou conta necessária.

Onde colar, por plataforma

WordPress
Use um plugin como "Insert Headers and Footers" ou "WPCode", ou cole-o diretamente no footer.php do seu tema antes de </body> via Appearance → Theme File Editor.
Shopify
Online Store → Themes → Edit code → theme.liquid, e cole o snippet logo acima de </body>.
Wix
Settings → Custom Code → Add Code, configure-o para carregar em todas as páginas na seção "Body - end".
Webflow
Project Settings → Custom Code → Footer Code, depois publique seu site.
Qualquer outro site
Se conseguir editar o HTML do seu site, cole-o antes de </body>. Funciona igual em todos os lugares.

Por que adicionar um botão WhatsApp ao seu site

Sem formulário, sem email, sem recarga de página

Os visitantes o alcançam em um aplicativo que já têm aberto no telefone, em vez de digitarem em um formulário de contato e esperarem uma resposta.

Encontra os visitantes onde eles já estão

WhatsApp é o aplicativo de mensagens padrão para bilhões de pessoas em todo o mundo. Para a maioria dos visitantes, não há nada de novo para baixar ou se inscrever.

Cada chat começa com contexto

Uma saudação pré-preenchida significa que a conversa não começa do zero. Os visitantes chegam ao WhatsApp com sua mensagem já enquadrada.

Você controla exatamente onde ele fica

Defina a cor, o canto e o deslocamento para que o widget combine com seu site em vez de uma bolha genérica padrão.

Grátis, sem processo de aprovação

Sem aplicação de Business API do WhatsApp, sem número separado, sem código além de uma única tag de script.

Botão de chat versus widget de chat. Qual é a diferença?

Botão de chat

Um link estático ou ícone que abre um chat do WhatsApp quando clicado. Nenhuma configuração além do número de destino.

Widget de chat

  • Cor, posição e saudação pré-preenchida configuráveis
  • Funciona em qualquer lugar: WordPress, Shopify, Wix, Webflow ou HTML simples, sem dependências
  • Isso é exatamente o que você está construindo acima

Perguntas frequentes

Este gerador de widget de chat WhatsApp é gratuito? +

Sim. O widget de redirecionamento que você constrói acima (com seu número, cor, posição e saudação) é gratuito, com um pequeno emblema "Powered by Chat Quotient". Uma versão Pro com powered by agente de IA é planejada para o futuro.

Preciso da WhatsApp Business API para usá-lo? +

Não. O widget abre um chat normal do WhatsApp usando seu número WhatsApp existente. Sem aprovação de Business API ou número separado necessário.

Funcionará em WordPress, Shopify, Wix ou qualquer outro site? +

Sim. É uma única tag <script> sem dependências, portanto funciona em qualquer lugar onde você possa colar HTML: WordPress, Shopify, Wix, Webflow, Squarespace ou um site construído manualmente.

O widget deixa meu site mais lento? +

Não deveria ser perceptível. O script é pequeno, carrega com async e defer para nunca bloquear sua página, e é renderizado dentro de um Shadow DOM isolado para que não entre em conflito com os estilos do seu site.

Posso coletar o nome de um visitante antes de ele ir para o WhatsApp? +

Ainda não. A captura de lead antes da transferência de WhatsApp está no roadmap, e reativaremos o botão aqui assim que estiver pronto.

Onde minha configuração é armazenada? +

Em nenhum lugar em nossos servidores. Suas configurações vivem inteiramente dentro da tag de script que você cola no seu site. Para mudar algo mais tarde, volte a esta página, reconfigure e copie o novo snippet (mantenha uma cópia do seu atual, pois não o armazenamos para você).

Qual é a diferença entre um botão de chat e um widget de chat? +

Um "botão de chat" é geralmente apenas um link estático que abre o WhatsApp. Um "widget de chat" (o que esta ferramenta constrói) é um lançador flutuante com saudação, posição e cor configuráveis.

Posso usar meu número WhatsApp pessoal ou preciso de um número comercial? +

Qualquer número WhatsApp funciona, pessoal ou comercial. Basta inserir com o código do país e sem espaços ou sinal de mais.