¿Quieres poner un botón flotante de WhatsApp en tu página Web? ¡Solo copia este código y ya lo tienes listo!
Pues hace poco decidí poner un botón flotante en uno de mis sitios web, para que los clientes puedan contactarme de manera mucho más fácil y cómoda. Así que me puse a investigar y descubrí que había cientos de plugins que permiten hacer eso.
En vez de decantarme por un plugin para WordPress, decidí copiar este código CSS para añadir el botón flotante de WhatsApp. La verdad es que no tengo ni idea de dónde acabé sacando el código. Pero bueno, yo te lo comparto igualmente.
Añadiendo el Botón Flotante de WhatsApp en WordPress CSS
Para añadir este botón flotante en WordPress, deberemos irnos a Apariencia → Personalizar → CSS y le pegamos todo este código.
/**botonwhatsapp**/
.botonwhatsapp{
position:fixed;
width:60px;
height:60px;
bottom:20px;
left:30px;
background-color:#25d366;
color:#FFF;
border-radius:50px;
text-align:center;
font-size:30px;
box-shadow: 2px 2px 3px #999;
z-index:100;
}
.botonwhatsapp:hover {
text-decoration: none;
color: #25d366;
background-color:#fff;
}
.botonwhatsapp:active {
text-decoration: none;
color: #fff;
background-color:#25d366;
}
.my-float{
margin-top:16px;
}
Después tenemos que irnos a Apariencia → Editor de temas → header.php y pegar el siguiente código.
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css»>
<a href=»AQUI TU TEXTO» class=»botonwhatsapp» target=»_blank»>
<i class=»fa fa-whatsapp my-float»></i>
</a>
Como cambiar el número y mensaje del botón flotante de WhatsApp
En el cuadro de abajo, solo tendrás que escribir el número de WhatsApp que quieras utilizar y escribir el primer mensaje, que quieres que te escriban tus clientes. Después sustituyes el texto que pone <aqui tu texto> del código que te he dado y listo.