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:
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!
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!
- Atendimento rápido e eficiente: Resolva dúvidas e finalize vendas de forma mais ágil.
- Aumento do engajamento: Mantenha seus clientes conectados à sua marca.
- Melhora da experiência do usuário: Ofereça um canal de comunicação intuitivo e acessível.
- 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
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.
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
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.