Como adicionar link WhatsApp no site

Introdução

O WhatsApp é uma ferramenta essencial de comunicação na web. Neste artigo, mostraremos como adicionar um link direto e um ícone flutuante do WhatsApp ao seu site, facilitando o contato dos usuários com você.

Link Simples para WhatsApp

Para criar um link que direciona os usuários diretamente para uma conversa no WhatsApp, use o código HTML abaixo:

<a href="https://wa.me/5511912345678">Link para WhatsApp</a>

Este link inicia uma conversa com o número (11) 912345678.

Para adaptá-lo ao seu número, substitua "5511912345678" por "55", seguido do seu DDD e número de telefone.

Link para WhatsApp com Ícone Flutuante

Adicione um ícone flutuante do WhatsApp em seu site para facilitar o contato. Este ícone permanece visível no canto inferior da página.

Basta copiar o código abaixo e colar antes da tag </body> em seu site:

<a href="https://wa.me/5511912345678" id="whatsapp" title="Fale conosco pelo WhatsApp" rel="noindex"
style="display: block; position: fixed; z-index: 99; user-select: none; width: 80px; aspect-ratio: 1;
bottom: 20px; right: 20px; max-width: 20%; filter: drop-shadow(0px 5px 10px rgba(0,0,0,0.7));"><img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgM
CAyNDg5MCAyNTAwMCI+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMTI0NDUiIHgyPSIxMjQ0NSIgeTE9IjI0Mjg3LjYiIHkyP
SI0MzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMyMGIwMzgiL
z48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM2MGQ2NmEiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGZpbGw9InVybCgjY
SkiIGQ9Im01NzAgMjQyODggMTY3OC02MTI2YTExODA3IDExODA3IDAgMCAxLTE1NzktNTkxMEM2NzEgNTczMyA1OTc2IDQzMCAxM
jQ5NCA0MzBjMzE2NCAxIDYxMzMgMTIzMyA4MzY1IDM0NjdhMTE3NTAgMTE3NTAgMCAwIDEgMzQ2MSA4MzYzYy0zIDY1MTgtNTMwO
CAxMTgyMi0xMTgyNSAxMTgyMmgtNWMtMTk3OS0xLTM5MjQtNDk3LTU2NTEtMTQzOUw1NzAgMjQyODgiLz48ZyBmaWxsPSIjZmZmI
j48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05NDM1IDcxMjhjLTIyOS01MTAtNDcxLTUyMC02ODktNTI5LTE3OC04LTM4M
y03LTU4Ny03cy01MzYgNzctODE2IDM4M2MtMjgxIDMwNi0xMDcxIDEwNDctMTA3MSAyNTUzczEwOTcgMjk2MSAxMjUwIDMxNjZjM
TUzIDIwNCAyMTE3IDMzOTMgNTIyOSA0NjIwIDI1ODYgMTAyMCAzMTEyIDgxNyAzNjczIDc2NnMxODExLTc0MCAyMDY2LTE0NTUgM
jU1LTEzMjcgMTc5LTE0NTVjLTc3LTEyOC0yODEtMjA0LTU4Ny0zNTdzLTE4MTEtODk0LTIwOTEtOTk2Yy0yODEtMTAyLTQ4NS0xN
TMtNjg5IDE1M3MtNzkwIDk5NS05NjkgMTE5OWMtMTc5IDIwNS0zNTcgMjMwLTY2MyA3Ny0zMDYtMTU0LTEyOTItNDc2LTI0NjEtM
TUxOS05MTAtODExLTE1MjQtMTgxMy0xNzAzLTIxMjAtMTc5LTMwNi0xOS00NzIgMTM0LTYyNSAxMzctMTM3IDMwNi0zNTcgNDU5L
TUzNnMyMDQtMzA2IDMwNi01MTAgNTEtMzgzLTI2LTUzNi02NzItMTY2Ni05NDQtMjI3MiIvPjxwYXRoIGQ9Ik0yMTE2MiAzNTk0Q
TEyMTY5IDEyMTY5IDAgMCAwIDEyNDk3IDNDNTc0NCAyIDI0OSA1NDk2IDI0NiAxMjI0OGMwIDIxNTggNTY0IDQyNjUgMTYzNiA2M
TIyTDE0NCAyNDcxNWw2NDk0LTE3MDNhMTIyNDIgMTIyNDIgMCAwIDAgNTg1NCAxNDkxaDVjNjc1MSAwIDEyMjQ3LTU0OTQgMTIyN
TAtMTIyNDYgMC0zMjcyLTEyNzMtNjM0OS0zNTg1LTg2NjN6bS04NjY2IDE4ODQxaC00Yy0xODI3LTEtMzYxOS00OTItNTE4Mi0xN
DE5bC0zNzItMjIxLTM4NTQgMTAxMCAxMDMwLTM3NTUtMjQyLTM4NWExMDE2MyAxMDE2MyAwIDAgMS0xNTU3LTU0MTdjMi01NjEyI
DQ1NjktMTAxNzcgMTAxODUtMTAxNzcgMjcyMCAxIDUyNzYgMTA2MSA3MTk4IDI5ODVzMjk4MCA0NDgxIDI5NzkgNzIwMWMtMSA1N
jEyLTQ1NjkgMTAxNzgtMTAxODEgMTAxNzgiLz48L2c+PC9zdmc+" alt="WhatsApp"></a>

Lembre-se de ajustar o link no parâmetro href com o seu número de telefone, formatado com '55' (código do país) + DDD + número.

Ocultando o Ícone do WhatsApp Durante a Rolagem da Página

Para esconder o ícone do WhatsApp durante a rolagem, adicione este código JavaScript após o código do link WhatsApp com ícone:

<script type="text/javascript">
var whatsapp = document.getElementById('whatsapp');
whatsapp.style.transition = "right 0.5s ease-out";
var scrollTimeout;
window.addEventListener("scroll", () => {
  clearTimeout(scrollTimeout);
  whatsapp.style.right = "-110px";
  scrollTimeout = setTimeout(() => { whatsapp.style.right = "20px"; }, 1000);
});
</script>

Este script faz com que o ícone saia temporariamente da tela ao rolar, melhorando a visualização da página.

Conclusão

Pronto! Agora você tem as ferramentas para integrar o WhatsApp ao seu site, seja com um link direto ou com um ícone flutuante.