Botão Flutuante Whatsapp

Botão Flutuante Whatsapp

Neste artigo vamos criar um botão do WhatsApp Fixo com css.

Gere o código HTML e conquiste clientes com o WhatsApp em seu site · Número de WhatsApp para o botão.

Vamos começar com link com a classe (.btn-whatsapp) no Html

Cole este link no final do Rodapé o seu site.

Código Html:

<!--Botão whatsapp-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="https://www.seusite.com.br/whatsapp/" target="_blank">
    <div class="btn-whatsapp pulsaDelay"><i class="fa fa-whatsapp"></i></div>
</a>
<!--Botão whatsapp-->

Código Css:

.btn-whatsapp a {

	color:#fff; 
	text-decoration:none; 
	display:block; 
}

.btn-whatsapp {
    
    position:fixed; 
    right:75px; 
    bottom:30px; 
    transform: translate(-50%, -50%);  
    background-color:rgb(37, 211, 102); 
    width:60px; height:60px; 
    text-align:center; 
    line-height:58px; 
    font-size:1.8em; 
    color:#ffffff; 
    font-weight:100; 
    border-radius:50%; 
}

.btn-whatsapp:before,
.btn-whatsapp:after

{

	content: '';
    display:block;
    position: absolute;
    border-radius:50%;
    border:1px solid #25d366;
    left: -20px;
    right: -20px;
    bottom: -20px;
    top: -20px;
    animation: animate 1.5s linear infinite;
    opacity:0;
    backface-visibility:hidden;    
}

.pulsaDelay:after { animation-delay: .5s; }

@keyframes animate {


   0%   { transform: scale(0.5); opacity:0; }
   50%  { opacity:1; }
   100% { transform: scale(1.2); opacity:0; }

}

Crie uma pasta chamada whatsapp dentro dessa pasta vamos criar um arquivo index.php com o seguinte código abaixo.

<?php

  $iphone  = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
  $android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
  $palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
  $berry   = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
  $ipod    = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");

  //Verifique se é um celular
  if ($iphone || $android || $palmpre || $ipod || $berry == true){

    header('Location: https://api.whatsapp.com/send?phone=5521900000000');

  }

  //Todos os outros
  else {
    
    header('Location: https://web.whatsapp.com/send?phone=5521900000000');

  }

?>

//Explicando o código se cair nas variáveis: Entre $iphone há $berry 
//É um dispositivo móvel. ou seja, Celular ou Tablet.
 
  if ($iphone || $android || $palmpre || $ipod || $berry == true){

    header('Location: https://api.whatsapp.com/send?phone=5521900000000');

  }

  //Caso não identifique as variáveis a cima é porque é desktop.
  else {
    
    header('Location: https://web.whatsapp.com/send?phone=5521900000000');

  }

//OBSERVAÇÃO: não se esqueça de por numero do whatsapp nas duas URL ACIMA
//api.whatsapp
//web.whatsapp

Baixar Código Veja Funcionando