Gerador de Botão WhatsApp e Link

O código do Botão do WhatsApp foi pensado para não prejudicar a performance do site. Muitos geradores de Botões solicitam reaquisição externa para funcionar e para quem quer otimizar o site para os buscadores é uma dor de cabeça. Pois você nunca sabe se o outro servidor estará online ou não e isso afeta o carregamento do site e com o tempo você começa a perder posições importantes na busca do Google.

Usamos apenas Javascript, só o necessário para chamar a atenção dos usuários. Após o carregamento da página em 5 segundos ele mostra um balão com uma Chamada Para Ação (CTA). Depois de 15 segundo ele some e notifica mensagem com circulo vermelho e numero 1 em cima do Botão. Se caso o internauta continue a navegação é mostrado novamente balão com uma Chamada Para Ação (CTA). Estes tempos foram testados com vários clientes e tivemos uma aumento de 17% de cliques no Botão do WhatsApp.

Se você programa o básico de JavaScript, você pode fazer teste em seu site. Identifique o código de JavaScript e mude os números que estão em milissegundos (5000, 15000 e 25000)

Você deve colocar o prefixo de seu país, no caso do Brasil é 55. Veja o exemplo de um telefone de São Paulo: 55 (11) 9 9999-9999
Veja se não esta faltando algum número no seu telefone quando você digitou no campo “N° do celular” para gerar o link do WhatsApp.

O Botão do WhatsApp HTML é um código de programação que permite a criação de um botão ou ícone do WhatsApp em um site ou página web. Esse botão é geralmente colocado em uma posição destacada na página, como no canto inferior direito, para facilitar o acesso dos visitantes.

Ao clicar no botão do WhatsApp, o visitante é redirecionado para o aplicativo do WhatsApp em seu dispositivo, iniciando uma conversa com o número de WhatsApp associado ao botão. Essa funcionalidade facilita o contato e a comunicação entre os visitantes do site e a empresa ou proprietário do site.

O código HTML do botão do WhatsApp pode ser personalizado em termos de cor, tamanho e posição na página. Ele pode ser inserido diretamente no código fonte do site ou integrado através de plataformas de gerenciamento de conteúdo, como WordPress, Joomla, E-commerce, Blogger, Wix, páginas em HTML e muitas outras plataformas.

O Botão do WhatsApp foi pensado para não ter acesso de requisições externas, ele ficou muito leve e rápido, ótimo para quem esta otimizando o site para as Buscas (SEO), ao contrário de outros botões que tem no mercado.
Você deve colocar o script gerado do Botão do WhatsApp antes do fechamento da TAG body. Veja Exemplo:

                                        // Colar código aqui antes do fechamento da tag
                                        </body>
                                    

É a nova API usada pelo WhatsApp para facilitar o envio do link curto. O WhatsApp usa as duas formas tanto o Link longo e o link curto (https://wa.me/) com ele fica mais fácil enviar o link diretamente para seu contato. Gere o Link do número de seu WhatsApp no formulário.
Já o Link longo do WhatsApp usa este tipo de estrutura: https://api.whatsapp.com/send?phone=.
Os dois tipos de Links funcionam bem.

O modo mais fácil de colocar o código gerado do Botão WhatsApp no Wordpress é adicionar no Widget do Wordpress, pois o botão não tem requisição externa, é apenas html, css, base64 icon e um pouco de Javascript. Você pode desmembrar o JavaScript do código e colocar em um arquivo separado se caso você é desenvolvedor. Mas como o rodapé está no final da página, não há muito problema. Desta forma qualquer pessoa, com conhecimento em Wordpress, pode retirar o botão quando quiser sem pedir ajuda ao desenvolvedor.

Outra forma é você colocar o código dentro do arquivo Function.php de seu tema. Veja o Script em PHP em baixo. Onde esta Escrito "Copie e Cole seu código aqui" apague toda a linha e cole seu código gerado aqui na nossa ferramenta.

// Função BOTÃO DO WHATSAPP
function botaowhatsapp() {
?>

<!-- Copie e Cole seu código aqui -->

<?php
}
add_action( 'wp_footer', 'botaowhatsapp' );
                                        
                                    

Quando este problema acontece, você deve mudar a altura da ordem de camada de um elemento HTML e colocar em um nível maior que o seu elemento visual da página. Para fazer esta modificação. Abra um editor de html ou próprio bloco de notas do Windows.

Cole o código gerado no Editor e faça uma busca pelo código z-index (tecla de atalho do bloco de notas CTRL + F para localizar palavras)

Será apresentado o z-index em 3 lugares do código.

Cada navegador estipula um valor Máximo de altura das camadas. Então terá que testar. Tente modificar o z-index de 100 para 1000, para o z-index 101 que é o ícone de notificação com o número UM em vermelho coloque z-index 1001. Assim este notificador ficará em cima do ícone do botão WhatsApp.

Coloque novamente o código no seu site e limpe o cache de seu navegador para testar (tecla de atalho para limpar cache CTRL + F5 no navegador). Se caso ainda tenha problema tente aumentar para um número maior até ajustar de acordo com sua preferência. Mude o valor dos 3 z-index.

Temos em nosso blog um tutorial explicando a criação da versão mais básica deste botão do WhatsApp fixo nas laterais. Qualquer dúvida deixe seu comentários no post.

--> Como criar um botão de WhatsApp flutuante para o seu site

Primera coisa você deve já ter copiado o emoji. Caso você não tenha seu emoji copiado acesse este site:

https://pt.piliapp.com/facebook-symbols/

Digite seu texto no campo que será enviada pelo cliente, veja no exemplo abaixo:

Para quebrar a linha você deve usar este código:

%0a

Digite sua mensagem e código onde você quer que a linha seja quebrada. Depois clique em "Gerar Link e Botão"

O modelo para o link do WhatsApp ficará desta forma:

https://api.whatsapp.com/send?phone=5511999999999&text=Olá!%20Gostaria%20de%20mais%20informação%20...%20%0a%20Obrigado!

Para o modelo de Link curto do WhatsApp ficará desta forma:

https://wa.me/5511999999999?text=Olá!%20Gostaria%20de%20mais%20informação%20...%20%0a%20Obrigado!

Legenda:

• Azul: Numero de seu Telefone
• Verde: Código indica espaçamento
• Vermelho: Código indica quebra de linha

Veja como o cliente enviará para você a mensagem:

Às vezes existem situações que você precisa personalizar números de telefones diferentes para cada dispositivo. Vamos supor que será necessário ter dois números de WhatsApp, um vai atender pessoas que estão no site acessando via celular e outro para pessoas acessando no computador. No nosso exemplo teremos dois números: Computador 55 11 99999-9999, Celular: 55 11 88888-8888

Como usar 2 números diferentes de WhatsApp no mesmo site?

No Gerador de Botão do WhatsApp cadastre os campos e selecione o item SIM na opção: "Mostrar o endereço da página do SITE visitada na mensagem enviada pelo cliente?"

Com o código gerado vamos pegar alguns dados do script para modificar e fazer algumas verificações de tamanho de tela.

Busque o último trecho que está selecionando na imagem:

Copie apenas o trecho com a variável de seus dados do código gerado, Exemplo:
var endereco = "https://api.whatsapp.com/send?phone=..."+ urlsite; waurlsite.href = endereco;

Cole o código onde está o link padrão (apague toda a linha: // Cole seu código aqui (Link Padrão)):

 <script type="text/javascript">
	var waurlsite = document.getElementById("waurlsite");
	var urlsite = window.location.href;

	function setLink() {
	  if (window.innerWidth < 576) {
		// WhastApp para o celular
		var endereco = "https://api.whatsapp.com/send?phone=Celular " + urlsite; waurlsite.href = endereco;
	  }
	  else {
		// Cole seu código aqui (Link Padrão)
	  }
	}

	setLink();
</script>	
					

Agora precisamos colocar o número de telefone que será mostrado para os acessos de celular. No código acima há uma linha com este comentário: // WhastApp para o celular, na linha de baixo deve alterar apenas o que esta em "" (aspas). Coloque o número de atendimento pelo celular. No nosso exemplo seria o 55 11 88888-8888. Então ficaria desta forma: "https://api.whatsapp.com/send?phone=5511888888888"

Talvez você queira colocar alguma mensagem padrão para ser enviado. Veja um exemplo:

https://api.whatsapp.com/send?phone=5511888888888&text=Olá!%20Gostaria%20de%20mais%20informação%20...%20%0a%20Obrigado!

Legenda:

• Azul: Numero de seu Telefone
• Verde: Código indica espaçamento
• Vermelho: Código indica quebra de linha

No nosso exemplo, o código modificado ficou desta forma:

 <script type="text/javascript">
	var waurlsite = document.getElementById("waurlsite");
	var urlsite = window.location.href;

	function setLink() {
	  if (window.innerWidth < 576) {
		// WhastApp para o celular
		var endereco = "https://api.whatsapp.com/send?phone=55118888888&text=Olá!%20Estou%20no%20celular%20gostaria%20de%20mais%20informação%20...%20%0a%20Obrigado!" + urlsite; waurlsite.href = endereco;
	  }
	  else {
		var endereco = "https://api.whatsapp.com/send?phone=55119999999&text=Olá!%20Estou%20no%20PC%20gostaria%20de%20mais%20informação%20...%20%0a%20Obrigado!" + urlsite; waurlsite.href = endereco;
	  }
	}

	setLink();
</script >	
					

Agora, junto ao seu código gerado do botão WhatsApp apague o trecho da figura abaixo e cole seu novo código:

Se tudo estiver correto seu novo código deve estar assim:

Para fazer o teste diminua seu navegador para aproximadamente o tamanho do celular. Depois atualize a página (F5) e passe o mouse acima do botão do WhatsApp flutuante e verifique o endereço do botão. Lembrando que a verificação do tamanho do dispositivo é menor que 576px, você pode modificar este número no código se o dispositivo for menor ou maior que 576px.