👉¡Agregar botón de WhatsApp flotante en Wordpress con Elementor!

Hola amigos de Marieú Technology Corporation, ¡agregar botón de WhatsApp en Elementor y WordPress! En efecto, en esta guía, paso a paso, aprenderás a agregar un botón flotante con animación, crear la API de WhatsApp, cambiar contenido, estilo y posición del ícono.

Elementor es un maquetador de páginas  web o «page builde». Permite crear y diseñar páginas web mediante plantillas, widgets o bloques predefinidos. La instalación del plugin de Elementor se realiza por medio de WordPress. Donde, encontrarás una versión gratuita y otra de pago, para este último, con mayor cantidad de widgets y plantillas.

¿Cómo agregar un botón de WhatsApp en Wordpress con Elementor?

Por un lado, tenemos el Wordpress, donde nosotros tenemos que tener actualizado el plugin de Elementor. Dentro de Elementor, nosotros vamos a crear una nueva plantilla desde la opción de plantillas, slash y «pop-ups». Dentro de estos «pop-ups», nosotros vamos a crear esta nueva plantilla, agregar un nombre y vamos a insertar el icono de WhatsApp. Vamos a crear la API de WhatsApp. Después, vamos a cambiar el contenido, el estilo y la posición del icono de WhatsApp. Vamos a ubicarlo, exactamente, en la parte inferior derecha de nuestro sitio web.

Seguidamente, vamos a entrar a las condiciones y disparadores del «pop-up». Vamos a realizar algunas configuraciones, para que se evite cerrarse este icono de WhatsApp.

Diagrama de arquitectura - Agregar botón de Whatsapp en página web con Wordpress y Elementor.
Fuente: Propia, mediante software Miro.

Entonces, ya estamos en WordPress, nosotros nos vamos a ubicar dentro de plantillas. Vamos a dirigirnos a «pop-ups», colocamos añadir nueva, elegimos el tipo de plantilla. En este caso, sería un «pop-up» y vamos a colocarle «botón de WhatsApp», ponemos crear plantilla. Nos van a salir varios «pop-ups» dentro de la biblioteca de Elementor. Para este caso, nosotros solamente lo vamos a cerrar y vamos a crear uno nuevo.

Una vez aquí, nosotros vamos a agregar el widget de ícono. Nos vamos a la sección de widget y ponemos icono: seleccionamos, arrastramos y soltamos, «drag and drop». Por defecto, se habilita un icono de una «star» o una estrella. Seleccionamos el icono, se nos apertura la biblioteca de todos los iconos. El icono que vamos a utilizar será el primero, ponemos insertar.

Para la creación de la API nos vamos a ubicar dentro de enlaces, abrimos las etiquetas dinámicas y vamos a buscar esta etiqueta dinámica de «contact URL». Una vez habilitado ahí, abrimos el «contact URL» y vamos a seleccionar tipo WhatsApp. Asignamos el número, vamos a colocar el número de Marieú Corp. Alguna recomendación, no incluyamos un signo más y tampoco incluyamos paréntesis. Primero es 51, en el caso de Perú; ya para otros países, de repente estamos en Canadá, en México Brasil, lo podemos incluir cada uno de sus códigos: Brasil 55, México 52. Seguidamente, el código del prefijo telefónico, incluimos el número de celular. Ya con esta prueba, seleccionamos el icono y nos direcciona al WhatsApp de Marieú Corp.

Algunas recomendaciones adicionales aquí, para que no se cierre la ventana, abrimos en una nueva ventana. Si nosotros queríamos agregar algún texto, de repente algunos emojis, tendríamos que hacerlo desde otra plataforma. Esta plataforma de «Wa link», nos permite a nosotros crear los enlaces para WhatsApp, con algún texto o algún emoji predeterminados, antes de enviar al cliente. Pegamos el número telefónico de Marieú Corp, agregamos un pequeño texto y aquí, al final, agregar un emoji. La vista previa lo tenemos aquí y seleccionamos «generar mi wa.link». Ponemos «vista previa» y tenemos cómo quedaría el mensaje. Finalmente, generamos el «wa.link» y se genera un enlace, para que puedas simplemente copiar el link, colocamos directamente el enlace.

Vamos a cambiar la vista, dentro de contenido, nosotros vamos a dirigirnos a «ver» y vamos a asignarle una vista en modo apilado. La forma en modo círculo y nos vamos a dirigir a estilo. Dentro de estilo, nosotros vamos a colocar el color característico de WhatsApp. Abrimos el color principal y pegamos en el código hexadecimal aquí. El color secundario tendría que ser, en este caso, blanco. Vamos a cambiarlo, todo hexadecimal en F. Tamaño, lo vamos a dejar en 25, tamaño estándar, ustedes lo pueden ir variando.

eEntonces, seleccionamos «al pasar el cursor» y le vamos a asignar el «color principal» y «secundario». Ponemos el mismo código hexadecimal, el color secundario sería blanco. Dentro de la animación, nosotros vamos a asignar una animación tipo «push». Si nos acercamos, tenemos un efecto de empuje. El tamaño también lo vamos a dejar en 25. Vamos a cambiar la posición para que esté en la parte inferior derecha. Para eso, nosotros nos vamos a ir a ajustes, dentro de ajustes, vamos a ubicarlo a la derecha y, a nivel de vertical, abajo.

Entonces, ya tenemos ubicado nuestro icono en la parte inferior derecha. Vamos a cambiar el «width» o el ancho, vamos a colocarle unos 100 y ponemos «enter», ahí vemos que se reduce. Vamos a quitarle el «overlay», ese fondo negro que ustedes están viendo ahí, y vamos a quitarle la opción de «close button», es este cierre que tienen aquí. Desactivamos el botón de «close button». Dento ajustes de «pop-up», nosotros vamos a agregar un fundido hacia la derecha o «fade and right». En la duración de esta animación lo vamos a dejar por defecto 1.2 y, dentro de avanzado, nosotros vamos a evitar que este «pop-up» se cierre.

Entonces, nosotros vamos activar estas dos opciones «prevenir que se cierre con la superposición» o el «overlay» y vamos a «prevenir que se cierre cuando el usuario hace click en ESC» o la tecla escape. Finalmente, ya para el fondo cuadrado, nosotros nos vamos a ir a estilo y, dentro de estilo, vamos a colocar un fondo transparente. Colocamos color y ponemos transparente. Ustedes lo pueden ubicar con este código hexadecimal, son seis «F» y dos ceros al final. Vamos a quitar la sombra, le vamos a colocar sombra de la caja «por defecto» y ahí vemos que ya el fondo se desapareció.

Agregar botón de Whatsapp flotante en Wordpress con Elementor.
Fuente: Propia, mediante WordPress con Elementor.

Resultados Finales

Esas condiciones se habilitan cuando nosotros queremos publicarlo. Si seleccionamos publicar, se nos habilita la ventana de «publish settings» o configuración de publicación. Dentro de condiciones, agregamos nueva condición: siempre que esté incluido en todos los sitios. Ya para los «triggers» o disparadores. Activamos el «one page load» y vamos a colocar un segundo, es decir, que se inserte este «pop-up» de WhatsApp dentro de un segundo. Colocamos «next» y, finalmente, «save and Close».

Dentro de principal, ahí lo tenemos, si vamos a servicios, también se estaría cargando, ¡ahí está! Si seleccionamos, se abre una ventana nueva, tenemos nuestra API de WhatsApp. ¡Listo, gracias amigos de Marieú Technology Corporation!