Botón Flotante de WhatsApp para WordPress | Código CSS Gratis
¡Hola, SEONauta! ¿Quieres instalar un botón flotante de WhatsApp en tu página web? ¡Copia este código CSS y tendrás tu widget de contacto listo en minutos!
Hace poco decidí añadir un botón de WhatsApp flotante en uno de mis sitios web para facilitar que los clientes pudieran contactarme de forma rápida y cómoda. Tras investigar, descubrí que existen numerosos plugins para WordPress que permiten lograrlo.
Sin embargo, en lugar de instalar un plugin adicional, opté por implementar este código CSS ligero para el botón flotante. Aunque no recuerdo exactamente la fuente original del código, te lo comparto para que puedas utilizarlo sin complicaciones.
Cómo añadir el botón flotante de WhatsApp en WordPress con CSS
Para implementar este botón de contacto flotante en WordPress, accede a Apariencia → Personalizar → CSS adicional y pega el siguiente código:
/* Botón flotante de WhatsApp */
.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;
}
A continuación, dirígete a Apariencia → Editor de archivos del tema → header.php e inserta el siguiente código HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="https://wa.me/TU_NUMERO?text=TU_MENSAJE" class="botonwhatsapp" target="_blank">
<i class="fa fa-whatsapp my-float"></i>
</a>
Cómo configurar el número y mensaje del botón flotante de WhatsApp
En el generador siguiente, introduce el número de teléfono de WhatsApp que deseas utilizar y define el mensaje predeterminado que recibirás de tus clientes. Luego, sustituye el texto https://wa.me/TU_NUMERO?text=TU_MENSAJE en el código HTML proporcionado anteriormente:
Comentarios