Gerador de Botão do WhatsApp


Configurações do Botão


25 caracteres restantes

Pré-visualização


Pré-visualização de como ficará o botão instalado em seu site


Como criar um botão do WhatsApp no meu site?

Você pode criar seu botão e ajustar quantas vezes quiser, a criação é bem simples, você poderá adaptar o local onde o botão será exibido, texto que será exibido ao passar o mouse e se precisa que ao abrir em um computador, abra ou não em uma nova aba do navegador.

Para ter seu botão é simples, só informar o número que será chamado, se desejar, configure uma mensagem padrão que o usuário poderá enviar com um simples enviar.

O botão criado é responsivo, funciona perfeitamente em qualquer dispositivo, seja desktop, tablet ou smartphone.

São fáceis de instalar: Basta copiar e colar o código HTML em seu site.

Por que preciso ter um botão do WhatsApp no meu site?

Um botão do WhatsApp em seu site permite:

 Permita que seus clientes ou potenciais clientes falem com você ou sua empresa rapidamente, com o clicar de um botão.

 Facilite o contato de potenciais clientes que estejam navegando em seu site com seu time de vendas, tire suas dúvidas sobre seus produtos ou serviços e aumente suas vendas online.

 Capture os dados de contato dos seus visitantes e os inclua em sua lista de marketing.

Como instalar o código gerado em meu site?

⚠️ Atenção, verifique o grau de dificuldade antes de realizar mudanças em seu código, por segurança, realize um backup antes das alterações ou peça auxílio a um programador. Não nos responsabilizamos por problemas gerados devido a instalação incorreta do código.

Instalando diretamente no código da página/site

Nível de dificuldade: 

O código gerado precisa ser instalado no html do seu site entre as tags <head> e </body>, não há um local exato, mas recomendamos que seja o mais próximo da tag </body>, evitando assim mudanças na performance do seu site com o carregamento do botão.

Exemplo de como o código pode ser instalado em seu site:

<!DOCTYPE html>
<html>







</html>


Instalando com o uso do Google Tag Manager

Nível de dificuldade: 

Utilizando o Gerenciador de Tags do Google, você pode criar uma nova tag com o tipo , é uma forma simples e rápida de realizar a instalação do botão, considerando que você já tenha uma conta criada e configurada, crie uma nova tag, cole o código gerado aqui por nossa ferramenta, configure um acionador, salve e publique seu código, feito isto seu botão já estará em funcionamento.


Instalando no WordPress

Nível de dificuldade: 

Se você utiliza Wordpress em seu site, a instalação do código do botão do WhatsApp pode ser realizada de duas formas:

  • Acesse o painel do WordPress e vá para Aparência > Editor de Arquivos do Tema.
  • Selecione o arquivo header.php.
  • Localize a tag </body> no código e cole o código HTML gerado antes dela, assim como o exemplo apresentado acima.
  • Salve as alterações.

  • Instale e ative um plugin de gerenciamento de código, como o  ou o .
  • Acesse o menu do plugin no painel do WordPress.
  • Crie um novo snippet de código.
  • Selecione o tipo de código como HTML.
  • Cole o código HTML personalizado no campo de texto.
  • Especifique onde o código deve ser inserido, como no cabeçalho ou rodapé do site.
  • Salve as alterações.

Ajustando o modelo do botão diretamente no código

Aumentando ou reduzindo o tamanho

Você pode configurar para o botão ter um tamanho maior ou menor, para isto, localize no código o seguinte trecho:

position:fixed;width:60px;height:60px;

Por padrão será gerado um botão com 60 pixels, se deseja maior ou menor, basta mudar os valores acima destacado e testar a ponto de deixar da melhor forma que te atenda.


Ajustando a posição

Cada site tem seu layout, e se você precisa que o botão esteja posicionado mais acima, mais baixo, mais ao centro ou mais a borda isto é possível editando a seguinte parte do código:

bottom:40px;right:40px

em bottom você determina a altura, quando mais alto o número, mais alto estará na tela, já right você determina se quer mais ao centro ou mais perto da borda da página.

Aqui também cabem ajustes até deixar da forma que melhor atendem a sua necessidade.


Ajustando o local, direita ou esquerda

Você pode escolher o local selecionando o botão presente no início da página, campo Localização do Botão, mas caso já tenha gerado o código e queira mudar sem gerar outro código novamente, ajuste a seguinte parte do código:

bottom:40px;right:40px

Você pode usar left ou right.

Modelos de mensagens de boas vindas para você utilizar

Ao criar o botão do WhatsApp você pode criar mensagens prontas em que o seu cliente poderá só clicar em enviar, isto ajuda o usuário a iniciar a conversa com você, além de que você pode criar mensagens diferentes de acordo com a necessidade, por exemplo, na página de contato, você pode dizer, "Olá, preciso de ajuda", já em uma página de produto, pode dizer, "Oi, estou aqui vendo o produto XYZ no site de vocês e gostaria de mais informações", note que, com as mensagens prontas você já consegue inclusive saber de onde o cliente veio e o que ele estava procurando, então, vejamos alguns outros exemplos:

  1. Oi.
  2. Olá, bom dia / boa tarde.
  3. Oi, estou no site de vocês e gostaria de mais informações.
  4. Posso falar no setor comercial?
  5. Gostaria de fazer um agendamento.
  6. Preciso de ajuda.
  7. Qual o valor do produto?

Ferramentas Relacionadas