post

Criar botão WhatsApp flutuante no site

Publicado em: 18/01/2022 / Atualizado em: 26/10/2023

Categorias: BlogCSSHTMLWhatsApp

É possível criar um botão flutuante de WhatsApp para seu site de forma simples, apenas usando um pouco de HTML + CSS.

Segue abaixo exemplo de botão com ícone:

<div class="float-whatsapp float-on">
    <div>
      <a target="_blank" href="https://wa.me/5511999009900"> <span><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="whatsapp" style="fill: #fff"><path d="M16.7,3.3c-1.8-1.8-4.1-2.8-6.7-2.8c-5.2,0-9.4,4.2-9.4,9.4c0,1.7,0.4,3.3,1.3,4.7l-1.3,4.9l5-1.3c1.4,0.8,2.9,1.2,4.5,1.2 l0,0l0,0c5.2,0,9.4-4.2,9.4-9.4C19.5,7.4,18.5,5,16.7,3.3 M10.1,17.7L10.1,17.7c-1.4,0-2.8-0.4-4-1.1l-0.3-0.2l-3,0.8l0.8-2.9 l-0.2-0.3c-0.8-1.2-1.2-2.7-1.2-4.2c0-4.3,3.5-7.8,7.8-7.8c2.1,0,4.1,0.8,5.5,2.3c1.5,1.5,2.3,3.4,2.3,5.5 C17.9,14.2,14.4,17.7,10.1,17.7 M14.4,11.9c-0.2-0.1-1.4-0.7-1.6-0.8c-0.2-0.1-0.4-0.1-0.5,0.1c-0.2,0.2-0.6,0.8-0.8,0.9 c-0.1,0.2-0.3,0.2-0.5,0.1c-0.2-0.1-1-0.4-1.9-1.2c-0.7-0.6-1.2-1.4-1.3-1.6c-0.1-0.2,0-0.4,0.1-0.5C8,8.8,8.1,8.7,8.2,8.5 c0.1-0.1,0.2-0.2,0.2-0.4c0.1-0.2,0-0.3,0-0.4C8.4,7.6,7.9,6.5,7.7,6C7.5,5.5,7.3,5.6,7.2,5.6c-0.1,0-0.3,0-0.4,0 c-0.2,0-0.4,0.1-0.6,0.3c-0.2,0.2-0.8,0.8-0.8,2c0,1.2,0.8,2.3,1,2.4c0.1,0.2,1.7,2.5,4,3.5c0.6,0.2,1,0.4,1.3,0.5 c0.6,0.2,1.1,0.2,1.5,0.1c0.5-0.1,1.4-0.6,1.6-1.1c0.2-0.5,0.2-1,0.1-1.1C14.8,12.1,14.6,12,14.4,11.9"></path></svg></span>
        <span class="float-whatsapp-text"> Chamar no WhatsApp </span>
      </a>
    </div>
</div>

<style>
.float-whatsapp {
    bottom: 80px;
    right: 20px;
    z-index: 999;
    font-size: 14px;
}

.float-whatsapp.float-on {
  position: fixed;
}

.float-whatsapp a {
    background: #008617;
    padding: 10px 20px 10px 15px;
    border-radius: 100px;
    color: #fff;
    text-decoration: none;
}

.float-whatsapp svg {
    height: 16px;
    margin-bottom: -2px;
}
</style>

Pronto!

OBS: Mude onde esta https://wa.me/5511900000000 para o seu numero de WhatsApp com DDD

DICA: Caso o icone do whatsapp fique desalinhado com o texto, isso quer dizer que tem algum CSS do seu site interferindo, mas é facil, só precisa ajustar o margin-bottom da class float-whatsapp svg.

Dica bônus:

Caso queira adicionar a URL da página dinamicamente na mensagem enviada para o whatsapp, você pode adicionar esse pequeno código JavaScript logo abaixo:

<script>
document.addEventListener("DOMContentLoaded", function () {
    // Obtém o número de telefone do href atual do botão .float-whatsapp a
    var whatsappButton = document.querySelector(".float-whatsapp a");
    var currentWhatsAppLink = whatsappButton.getAttribute("href");

    // Obtém a URL da página atual
    var currentPageURL = window.location.href;

    // Converte a URL para o formato desejado
    var encodedURL = encodeURIComponent(currentPageURL);
    
    // Constrói a nova URL do WhatsApp com o número de telefone do botão
    var whatsappURL = currentWhatsAppLink + "?text=Quero+mais+informações+sobre:" + encodedURL;

    // Atualiza o href do botão .float-whatsapp a
    whatsappButton.href = whatsappURL;
});
</script>

Publicações recomendadas:

Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News

Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/1388

ID de Referência: 1388

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários