Marketing Digital

Como Criar Botão Flutuante WhatsApp [Com Códigos Prontos]

Thiago Moreira
21 de junho de 2025 9 Mins Read
12 Views
0 Comments

Se você tem uma pagina na internet principalmente se for uma loja ou produto sabe o quanto é atendimento é importante, ter um botão flutuante com contato direito não só passa confiança como pode converter mais clientes.

Uma das grandes preocupações do mundo moderno não é quantidade, nem preço mas qualidade, e pos venda, você pode ter o melhor produto, mas se não tiver um contato direto com o cliente o seu negócio ou produto pode ser o melhor mas ao passar do tempo poderá ser o pior.

Atendimento acelera conversões

Sumário Mostrar

  • Uma meta-análise do e‑commerce destacou que chat em tempo real aumenta a taxa de conversão em cerca de 30%: “

  • No modelo SERVQUAL, acessibilidade e comunicação eficaz — ou seja, a facilidade de contato humano e respeito ao cliente — são dimensões essenciais para a percepção positiva do serviço.

  • Sistemas híbridos (bot + humano) comprovam que atendimento eficiente reduz tempo de espera, aumenta satisfação e eleva o número de clientes atendidos.

Considere colocar um atendimento online, o botão do WhatsApp acredito converter mais ainda, porque dificilmente a pessoa vai entrar em contato para tirar uma dúvida sem ter o interesse real em comprar o seu produto.

Experiência como alavanca de valor

  • Segundo o PwC, uma boa experiência faz o cliente se sentir ouvido, reduz atrito e gera fidelização: “give customers a great experience, and they’ll buy more, be more loyal and share…”

  • Relatório da SuperOffice mostrou que 86% dos compradores estão dispostos a pagar mais por uma ótima experiência; empresas que focam nisso têm aumento de receita expressivo (ex: US$1 bilhão de faturamento pode gerar mais US$700 milhões em 3 anos)

  • Estudo da UserTesting (CX Dive) revelou que 2/3 dos consumidores nos EUA, Reino Unido e Austrália pagariam até 25% a mais por marcas que oferecem experiências personalizadas, confiáveis e recompensadoras

Conforme falei acima hoje as pessoas estão em busca de experiências, essa é a verdade, as pessoas estão cada vez mais carente e se você conseguir atende essas expectativas certamente terá um produto rentável por um longo tempo.

Agora vamos para que interessa de verdade que é os botões flutuantes do WhatsApp, logo abaixo irei liberar algum códigos e nesse códigos você somente precisa alterar para o seu número de telefone e inserir no seu site, Entretanto se você não se sentir confovatel em usar algums desses códigos você pode gerar seu código através de um gerador de botão flutuante para WhatsApp recomendamos que use o da Geobot.

Botão flutuante simples no canto direito da pagina

Modelo 01 botão flutuante
Modelo 01 botão flutuante
<!-- Botão WhatsApp fixo com texto -->
<a href="https://api.whatsapp.com/send?phone=55 SEU NÚMERO DE TELEOFNE AQUI TUDO JUNTO&text=Ol%C3%A1" 
   class="whatsapp-fixed-button" 
   target="_blank" 
   rel="noopener noreferrer">
  WhatsApp
</a>

<style>
  .whatsapp-fixed-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 150px;
    height: 50px;
    background-color: #3fd97f;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    border-radius: 50px;
    text-decoration: none;
    z-index: 9999;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
  }

  .whatsapp-fixed-button:hover {
    background-color: #34c570;
    transform: scale(1.05);
  }
</style>

Botão flutuante pulsante

Modelo 02 com efeito pulsante
Modelo 02 com efeito pulsante
<!-- Botão Flutuante WhatsApp com Efeito Pulsante -->
<a href="https://api.whatsapp.com/send?phone=55SEU TELEFONE AQUI TUDO JUNTO&text=Ol%C3%A1" 
   class="whatsapp-float" 
   target="_blank" 
   rel="noopener noreferrer">
  <img src="https://cdn-icons-png.flaticon.com/512/733/733585.png" 
       alt="WhatsApp" 
       style="width: 50px; height: 50px;">
</a>

<style>
  .whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 70px;
    height: 70px;
    background-color: #3fd97f;
    border-radius: 50%;
    padding: 10px;
    z-index: 9999;
    box-shadow: 0 0 0 rgba(63, 217, 127, 0.7);
    animation: pulse 1.5s infinite;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid white;
    transition: transform 0.3s ease;
  }

  .whatsapp-float:hover {
    transform: scale(1.1);
  }

  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(63, 217, 127, 0.7);
    }
    70% {
      box-shadow: 0 0 0 15px rgba(63, 217, 127, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(63, 217, 127, 0);
    }
  }
</style>

Código do botão WhatsApp (150x50px com texto WhatsApp)

Este modelo de botão flutuante retangular é muito bem utilizado para que deseja desatar melhor, e com isso passar uma impressão mais forte da presença do botão possibilitando mais possíveis cliques.

Modelo 03 Botão Flutuante WhatsApp
Modelo 03 Botão Flutuante WhatsApp
<!-- Botão WhatsApp fixo com texto -->
<a href="https://api.whatsapp.com/send?phone=55SEU TELEFONE AQUI TUDO JUNTO&text=Ol%C3%A1" 
   class="whatsapp-fixed-button" 
   target="_blank" 
   rel="noopener noreferrer">
  WhatsApp
</a>

<style>
  .whatsapp-fixed-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 150px;
    height: 50px;
    background-color: #3fd97f;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    border-radius: 50px;
    text-decoration: none;
    z-index: 9999;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
  }

  .whatsapp-fixed-button:hover {
    background-color: #34c570;
    transform: scale(1.05);
  }
</style>

Código do botão WhatsApp (150x50px com texto WhatsApp + Efeito Pulsante)

Modelo 04, botão flutuante WhatsApp com efeito pulsando
Modelo 04, botão flutuante WhatsApp com efeito pulsando
<!-- Botão WhatsApp fixo com efeito pulsante -->
<a href="https://api.whatsapp.com/send?phone=55SEU TELEFONE AQUI TUDO JUNTO&text=Ol%C3%A1" 
   class="whatsapp-fixed-button" 
   target="_blank" 
   rel="noopener noreferrer">
  WhatsApp
</a>

<style>
  .whatsapp-fixed-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 150px;
    height: 50px;
    background-color: #3fd97f;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    border-radius: 50px;
    text-decoration: none;
    z-index: 9999;
    box-shadow: 0 0 0 rgba(63, 217, 127, 0.7);
    animation: pulse 1.5s infinite;
    transition: background-color 0.3s ease, transform 0.2s ease;
  }

  .whatsapp-fixed-button:hover {
    background-color: #34c570;
    transform: scale(1.05);
  }

  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(63, 217, 127, 0.7);
    }
    70% {
      box-shadow: 0 0 0 15px rgba(63, 217, 127, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(63, 217, 127, 0);
    }
  }
</style>

Botão flutuante  estilo caixinha

Modelo 05 Caixinha Botão Flutuante Pulsando
Modelo 05 Caixinha Botão Flutuante Pulsando
<!-- Botão flutuante WhatsApp -->
<div class="whatsapp-launcher" onclick="toggleChatbox()">
  WhatsApp
</div>

<!-- Caixinha de chat -->
<div class="whatsapp-chatbox" id="whatsappChatbox" style="display: none;">
  <div class="chat-header">
    <span><strong>Suporte 💬</strong></span>
    <span class="close-btn" onclick="toggleChatbox()">❌</span>
    <p>Ajude seu atendimento com nosso chatbot 24/7, com respostas imediatas.</p>
  </div>
  <div class="chat-body">
    <p><strong>Olá, como posso te ajudar?</strong></p>
    <input type="text" id="userMessage" placeholder="Digite sua mensagem..." />
    <a href="#" onclick="startWhatsAppChat()" class="chat-button">
      <img src="https://cdn-icons-png.flaticon.com/512/733/733585.png" alt="whatsapp">
      Iniciar conversa
    </a>
  </div>
</div>

<style>
  .whatsapp-launcher {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 150px;
    height: 50px;
    background-color: #3fd97f;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    border-radius: 50px;
    text-decoration: none;
    z-index: 9999;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .whatsapp-launcher:hover {
    background-color: #34c570;
  }

  .whatsapp-chatbox {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 300px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    font-family: Arial, sans-serif;
    z-index: 9999;
    overflow: hidden;
  }

  .chat-header {
    background-color: #3fd97f;
    color: white;
    padding: 12px;
    font-size: 14px;
    position: relative;
  }

  .chat-header .close-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    cursor: pointer;
    font-size: 16px;
  }

  .chat-header p {
    margin-top: 5px;
    font-size: 13px;
  }

  .chat-body {
    padding: 12px;
  }

  .chat-body p {
    margin: 0 0 10px;
    font-size: 15px;
    color: #333;
  }

  .chat-body input {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    font-size: 14px;
  }

  .chat-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3fd97f;
    color: white;
    text-decoration: none;
    padding: 12px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    transition: background 0.3s ease;
  }

  .chat-button:hover {
    background-color: #34c570;
  }

  .chat-button img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }
</style>

<script>
  function toggleChatbox() {
    var box = document.getElementById('whatsappChatbox');
    box.style.display = (box.style.display === 'none') ? 'block' : 'none';
  }

  function startWhatsAppChat() {
    var userInput = document.getElementById('userMessage').value;
    var message = encodeURIComponent(userInput.trim() || "Olá");
    var phone = "55SEU TELEFONE AQUI TUDO JUNTO";
    window.open(`https://api.whatsapp.com/send?phone=${phone}&text=${message}`, '_blank');
  }
</script>

Botão flutuante WhatsApp Estilo Caixinha Estilo Pulsante

Modelo 06, botão flutuante WhatsApp com efeito pulsando
Modelo 06, botão flutuante WhatsApp com efeito pulsando
<!-- Botão flutuante WhatsApp -->
<div class="whatsapp-launcher" onclick="toggleChatbox()">
  WhatsApp
</div>

<!-- Caixinha de chat -->
<div class="whatsapp-chatbox" id="whatsappChatbox" style="display: none;">
  <div class="chat-header">
    <span><strong>Suporte 💬</strong></span>
    <span class="close-btn" onclick="toggleChatbox()">❌</span>
    <p>Ajude seu atendimento com nosso chatbot 24/7, com respostas imediatas.</p>
  </div>
  <div class="chat-body">
    <p><strong>Olá, como posso te ajudar?</strong></p>
    <input type="text" id="userMessage" placeholder="Digite sua mensagem..." />
    <a href="#" onclick="startWhatsAppChat()" class="chat-button">
      <img src="https://cdn-icons-png.flaticon.com/512/733/733585.png" alt="whatsapp">
      Iniciar conversa
    </a>
  </div>
</div>

<style>
  .whatsapp-launcher {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 150px;
    height: 50px;
    background-color: #3fd97f;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    border-radius: 50px;
    text-decoration: none;
    z-index: 9999;
    box-shadow: 0 0 0 rgba(63, 217, 127, 0.7);
    animation: pulse 1.5s infinite;
    cursor: pointer;
  }

  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(63, 217, 127, 0.7);
    }
    70% {
      box-shadow: 0 0 0 15px rgba(63, 217, 127, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(63, 217, 127, 0);
    }
  }

  .whatsapp-chatbox {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 300px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    font-family: Arial, sans-serif;
    z-index: 9999;
    overflow: hidden;
  }

  .chat-header {
    background-color: #3fd97f;
    color: white;
    padding: 12px;
    font-size: 14px;
    position: relative;
  }

  .chat-header .close-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    cursor: pointer;
    font-size: 16px;
  }

  .chat-header p {
    margin-top: 5px;
    font-size: 13px;
  }

  .chat-body {
    padding: 12px;
  }

  .chat-body p {
    margin: 0 0 10px;
    font-size: 15px;
    color: #333;
  }

  .chat-body input {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    font-size: 14px;
  }

  .chat-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3fd97f;
    color: white;
    text-decoration: none;
    padding: 12px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    transition: background 0.3s ease;
  }

  .chat-button:hover {
    background-color: #34c570;
  }

  .chat-button img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }
</style>

<script>
  function toggleChatbox() {
    var box = document.getElementById('whatsappChatbox');
    box.style.display = (box.style.display === 'none') ? 'block' : 'none';
  }

  function startWhatsAppChat() {
    var userInput = document.getElementById('userMessage').value;
    var message = encodeURIComponent(userInput.trim() || "Olá");
    var phone = "551151986434";
    window.open(`https://api.whatsapp.com/send?phone=${phone}&text=${message}`, '_blank');
  }
</script>

💬 Como criar botão flutuante WhatsApp – Exemplos práticos com código

Se você está buscando como criar botão flutuante WhatsApp para seu site, está no lugar certo. Neste artigo, apresentamos diversos modelos prontos, com códigos completos em HTML, CSS e JavaScript, para facilitar a integração com qualquer tipo de site, mesmo sem usar WordPress.

A seguir, confira os principais tipos de botões que você pode implementar:

✅ Botão flutuante simples com ícone de WhatsApp

O modelo mais básico e eficaz é o botão flutuante com o ícone do WhatsApp, posicionado no canto inferior da tela. É ideal para quem quer uma solução rápida, funcional e visualmente leve. Também mostramos uma versão com efeito pulsante animado, que ajuda a chamar a atenção do visitante e aumentar as conversões.

✅ Botão flutuante com texto “WhatsApp” (150x50px)

Outra variação que ensinamos é o botão com tamanho fixo de 150×50 pixels e o texto “WhatsApp”. Esse estilo se destaca por ser mais direto e amigável, ideal para sites institucionais ou páginas de vendas. O botão pode ser personalizado com bordas arredondadas, cores, hover effects e também em versões com ou sem efeito de pulsação.

✅ Botão que abre caixinha de atendimento estilo chat

Se você quer ir além do básico e criar algo mais interativo, também mostramos como criar botão flutuante WhatsApp com caixinha de atendimento. Nesse modelo, ao clicar no botão flutuante, uma janela tipo chat é exibida, com:

  • Um campo para o visitante digitar a mensagem.

  • Botão “Iniciar conversa” que envia a mensagem direto para o WhatsApp.

  • Botão ❌ para fechar a caixinha.

Esse tipo de interface oferece uma experiência de atendimento mais personalizada e profissional, ideal para empresas, lojas online, prestadores de serviço e agências.

🛠️ Códigos simples, responsivos e personalizáveis

Todos os exemplos ensinados neste artigo sobre como criar botão flutuante WhatsApp são:

  • Compatíveis com qualquer site (HTML puro).

  • 100% personalizáveis (cores, posição, animações, textos).

  • Responsivos (funcionam bem em desktop e mobile).

Você pode adaptar os botões conforme o seu layout, objetivo ou identidade visual — tudo sem depender de plugins externos ou plataformas específicas.

📈 Por que usar um botão flutuante do WhatsApp?

Adicionar um botão flutuante WhatsApp ao seu site permite:

  • Aumentar os contatos recebidos.

  • Reduzir atrito no atendimento.

  • Melhorar a experiência do usuário.

  • Gerar mais conversões e vendas.

Além disso, com a estrutura que ensinamos, você pode incluir elementos extras como status de atendimento, múltiplos números, integração com chatbot, visibilidade por horário e muito mais.

📝 Conclusão

Agora que você aprendeu como criar botão flutuante WhatsApp com diferentes estilos e funcionalidades, basta escolher o modelo que melhor atende sua necessidade e inserir o código no seu site. Se preferir, você também pode combinar estilos ou evoluir a lógica com novas interações e design avançado.

Se quiser ajuda para gerar botões personalizados com nome do atendente, horários, ou integração com APIs, deixe nos comentários ou entre em contato.

 

Tags:

Share Article

Follow Me Written By

Thiago Moreira

Estrategista de redes sociais renomado, com resultados impressionantes: mais de seis milhões de seguidores conquistados para seus clientes. Especialista em estratégias orgânicas, tráfego pago e Inbound Marketing, Thiago combina criatividade e análise de dados para impulsionar marcas e gerar crescimento sustentável nas plataformas digitais.

Outros artigos