Como colocar botão do WhatsApp no seu site

Veja como adicionar um botão do WhatsApp no seu site, sem usar plugin e sem precisar saber mexer com códigos.

Existem diversas maneiras de colocar um botão do WhtasApp em um site, aqui irei mostrar como colocar o botão flutuante do WhatsApp em sites sem o uso de plugin, podendo adicionar em qualquer tipo de site, desde que você tenha acesso ao código. E o melhor, você não precisa ser programador ou entender de códigos, pois é só copiar e colar.

Veja nesse exemplo acima, que o site possue um botão do WhatsApp flutuante, facilitando a comunicação. Hoje é um item quase que obrigatório, em qualquer modelo de site profissional.

Colocando o botão do WhatsApp em um site WordPress sem usar plugin:

Primeiramente o que você precisa fazer é:
Ir em Aparência/Editor de arquivos do tema:

Em seguida:
Na lateral a sua direita, procure por: Rodapé do tema/ footer.php e clique em cima:

Antes das tags </body></html>
Adicione o código que está logo abaixo, copie e cole

Adicione o código abaixo:
Não esqueça de adicionar o seu número aonde está escrito: [55SEUNEMERO]

<!-- Botão flutuante do WhatsApp -->
<a href="https://wa.me/55SEUNUMERO" class="whatsapp-float" target="_blank" rel="noopener">
  <img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/WhatsApp_icon.png" alt="Fale conosco no WhatsApp" style="width: 60px; height: 60px;">
</a>

Feito isso clique no botão atualizar aquivo, para salvar as alterações.

Vamos para o último passo:

Clique em Aparência
Personalizar:

E em seguida clique em: CSS adicional:

No espaço em branco, adicione o código CSS abaixo:

.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

Agora só clicar em Publicar e o seu botão já estará ativo no seu site.

Sites em HTML e CSS

Para outros tipos de sites que você tenha acesso ao HTML e CSS, faça a mesma coisa:Adicione o código HTML dentro das tags Footer
E o código CSS, dentro do CSS da página, geralmente com o nome de style ou styles.

Se você gostou ou tem dúvidas sobre esse tutorial, deixe seu comentário aqui: