Pular para o conteúdo
  • Não há sugestões porque o campo de pesquisa está em branco.

Como adicionar o botão flutuante do Whatsapp no site?

É possível adicionar o botão flutuante do WhatsApp no seu site, via Google Tag Manager, para isso, inicialmente é necessário que o seu site esteja integrado com o GTM. Caso ainda não esteja, confira os passos para integração em: Como integrar com o Google Tag Manager?

 

Passo a passo para adicionar o botão flutuante do Whatsapp:

1. Dentro do painel do Google Tag Manager, selecione a opção "Adicionar uma nova tag";

2. Clique em "Configurações da tag".

 
3. Em "Escolha o tipo de tag", busque por "HTML personalizado";
 

4. Copie o código abaixo e cole no campo em branco;

<a
  href="https://wa.me/55(aqui seu numero com ddd | tudo junto sem os parenteses)"
  style="
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 0.8rem;
    right: 0.8rem;
    background-color: #25d366;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 1px 1px 2px #888;
    z-index: 101;
    transition: all 0.2s ease-in-out;
  "
  id="whatsappButton"
  target="_blank"
>
  <i style="margin-top: 16px" class="fab fa-whatsapp"></i>
</a>
<style>
  @media (max-width: 768px) {
    #whatsappButton {
      bottom: 75px !important;
    }
  }
</style>
<script>
  (function moveWhatsappButtonOnScroll() {
    var button = document.getElementById("whatsappButton");
    if (!button || !window.scrollTopThreshold) return;
    window.addEventListener("scroll", function scrollListener() {
      var winScroll =
        document.body.scrollTop || document.documentElement.scrollTop;
      button.style.right =
        winScroll > window.scrollTopThreshold ? "5rem" : ".8rem";
    });
  })();
</script>

Obs: Não esqueça de alterar o número de telefone no espaço indicado. 

 
 
5. Clique em "Acionamento";
 

6. Clique em "All pages";

7. Clique em "Salvar";

8. Clique em "Enviar" para encaminhar a nova tag adicionada para seu site;

9. Clique em "Publicar";

10. Caso apareça a opção abaixo, basta clicar em "Continuar"

Pronto! Tag do botão flutuante adicionada. 😊