Botão Flutuante do WhatsApp no seu Site: Tutorial Completo HTML/CSS Código Grátis!

Botão Flutuante do WhatsApp no seu Site: Tutorial Completo HTML/CSS Código Grátis!

Aprenda a criar um botão flutuante do WhatsApp para o seu site de forma fácil e rápida. Oferecemos código HTML e CSS grátis, além de um tutorial completo para te guiar. Aumente o engajamento com seus clientes chamando muito mais a atenção deles com essa ferramenta 100% gratuita!

Como criar um botão flutuante do WhatsApp de forma prática e fácil?

Para esse código eu utilizei como base o template personalizável que montamos na postagem sobre o guia básico de Bootstrap! Você pode observar que o Botão flutuante do WhatsApp tem um efeito que pulsa e pode ser visualizado tanto no computador quanto no celular sem problemas com o uso do bootstrap:

Botão flutuante do WhatsApp

Aprenda a fazer um botão que redireciona para o WhatsApp que pulsa, aumentando a atenção do usuário!

Código HTML e CSS para botão flutuante do WhatsApp como eu faço?

Você quer facilitar a comunicação com seus clientes e aumentar as chances de conversão em conversas diretas e estreitar a relação e confiança de seus usuários? Um botão flutuante do WhatsApp no seu site é a solução perfeita! Com ele, seus visitantes podem entrar em contato com você de forma rápida e simples, diretamente pelo aplicativo mais popular de mensagens instantâneas.

Aprenda a criar um código que só utiliza HTML e CSS para redirecionar seus usuários de forma fácil e com alta performance! Isso mesmo, com o uso de apenas HTML5 e CSS3 você pode ter um botão de WhatsApp animado flutuante na sua página!

LEIA TAMBÉM  Crie sites incríveis com Bootstrap: Tutorial para iniciantes

Por que usar um botão flutuante do WhatsApp?

Aqui estão 4 motivos que irão te fazer adicionar o botão flutuante do WhatsApp em seu site de forma muito fácil!

  1. Atendimento rápido e eficiente: Resolva dúvidas e finalize vendas de forma mais ágil.
  2. Aumento do engajamento: Mantenha seus clientes conectados à sua marca.
  3. Melhora da experiência do usuário: Ofereça um canal de comunicação intuitivo e acessível.
  4. Visual atraente: Personalize o botão para combinar com a identidade visual do seu site.

Crie seu Próprio Botão WhatsApp Flutuante: Passo-a-Passo com Código Grátis

Criar um botão flutuante do WhatsApp é mais simples do que você imagina. Com um pouco de conhecimento em HTML e CSS, você pode ter o seu próprio botão personalizado em poucos minutos.

Código CSS do botão flutuante de WhatsApp

Código CSS do botão de WhatsApp Flutuante

A seguir está o código de botão flutuante de WhatsApp, vamos começar com a parte do CSS que deve ser adicionado entre as tags <head></head> do seu código HTML (clique para exibir o código):

Mostrar Código CSS

<style>
.btn-whatsapp-pulse {
background: #25d366;
position: fixed;
bottom: 30px;
right: 30px;
display: flex;
justify-content: center;
align-items: center;
width: 0;
height: 0;
padding: 40px;
border-radius: 50%;
animation-name: pulse;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
}

@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
}
80% {
box-shadow: 0 0 0 24px rgba(37, 211, 102, 0);
}
}

.btn-whatsapp-pulse-border {
bottom: 120px;
right: 20px;
animation-play-state: paused;
}

.btn-whatsapp-pulse-border::before {
content: “”;
position: absolute;
border-radius: 50%;
padding: 25px;
border: 5px solid #25d366;
opacity: 0.75;
animation-name: pulse-border;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
}

@keyframes pulse-border {
0% {
padding: 25px;
opacity: 0.75;
}
75% {
padding: 80px;
opacity: 0.65;
}
100% {
padding: 120px;
opacity: 0.30;
}
}
</style>

No código CSS setamos o background do botão como verde background: #25d366;, informamos que o botão deve permanecer fixado a tela com a propriedade position: fixed; e indicamos que para não ficar colado ao fim da página tivesse uma distancia bottom: 30px; right: 30px; deixando assim uma área entre o fim da tela e o botão.

LEIA TAMBÉM  Tipos de Erro HTTP: Entendendo os Erros 404 e 500

Então setamos a animação como animation-name: pulse, indicando então a duração animation-duration: 1.5s;. A propriedade animation-timing-function: ease-out; faz com que a animação desacelere ao chegar no fim, dando um toque suave e a animation-iteration-count: infinite; faz com que ela se repita infinitamente em um loop.

Código grátis HTML do botão de WhatsApp para o seu site

Código HTML do botão de WhatsApp Flutuante grátis

Agora após adicionar as propriedades CSS disponibilizada acima você pode então adicionar o código a seguir antes da tag </body> em seu código (clique para visualizar o código):

Mostrar Código HTML

<a href=”https://api.whatsapp.com/send?phone=551199999999&text=olá%20gostaria%20de%20falar%20com%20voce

    target=”_blank” class=”btn-whatsapp-pulse”>

    <img src=”whatsappbotao.png” width=”50px” />

  </a>

Você pode editar o número que irá se redirecionar a mensagem e também a mensagem, editando os itens a seguir:

  • 551199999999 – Altere essa parte para colocar o número que você usa, lembre-se de utilizar primeiro o código do país, após o código do seu estado e por ultimo o seu número de WhatsApp. No caso eu utilizei um telefone de +55 (11) 9999-9999 e retirei todos os espaços e caracteres especiais.
  • olá%20gostaria%20de%20falar%20com%20voce – Aqui você pode editar sua mensagem, lembre-se de que como não há espaços numa url e a mensagem está embutida nela, você deve substituir os espaços pelos caracteres %20
  • link da imagem:

Botão WhatsApp grátis

Com o código acima o botão do WhatsApp é completamente funcional e ainda pode ser utilizado para sempre, afinal além do código disponibilizei o ícone utilizado.

Com este tutorial completo e o código grátis, você pode criar um botão flutuante do WhatsApp personalizado para o seu site e melhorar a experiência dos seus clientes.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

plugins premium WordPress