Icono flotante de WhatsApp en una página
Cuando tienes una empresa de servicios, es muy importante que los clientes puedan tener contacto contigo de una manera rápida y que se ajuste y se acomode a los requerimientos del cliente.
Por esta razón, en muchas páginas web podrás ver un icono flotante de WhatsApp donde solo hay que pincharlo y establece un enlace directo hacia tu número con un mensaje predeterminado de WhatsApp.
En este post vamos a tratar de agregar un icono flotante de WhatsApp, pero sin la necesidad de utilizar un plugin.
Si quieres, puedes ver el siguiente video en mi canal de YouTube O puedes seguir leyendo el post para los pasos de cómo agregar el icono flotante de WhatsApp.
¿Por qué no es recomendable utilizar muchos plugins en WordPress?
Cuando utilizas plugins en tu página de WordPress, estás expuesto a vulnerabilidades de seguridad, esto se debe a que tienes que insertar dentro de tus archivos códigos de terceros. Estos códigos podrían dejar alguna brecha para que grupos de personas malintencionadas tengan acceso a los archivos de tu página web y, una vez dentro, pueden utilizarlo para diversas razones.
Es recomendable cuando vas a utilizar un plugin que verifiques que sea de una empresa o una persona reconocida y que tenga buenas recomendaciones por parte de los usuarios.
Siempre que sea posible, utiliza código CSS, HTML y JavaScript creado por ti mismo, así disminuirá la probabilidad de algún ataque a tu página web.
Yo recomiendo utilizar los plugins cuando sean estrictamente necesarios o que no tengas conocimiento de cómo hacerlo, pero puedes buscar en internet a ver si alguien te puede explicar cómo hacerlo.
Por lo general, no me gusta utilizar muchos plugins en mi WordPress, a menos que sean estrictamente necesarios. Sabemos que al agregar un plugin con códigos de tercero podríamos estar expuestos a vulnerabilidad de seguridad, debido a que esto establece una ventana entre el desarrollar el plugin y nosotros. Si por alguna razón el desarrollador dejara algunos códigos descubiertos, podrían ser utilizados por malintencionados para entrar a tu web y hacer lo que sería todo.
Por qué agregar un icono de WhatsApp en mi web
Un icono de WhatsApp en tu página web es muy importante. Desde mi punto de vista, la importancia de agregar un icono de WhatsApp a nuestra página web es para que los clientes puedan tener un acceso rápido para contactarse con nosotros. Algo muy importante es que la forma en que los clientes se contacten con nosotros sea de la manera rápida y fácil y amigable con los requerimientos del cliente.
Insertar un icono de WhatsApp flotante en WordPress, sin necesidad de plugins
Ahora vamos a hablar de cómo agregar el icono de WhatsApp. Es importante mencionar que en este post solo agregaremos el icono a una sola página que puedes utilizar como una página de aterrizaje o landing page.
Si quieres agregar el icono en todas las páginas, te dejo un enlace a otro post que he publicado.
Inserta WhatsApp a una web sin Plugin
Pasos para agregar el icono de WhatsApp
1. Vamos a hacer ir a nuestro editor de Gutenberg y agregar un icono social de WhatsApp; a este icono le colocaremos un enlace, el cual generaremos en el siguiente paso. Recuerda personalizar el botón, darle las dimensiones que prefieras.
2. Ahora vamos a dirigirnos al portal web wa.link. Aquí agregaremos nuestro número de WhatsApp y un mensaje personalizado y le daremos a generar. El enlace generado lo vamos a copiar y lo pondremos en el icono de WhatsApp que hemos creado en WordPress.
3. En el siguiente paso: tendremos que agregar una clase CSS personalizada a nuestro botón; esto se agrega en la opción avanzada del widget que estamos trabajando, en este caso el botón de WhatsApp del widget «Iconos sociales». En nuestro caso agregamos la clase ‘whastaapp-flotante’.
4. El cuarto y último paso consiste en ingresar al CSS personalizado y desplazarse hasta la opción de agregar CSS personalizado. Aquí agregaremos los códigos que te deja a continuación,recuerda sustituir whastaapp-flotante por la clase CSS que has colocado.
Códigos CSS para el botón flotante
.whastaapp-flotante
{position:fixed;
bottom: 0px;
z-index: 2; }Con esto será suficiente para que aparezca el icono flotante en tu página de WhatsApp. Cuando le des un clip, debería enviarte al WhatsApp con el mensaje personalizado que creamos en el paso número 2.
Video sobre cómo agregar icono WhatsApp
Aquí le dejo este corto video instructivo solo como hacer todo el procedimiento anterior.