Cansado de ver seus visitantes irem embora sem acessar seus canais de contato! Com esse chamativo botão de contato fixo e pulsante para seu Whatsapp, seus contatos estarão sempre à mão. Pronto para receber um oi, um pedido de orçamento ou um elogio?

Esse botão não usa Javascript, apenas CSS e HTML puro, leve e não causa impacto algum no desempenho do seu site…

Vamos lá…

Mas por que essa etiqueta é tão especial?

Visibilidade garantida: Diga adeus aos contatos escondidos em cantos remotos do seu site. Essa etiqueta fica fixada na lateral da tela, sempre visível, independentemente de onde o visitante esteja.

Pulsando com vida: Chega de botões estáticos e sem graça! Essa etiqueta pulsa com uma animação CSS chamativa, atraindo a atenção dos seus visitantes e convidando-os a entrar em contato.

Sem JS, sem complicações: Esqueça a dor de cabeça de lidar com JavaScript. Essa implementação é feita apenas com HTML e CSS, o que significa que qualquer um pode fazer isso, mesmo que você não seja um ninja da programação.

Fácil de personalizar: Basta subir uma imagem pro seu site e substituir o endereço no HTML, simples….

Mas então, como colocar esse botão no meu site

1. Adicione o CSS:

Abra o seu arquivo “style.css” e cole o seguinte código:

#etiqueta {
    position: fixed;
    top: 270px;
    width: 75px; /* tamanho da imagem, aconselho a deixar entre 50px e 80px , repeta na altura*/
	height:75px;
    z-index: 100;
    right: 2px;
}
#etiqueta img {
  width: 100%;
  height: 100%;
}
#etiqueta img {
  animation: scale 2s infinite alternate ease-in-out;
}
@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1); /* Ajuste a porcentagem para controlar a amplitude da animação */
  }
  100% {
    transform: scale(1);
  }
}

2. Adicione o HTML:

Abra o rodapé do seu site, antes de fechar a tag “body” e coloque:

<div id="etiqueta"><a href="link para seu contato do whatsapp"><img src="link da imagem no seu servidor" title="Fale comigo pelo Whatsapp!" alt="Fale comigo pelo Whatsapp!" /></a></div>

3. Personalize!

Você já deve ter percebido que pode usar esse processo com qualquer imagem ou link e está certo.
Nada impede que você use, por exemplo, um ícone do Instagram com seu link nele. As possibilidades são imensas!

Pronto! Sua etiqueta de contato fixa e pulsante já está funcionando, pronta para facilitar a vida dos seus visitantes e aumentar suas conversões.

E o melhor de tudo? Essa implementação é super simples e rápida, mesmo para quem não tem muita experiência com programação. Nada de JavaScript complicado ou plugins pesados. Apenas HTML e CSS básicos, que qualquer um pode dominar.

Então, pare de perder tempo e coloque essa etiqueta mágica no seu site hoje mesmo! Seus visitantes vão te agradecer, e você vai ver a diferença no número de contatos e leads.

Caso precise de ajuda não exite em entrar em contato, pelo botão do Whatsapp (😉) desse site!

Até mais!