Cuándo 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 plugins.

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 bueno utilizar muchos plugins en WordPress?

Cuando utilizas plugins en tu página de WordPress estás expuesto a vulnerabilidades de seguridad, ssto 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 mal intencionadas 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 plugins 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 necesario 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 no sean estrictamente necesario, sabemos que al agregar un plugins con códigos de tercero podríamos estar expuestos a vulnerabilidad de seguridad, debido a que esto establece una ventana entre el desarrollar el plugins 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.

Porque 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 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 la 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 Plugins

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.  Recuérdate personalizar el botón, darle las dimensiones que prefiere.

2- Ahora vamos a dirigirnos al portal web wa.link  y 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- 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’.

El cuarto, y último paso consiste en ingresar ar 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 colocar 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.


Publicaciones Similares