Você sabia? Mais de 175 milhões de pessoas enviam mensagens para uma conta do WhatsApp Business todos os dias, segundo a Meta.
Você tem uma página de Contato que ninguém acessa e um formulário que não recebe visitas. Enquanto isso, o WhatsApp já está nos telefones dos seus clientes — familiar, confiável e verificado o tempo todo. Integrar o WhatsApp a um site significa encontrar as pessoas onde elas já se comunicam, em vez de encaminhá-las para um portal de suporte. Adicionar um botão de chat do WhatsApp ao seu site permite que entrem em contato da forma como mandariam uma mensagem para um amigo.
Um simples “fale conosco” funciona para mensagens rápidas, mas não permite controle sobre aparência, mensagens de boas-vindas ou timing. Um widget dedicado Widget de Chat do WhatsApp permite incorporar o chat do WhatsApp em um site sem código — respostas pré-preenchidas, agendamento de exibição, gatilhos e branding incluídos. Você também pode fazer isso com um link wa.me manual ou com a API do WhatsApp Business. Este guia cobre os três métodos.
- Três métodos comparados: widget, link wa.me e WhatsApp Business API
- Modelos de mensagens pré-preenchidos para seis tipos de negócio
- Como configurar o agendamento de exibição, gatilhos e comportamento offline
- Quando o WhatsApp é a ferramenta certa (e quando optar por outra)
Início rápido: Adicione o Chat do WhatsApp ao seu site
Se você quiser pular a teoria e ter um botão de chat do WhatsApp funcionando no seu site agora mesmo, aqui está o método mais rápido:
- WhatsApp Chat editor and choose a template.”>Abra o Editor de Chat do WhatsApp e escolha um modelo.
- Digite seu número de WhatsApp e defina uma mensagem de boas-vindas.
- Clique em “Adicionar ao Site” para obter o código de incorporação.
- Cole o código no back-end do seu site e publique.
Crie seu próprio widget de chat do WhatsApp no editor ao vivo abaixo ↓
Como Integrar o WhatsApp: Suas Opções
Existem mais de uma forma de incorporar o chat do WhatsApp em um site, e a opção certa depende de quanto controle você precisa. Veja como os três métodos principais se comparam.
| Método | Dificuldade | Customização | Horário de Funcionamento | Mensagens pré-preenchidas | Preço |
|---|---|---|---|---|---|
| Widget de Chat do WhatsApp da Elfsight | Sem código | Alta (posicionamento, cores, mensagem de boas-vindas, perfil do agente, gatilhos, agendamento) | Sim (mostrar/ocultar por agenda) | Sim (configurável nas configurações) | Plano gratuito, a partir de US$5/mês |
| link wa.me / Botão do WhatsApp | Baixo (link HTML) | Mínimo (somente texto/ícone do link) | Não | Sim (via parâmetro de URL) | Gratuito |
| API do WhatsApp Business | Alto (desenvolvedor) | Total (você monta tudo) | Sim (se codificado) | Sim (mensagens modelo) | Meta cobra por conversa |
O link wa.me funciona para um simples link de “mensagem para nós” em uma página de contato – sem ferramentas ou configuração necessárias. Um widget é melhor se você quiser um botão flutuante com a sua marca, mensagens de boas-vindas, gatilhos e agendamento sem codificação. A API foi criada para operações de alto volume que exigem automação, integração com CRM e roteamento entre múltiplos agentes, com desenvolvedores para mantê-la.
Prefere assistir? Aqui está a configuração completa em menos de 3 minutos:
WhatsApp vs. Chatbot vs. Live Chat vs. Formulário: Qual se encaixa melhor?
Antes de mergulhar na configuração, vale dedicar um minuto para avaliar se o WhatsApp é realmente o método de contato certo para o seu negócio. Cada opção estabelece expectativas diferentes com seus visitantes — escolher a errada pode sobrecarregar você ou frustrar seus clientes.
| Forma de Contato | Ideal para | Expectativa de resposta | Disponibilidade | Custo de operação |
|---|---|---|---|---|
| Chat do WhatsApp | Negócios locais, prestadores de serviços e comércio eletrônico com toque pessoal | Assíncrono — o cliente espera resposta em horas, não em segundos | Seu Horário de Funcionamento (ou disponível a qualquer hora) | Gratuito (apenas o seu tempo) |
| Chatbot de IA | Qualquer negócio que queira respostas instantâneas 24/7 | Instantâneo — o cliente espera uma resposta imediata | 24/7, automatizado | Custo do Widget + Configuração |
| Chat ao vivo | SaaS, equipes de suporte com agentes dedicados. Cobertura para múltiplos mensageiros | Quase instantâneo — o cliente espera atendimento humano em minutos | Horário de Funcionamento | Salário do agente + custo da ferramenta |
| Formulário de Contato | Solicitações formais, pedidos de orçamento, candidaturas | Lento — o cliente espera resposta em até 1–2 dias úteis | Sempre disponível, assíncrono | Gratuito |
Seus clientes preferem enviar mensagens em vez de preencher um formulário — restaurantes, salões, lojas locais, freelancers, agências — o WhatsApp costuma ser a melhor opção. chatbots de IA funcionam melhor para cobertura 24/7, enquanto o chat ao vivo ou formulários são mais eficazes para fluxos de suporte complexos. A maioria das empresas se beneficia de combinar os dois: WhatsApp para conversas rápidas durante o horário comercial, e um chatbot ou formulário para atendimento fora do horário.
Use uma conta do WhatsApp Business, não o seu número pessoal
Um número pessoal do WhatsApp funciona tecnicamente, mas os visitantes veem um número de telefone sem contexto comercial. O WhatsApp Business é gratuito e oferece um perfil verificado (nome da empresa, endereço, horários), além de catálogos, respostas rápidas, etiquetas e mensagens de ausência — tudo isso não existe em uma conta pessoal.
Se você já usa um número pessoal para negócios, você pode converter para uma conta do WhatsApp Business sem perder o histórico de chat. Observação importante — não é possível usar o mesmo número no WhatsApp e no WhatsApp Business ao mesmo tempo. Escolha um deles.
Passo a passo: Configurando o seu Chat do WhatsApp
Agora que você sabe qual método funciona para você e já tem sua conta do WhatsApp Business pronta, veja como configurar o widget do começo ao fim. Cada passo explica não apenas o que clicar, mas por que os padrões podem não atender ao seu negócio.
Passo 1: Escolha um modelo
O que fazer primeiro Você precisa começar abrindo o editor de widgets e escolhendo um preset inicial. Para a maioria dos negócios, o Geral modelo é o ponto de partida mais seguro — é o visual clássico do WhatsApp com uma bolha de chat flutuante.
Se quiser que os visitantes digitem uma mensagem diretamente na janela de chat (em vez de apenas clicar no botão “Iniciar Conversa”), escolha Campo de Mensagem em vez disso. Os modelos de caso de uso, como Agendamento ou Consulta, vêm com textos e ícones pré-configurados que você pode personalizar.
Passo 2: Informe seu número de telefone e as informações do agente
Na aba Conectar, insira o número de telefone do WhatsApp com o código do país (ex.: +14155551234). Não comece com 0 ou 00 — use o formato com o +. Se você tiver uma conta WhatsApp Business, também pode colar o link curto do Business no lugar do número de telefone.
Em seguida, vá para a aba Conteúdo para configurar o cabeçalho da janela de chat: foto de perfil, nome e legenda. É isso que os visitantes veem antes de clicar — define o tom de toda a interação.
Use um nome real e uma foto, não “Equipe de Suporte” com um ícone genérico. As pessoas tendem a responder a uma pessoa, não a um departamento ou a um agente sem identidade. Se for um operador solo, use seu próprio nome. Se for uma equipe, escolha a pessoa que realmente responde às mensagens.
Você também pode configurar:
- Foto de perfil — escolha na biblioteca, faça upload de uma foto personalizada ou use o logotipo padrão
- Nome — exibido como o nome do agente no cabeçalho do chat
- Legenda — adicione texto personalizado ou escolha entre opções pré-definidas como “Online” ou “Respostas em até 1 hora”.
Etapa 3: Escreva sua mensagem de boas-vindas e respostas pré-preenchidas
mensagem de boas-vindas é a saudação que os visitantes veem quando a janela de chat se abre. O padrão é genérico — personalize-a para o seu negócio. Uma boa mensagem de boas-vindas diz aos visitantes o que eles podem perguntar e define as expectativas de tempo de resposta.
A mensagem pré-preenchida é diferente: é o texto que preenche automaticamente o WhatsApp do visitante quando clica em Iniciar Conversa. Pode ser usado para orientar o cliente sobre o que incluir na pergunta. A mensagem pré-preenchida também suporta o placeholder [page_url], que inclui automaticamente a URL da página que o visitante estava visualizando quando iniciou a conversa, para você saber qual página de produto disparou a conversa.
Exemplos
| Tipo de negócio | Mensagem de boas-vindas (o que o visitante vê) | Resposta pré-preenchida (o que é preenchido automaticamente no WhatsApp) |
|---|---|---|
| Restaurante | Oi! Quer fazer uma reserva ou conferir o menu de hoje? | Oi, gostaria de reservar uma mesa para [number] em [date] |
| Comércio eletrônico | Ei! Pergunte sobre pedidos, tamanhos ou devoluções. | Olá, tenho uma dúvida sobre o pedido nº |
| Imóveis | Olá! Procurando detalhes de imóveis ou quer agendar uma visita? | Olá, estou interessado na propriedade em [address] |
| Negócio de serviços (salão, encanador, etc.) | Olá! Precisa de um orçamento ou quer agendar uma consulta? | Oi, gostaria de receber um orçamento para [service] |
| SaaS / agência | Tem dúvidas sobre planos ou recursos? Estamos aqui. | Oi, preciso de ajuda com [feature/billing/setup] |
| Freelancer / consultor | Oi! Quer conversar sobre um projeto? Envie-me uma mensagem. | Oi, gostaria de conversar sobre um projeto relacionado a [tópico] |
Importante: se você conectou via link curto do WhatsApp Business (em vez de um número de telefone), a mensagem pré-preenchida precisa ser configurada no aplicativo WhatsApp Business, não nas configurações do widget.
Etapa 4: Configurar o agendamento de exibição
É aqui que a maioria dos guias de integração do WhatsApp param, e é onde a qualidade da configuração faz a diferença. As configurações de Data e Hora do widget (na aba Configurações) permitem controlar exatamente quando o botão de chat aparece no seu site. Você pode definir dias específicos, horários de início e término e um fuso horário.
Se sua empresa tem horário definido — por exemplo, de segunda a sexta, das 9h às 18h — configure a programação para corresponder. Visitantes fora desses horários não verão o botão do WhatsApp, evitando a experiência frustrante de enviar uma mensagem e não receber retorno por 12 horas.
Passo 5: Personalize a aparência e o posicionamento
Com este passo, você personaliza o design e o layout do seu widget de chat. A guia Aparência controla as cores, o ícone da bolha, animação, fonte e formato do botão. A guia Configurações cuida da posição do widget na página. Aqui está o que você pode ajustar:
- Posição está disponível em três modos: Bolha flutuante (segue o visitante conforme ele rola), Bolha integrada (fixa dentro do conteúdo) e Janela de chat integrada (chat aberto fixo)
- Alinhamento permite posicionar seu widget à esquerda, no centro ou à direita. O canto inferior direito é a convenção para botões de chat.
- Deslocamentos podem ser ajustados verticalmente e horizontalmente. Use-os para afastar a bolha de outros elementos flutuantes
- Ícone de bolha pode ser escolhido a partir da biblioteca integrada, deixado no padrão ou carregado como um ícone personalizado.
- Animação de Bolhas — chave liga/desliga configurável com intervalo ajustável (padrão: 10 segundos)
- Cores — fundo da bolha, ícone, cabeçalho, papel de parede do chat, fundo das mensagens, botão, badge de notificação e status online são todos configuráveis de forma independente
Você pode controlar em quais páginas o widget aparece nas Configurações de exibição do Chat: exibir em todas as páginas, excluir páginas específicas por URL ou exibir apenas em páginas específicas. Você também pode segmentar por dispositivo (desktop, mobile ou ambos) e por tipo de visitante (todos os visitantes, apenas novos visitantes ou apenas visitantes que retornam).
Estratégia de posicionamento por tipo de página
- Página inicial — bolha flutuante, canto inferior direito, sempre visível; seu ponto de entrada padrão
- Páginas de produtos/serviços – bolha flutuante com gatilho de tempo na página após 10–15 segundos (“Tem alguma dúvida sobre este produto?”)
- Página de preços – considere uma mensagem de boas-vindas mais marcante (“Precisa de ajuda para escolher um plano?”)
- Checkout – mensagem pré-preenchida referenciando o produto que está comprando
- Blog/páginas de Conteúdo – apenas se o seu modelo de negócio envolve conversas diretas a partir do conteúdo
Etapa 6: Configurar o comportamento do gatilho
Gatilhos definem quando a janela de chat abre automaticamente, sem o visitante clicar no balão. Cinco tipos de gatilho estão disponíveis e podem ser combinados (o primeiro disparado abre o chat):
- Ao Carregar a Página — abre imediatamente quando a página carrega. Ideal para páginas com alta intenção, como preços ou checkout, mas é agressivo.
- Tempo na Página — abre após um certo número de segundos na página atual. Ótimo para páginas de produto onde os visitantes precisam de um momento para navegar antes de oferecer ajuda.
- Tempo no Site — abre após um tempo total definido no site. Útil para sessões de navegação entre várias páginas.
- Posição de Rolagem — abre após o visitante rolar um percentual definido da página. Funciona bem para conteúdo longo ou páginas de destino.
- Intenção de Saída — abre quando o visitante move o cursor sobre o botão de fechar da aba. Envolvimento de última chance — “Antes de sair, alguma dúvida?”
A configuração Remember Visitor controla o que acontece depois que alguém encerra o chat: o widget não reabre automaticamente por um período configurável (padrão: 1 dia). Isso evita o incômodo de o chat fechado aparecer novamente em cada página.
Se você não quiser que o chat abra automaticamente — apenas fique como uma bolha clicável — desative todos os gatilhos e defina as opções baseadas em tempo para 0 segundos.
Etapa 7: Obtenha o código de incorporação e instale
Clique em “Adicionar ao Site” para obter o código de instalação. O código é composto por duas partes: uma tag de script que carrega a plataforma Elfsight e uma tag div com a classe única do seu widget. Copie o bloco inteiro.
WordPress, Squarespace, Wix, Webflow, and Shopify.”>Por fim, cole o código em um bloco de HTML Personalizado em qualquer página do seu site. O widget é compatível com a maioria de CMS e construtores de sites, incluindo WordPress, Squarespace, Wix, Webflow e Shopify.
Checklist rápido de solução de problemas
- O widget não está aparecendo? Verifique se o código está em um bloco HTML personalizado, não em um bloco de texto comum. Limpe o cache do seu site.
- O WhatsApp abre, mas sem mensagem pré-preenchida? Verifique o texto pré-preenchido nas configurações do widget. Caracteres especiais podem comprometer a codificação da URL. Se você conectou via um link curto do WhatsApp Business, a mensagem pré-preenchida deve ser configurada no app WhatsApp Business.
- O widget está sobrepondo-se a outros elementos no celular? Ajuste os deslocamentos verticais e horizontais do widget nas Configurações de Posição, ou use a segmentação por dispositivo para escondê-lo no celular se você tiver outro método de contato por lá.
- “Este número de telefone não está no WhatsApp” erro? Confirme que o número está registrado no WhatsApp (e não é apenas um número de telefone comum) e inclui o código do país correto, sem zero à esquerda.
Outras formas de adicionar o WhatsApp ao seu site
A abordagem de widget atende à maioria dos casos de uso, mas não é a sua única opção. Aqui estão duas alternativas — uma para simplicidade, outra para escalabilidade.
Adicione um link do WhatsApp ao seu site com wa.me
wa.me link opens a WhatsApp conversation directly from any browser. No widget, no JavaScript, no third-party tool. This is the simplest way to add a WhatsApp chat button on a website if you just need a basic “message us” link.”>Um wa.me link abre uma conversa no WhatsApp diretamente de qualquer navegador. Sem widget, sem JavaScript, sem ferramenta de terceiros. Esta é a forma mais simples de adicionar um botão de chat do WhatsApp em um site, se você precisa apenas de um link básico de “envie uma mensagem”.
- Crie seu link:
https://wa.me/[number-with-country-code]?text=[pre-filled-message]Exemplo:https://wa.me/14155551234?text=Hi%2C%20I%27d%20like%20to%20know%20more%20about%20your%20services - Adicione como uma âncora HTML:
<a href="https://wa.me/14155551234?text=Hi" target="_blank">Envie uma mensagem pelo WhatsApp</a> - Estilize com CSS ou use um ícone. Coloque onde quiser — no cabeçalho, no rodapé, na página de Contato, ou em um botão flutuante em CSS que você mesmo crie.
Este é o código de incorporação do WhatsApp para sites em sua forma mais simples. Sem painel, sem configuração — apenas um link. Se isso é tudo que você precisa, ele funciona.
Como adicionar a API do WhatsApp ao seu site
A API oficial do WhatsApp Business API do WhatsApp Business permite que você crie experiências no WhatsApp totalmente automatizadas: chatbots, mensagens modelo, integração com CRM e roteamento com múltiplos agentes. Esta é uma infraestrutura de nível empresarial, não um widget plug-and-play.
- Solicite acesso à API do WhatsApp Business por meio de um Provedor de Soluções de Negócios (BSP)
- Verifique sua empresa e o número de telefone através do Meta Business Manager.
- Crie ou configure seu fluxo de mensagens: modelos, webhooks e regras de automação.
- Incorpore uma interface de chat personalizada ou um ponto de entrada “Clique para conversar” no seu site.
Dicas de Otimização para o seu Chat no WhatsApp
Você instalou o widget — veja o que diferencia uma configuração que passa despercebida de uma que gera conversas.
Design e posicionamento
Não empilhe elementos flutuantes. Se você já tem um chatbot, um banner de cookies e um botão de voltar ao topo, adicionar uma bolha do WhatsApp cria caos visual em dispositivos móveis. Faça uma auditoria nos seus elementos flutuantes antes de adicionar mais um. Use as configurações de deslocamento do widget ou os controles de visibilidade em nível de página para evitar colisões.
Comece pelas páginas com maior intenção de compra, não por todas as páginas. Mostre o WhatsApp nas páginas de produto, preços e contato primeiro. Verifique seus dados GA após duas semanas — você verá rapidamente quais páginas realmente geram conversas e pode cortar o restante.
Mensagens e respostas
Use a mensagem pré-preenchida para reduzir atrito. Um “Oi” em branco de um cliente não oferece nada para trabalhar. Preencha com contexto — “Oi, estou interessado em [produto/serviço]” — e você evita uma rodada de ida e volta. O placeholder [page_url] adiciona ainda mais contexto automaticamente.
Estabeleça expectativas realistas de tempo de resposta. Se não puder responder em minutos, inclua isso na mensagem de boas-vindas: “Normalmente respondemos dentro de 2 horas durante o horário comercial.” Expectativas não atendidas machucam mais do que respostas lentas com um aviso. Para ir além, plataformas como SendPulse fornecem software de suporte ao cliente do WhatsApp, juntamente com o CRM do WhatsApp, para permitir automatizar respostas, encaminhar chats para os membros certos da equipe e manter os tempos de resposta rápidos — para que cada cliente se sinta ouvido, mesmo durante horários de pico ou fora do horário comercial.
Rastreamento e alcance
Rastreie as interações do widget. O widget oferece rastreamento de eventos do Google Analytics integrado (na guia Configurações) com dois eventos: Widget Aberto e Chat Iniciado. Configure-o se você já tiver GA ou GTM instalado — você vai querer saber quais páginas geram mais conversas e quando as consultas atingem o pico.
Combinar WhatsApp com atendimento fora do expediente. WhatsApp é ideal durante o horário comercial, quando você pode responder pessoalmente. Para noites e finais de semana, combine-o com um Chatbot de IA que responde automaticamente às perguntas mais comuns — os visitantes sempre recebem uma resposta, independentemente do horário.
Perguntas Frequentes
Adicionar o chat do WhatsApp a um site é gratuito?
Preciso do WhatsApp Business para adicionar um botão de chat do WhatsApp ao meu site?
Posso inserir o chat do WhatsApp no WordPress, Shopify ou Wix?
Posso controlar quando o widget do WhatsApp aparece no meu site?
Posso ter múltiplos agentes em um único widget de chat do WhatsApp?
Conclusão
Você já viu três formas de adicionar o chat do WhatsApp ao seu site — desde um simples link wa.me até um widget totalmente configurado com agendamento, gatilhos e mensagens pré-preenchidas. Seja qual for o método escolhido, as decisões de configuração que mais importam são aquelas com as quais os visitantes interagem diretamente: uma mensagem de boas-vindas que explica o que esperar, uma resposta pré-preenchida que reduz atrito e o tempo de exibição que corresponde ao seu horário real de resposta.
Se ainda não experimentou o editor de widgets, comece pelo Widget de Chat do WhatsApp — o plano gratuito cobre uma configuração básica, e você pode personalizar tudo antes de confirmar. E se você precisar de cobertura 24/7 além do horário comercial, combinar o WhatsApp com um Chatbot de IA garante que os visitantes recebam uma resposta, mesmo quando você não estiver à mesa.
