En este tutorial gratuito de OV DIVI aprenderás cómo agregar botón flotante de WhatsApp Chat en página web creada con divi y wordpress sin plugins.
Este tutorial me lo han pedido mucho y hasta el día de hoy me he tomado el tiempo para realizarlo.
Entiendo que existen algunos plugins para incrustar un botón flotante de WhatsApp en tu sitio web, pero en este tutorial la idea es que no instales un plugin más para agregar esta funcionalidad ya que no hace falta agregar un plugin cuándo podemos lograr un resultado muy bueno solamente con algunos fragmentos de código que te dejaré más abajo.
Esta burbuja flotante de whatsapp la vamos a insertar con una librería llamada Floating WhatsApp, Esta librería es simple, ligera y fácil de integrar con divi y wordpress, solo vamos a necesitar los siguientes fragmentos para su integración:
1. Enlazar CSS Floating WhatsApp:
<!-- Enlazar CSS Floating WhatsApp --> <link rel="stylesheet" href="https://rawcdn.githack.com/jerfeson/floating-whatsapp/0310b4cd88e9e55dc637d1466670da26b645ae49/floating-wpp.min.css">
2. Enlazar JS Floating WhatsApp:
<!-- Enlazar JS Floating WhatsApp --> <script type="text/javascript" src="https://rawcdn.githack.com/jerfeson/floating-whatsapp/0310b4cd88e9e55dc637d1466670da26b645ae49/floating-wpp.min.js"></script>
3. HTML Floating WhatsApp:
<div id="WABoton"></div>
4. Inicializar librería Floating WhatsApp js:
<!-- Inicializar librería Floating WhatsApp -->
<script>
jQuery(document).ready(function($){
$('#WABoton').floatingWhatsApp({
phone: '+009876543210', // Número WhatsApp Business
popupMessage: 'Hola 👋 ¿Cómo podemos ayudarte?', // Mensaje pop up
message: "Hola John...", // Mensaje por defecto
showPopup: true, // Habilita el pop up
headerTitle: 'WhatsApp Chat', // Título del header
headerColor: '#25D366', // Color del header
buttonImage: '<img src="https://rawcdn.githack.com/rafaelbotazini/floating-whatsapp/3d18b26d5c7d430a1ab0b664f8ca6b69014aed68/whatsapp.svg" />', // Icono WhatsApp
size: '72px', // Tamaño del icono
//backgroundColor: '#00000', // Color de fondo del botón
position: "right", // Posición del icono
avatar: 'https://www.w3schools.com/howto/img_avatar.png', // URL imagen avatar
avatarName: 'John Doe', // Nombre del avatar
avatarRole: 'Soporte', // Rol del avatar
//autoOpenTimeout: 3000,
zIndex: '99999',
});
});
</script>
Y esto es todo. Para que aprendas dónde colocar cada uno de los fragmentos de código te invito a darle play al video.
Recuerda que si al final tienes alguna duda puedes dejarla en los comentarios y yo haré mi mayor esfuerzo para responderte lo más pronto.
¡Genial! un abrazo.
Hola, Oscar
Muy buen tutorial, como lo acostumbras. Implementé esta librería pero veo que en el móvil no funciona. ¿Habrá alguna librería para hacerlo funcionar en el móvil?
Saludos
Hola Jorge, muchas gracias.
Esta librería también funciona en móvil ¿Te da algún error?
Hola, Oscar
No, ya funciona en el móvil, minutos después de que te escribí el comentario. Y funciona genial. Yo creo que era tema de caché, aunque había limpiado la caché y probado y no funcionó, pero lo hizo yo creo que un minuto después de que te escribí. Bueno, hasta quité el Click to Chat que es el plugin que usaba de dos de mis paginas y usé la librería.
Gracias Oscar, felicidades por tu canal y tus tutoriales.
Excelente Jorge, muchas gracias por aclararlo 🙂 Esto puedo ayudar a más personas.
Un abrazo.
Hola Oscar, si yo quisiera poner el logo de whatsapp en una página en especial, que puedo hacer?
Hola Christian, si quieres agregar el botón solamente en una página lo ideal es hacerlo desde el generador de temas en un pie de página personalizado.
Solamente lo que tienes que hacer es agregar los códigos en un módulo código. Y por cierto el layout o plantilla personalizada se lo debes asignar a la página dónde deseas el icono.
Hola Oscar revisando el ejercicio de este tema veo que no me guarda los cambios en divi en la sección Agregar código al sabes porque?
Hola Rafael, no tengo idea de que puede estar pasando. Podría ser un bug de tu versión de divi o problemas de servidor. Revisa en Divi > Support Center que tengas todo OK en el estado del sistema.
Oscar que tal, espero estés bien. Te quiero preguntar por este mismo problema, ver si por favor me puedes ayudar, gracias. Y si tengo todo en verde en SUPPORT CENTER.
Hola Cristóbal, al parecer es un bug de divi, actualiza a la última versión para comprobar si el problema persiste por fa.
Quedo pendiente.
Rafael que tal, te pregunto si pudiste resolver tu problema, que tengo el mismo. Y tengo todo en verde en SUPPORT CENTER.
Por favor ayuda, gracias.
He replicado el ejercicio en una instalación nueva de divi y me funciona correctamente. Si quieres puedo revisar tu sitio, solo escríbeme por fb messenger.
Oscar gracias por tu tiempo. Al final lo resolví con agregar los códigos a un modulo CODE en DIVI.
Gracias por todo tu tiempo!
Hola, gracias por el tutorial, funciona de maravilla. Una duda, como puedo cambiar la posición de la burbuja flotante, igual a la derecha pero más arriba, cuál sería el valor o instrucción para el atributo position?
Hola Luz, gracias también a ti.
Pega este código en Divi > Opciones del tema / General / CSS Personalizado:
.floating-wpp { bottom: 40px !important; right: 40px !important; }Puedes jugar con los valores (40px)
Hola Oscar buen dia, tengo el mismo problema de Cristóbal, no me guarda los cambios
Gracias
Hola Sebastian, acabo de realizar nuevamente el ejercicio en una instalación nueva de divi y me va genial.
Escríbeme por FB Messenger y revisamos que sucede.
Extraordinario apoyo el que nos das y por el cual te agradezco enormemente.
Mucho te debemos los emprendedores que estamos esforzándonos por hacer nuestras páginas web más atractivas y empoderadas.
Gracias Oscar por tu apoyo…!!!
Gracias también a ustedes Angel. Te deseo mucho éxito en tus proyectos.
¡Abrazo enorme!
Hola Óscar… me gustaría saber si hay manera de poner varios chats al tiempo, al menos 2 o tres números distintos para direccionar personas distintas.
muchas gracias
Hola Alexander, sí es posible pero NO con este método que implementamos aquí. Más adelante haré un tutorial para un multi chat y multi plataforma (telegram, whatsapp, etc.).
Ok… gracias y estaré pendiente
Gracias por todo Oscar
Saludos Camilo 🙂
Hola Óscar. Gracias por toda la información que brindas.
Tengo una pregunta, quiero implementar este botón en una página específica, no quiero que se vea en todo el sitio, ¿es eso posible?
Hola Andrés, solamente habilita el constructor visual en la página dónde desees implementar este chat e insertas los códigos en un un módulo código.
Buenas tardes Oscar, soy Jorge; instale todos los codigos y no se ve en el sitio ni en el movil, si se ve ene el constructor, hice la limpieza del cache varias veces y no logro que se vea en el front-end — me esta faltando habilitar algo?
Hola Jorge, revisa que tenga comillas simples y después comillas dobles la siguiente línea del código:
No puede tener comillas simples dos veces o comillas dobles dos veces. Para encerrar unas comillas dentro de otra debes usar simples con dobles.
Hola Oscar gusto en saludarte.
tengo el mismo problema, pero no logre solucionarlo. se ven dos iconos uno encima del otro en el constructor y en la parte frontal no aparece.
Cual sera el error?
eres un crack amigo la verdad muchas gracias por todo este contenido y facilidad en todo, espero que te hagas un curso de códigos y JavaScript, jejejejej saludos
Muchas gracias John. Sii sería genial un curso de código para divi 🙂
Lo voy a valorar para más adelante.
¡Saludos!
Hola, una consulta, sera posible colocarlo pero que se active sólo al hacer click, con el comportamiento del hover es un poco tedioso si además tenemos el carrito flotante (que me encanta y lo he hecho con tus tutos premium), porque a veces se activa sin tener en realidad intención de activarlo.
Hola Rosa, te entiendo, pero la librería solamente funciona haciendo tap para dispositivos móviles. En escritorio es al pasar el cursor 🙁
Hola Oscar tengo un problema con mi sitio no me aparece nada. ya le revise todo y seguí paso a paso y bla verdad es que no me aparece nada. Lo raro es que en la parte donde se pone el código en el body cada vez que guardo y reviso en la parte frontal el código se desaparece. Ya revise todo y no entiendo porque el código desaparece del body. Gracias por tu pronta contestación
Hola Guido, seguramente es un bug de la versión de divi que tienes. Actualiza a la versión más reciente. También puedes colocar ese mismo código dentro de tu página en un módulo blog. 😀
Excelente información, muy clara, bien explicada y lo mejor es que funciona a la perfección.
Muchas gracias
Genial Juan 🙂 muchas gracias, seguimos con todo. 🙌
Hola amigo, tengo una página pero no utilizo wordpress sino bsale. para integrar el boton flotante debo descargar las librerias y luego enlazarlas correcto?
Hola qué tal, la verdad no conozco bsale, pero la librería puede ser integrada a cualquier sitio web siempre y cuando tengas la manera de insertar los scripts. Solamente tienes que enlazar los mismos códigos pero en un apartado que tenga tu plataforma.
CUANDO hablas de instertar el script es cargar las librerias tal como en el video correcto? ya que las librerias estan en internet correcto?
Me funciona genial. Gracias por compartir tus conocimientos.
Excelente. Funciona al 100 en pc, tablet y smartphone. Muchas gracias.
Excelente Eduardo, me alegro saber que funciona 😀 ¡Un abrazo!
Hola si pongo espacios en el nombre de avatar o en el rol de avatar me genera 2 lineas de texto, sabés como puedo solucionarlo, gracias
Hola Carlos, no he tenido ese inconveniente, quizá tu nombre es demasiado largo o no sé. ¿Cuál es la url de tu web?
Hola, mi nombre es allan, y tengo el mismo problema, pero también al ver la web desde dispositivos móviles, la imagen de wzp se corre
Hola Allan, compárteme la url de tu web para ver que está pasando.
Hola oscar…he conseguido hacerlo todo pero la version de whatsup de sobremesa me dice que el numero de telefono no es correcto, en cambio en movil me lo envia sin prolema. Gracias por todo
Hola Maria, que raro, debe funcionar para ambas versiones 🙁
Hola Oscar, el tutorial es perfecto, te felicito. Tengo una duda, ¿qué codigo deberíamos introducir para que el botón flotante sólo se viera en dispositivos móviles? Muchas gracias.
Un saludo
Hola Xavier muchas gracias.
El código debe ser este:
@media only screen and (min-width: 768px) { #WABoton { display: none; } }Hola Oscar, buenas tardes, como puedo agregar un salto linea? Esto en la linea 11 (popupMessage)
Hola Jorge, no estoy seguro que sea posible pero puedes intentar con este html: <br>
Hola Óscar. Gracias por toda el tutorial, a mi me estaba funcionando y ahora dejó de funcionar volvi a seguir todos los pasos y nada.
Hola Oscar no me funciono ya revise las comillas limpie el cache y nada
Hola Jesús, puede ser por la versión de divi 4.10.x. Dirigete a divi > Opciones del tema > General > Performance y deshabilita la opción: Defer jQuery And jQuery Migrate
Hola, gracias con esto me soluciono el inconveniente que lo veia en el constructor pero no en la pagina en si.
muchas gracias.
Primeramente Gracias por compartir tu trabajo con la comunidad. Queria preguntarte: Despues de la ultima actualizacion de Divi el enlace de la libreria se rompio y ya no se muestra. Alguna solucion ? Gracias de antemano
Hola Yoan qué tal, dirigete a divi > Opciones del tema > General > Performance y deshabilita la opción: Defer jQuery And jQuery Migrate
Con eso debe seguir funcionando este icono de WA 🙂
Hola Oscar.
Hace unos días lo incorpore y funcionaba de maravilla.
Ahora ya no funciona – no se ve el botón de WhatsApp.
Hubo alguna actualización?
Jhonny, si actualizaste a Divi 4.10.x y ahora ya no funciona, dirigete a divi > Opciones del tema > General > Performance y deshabilita la opción: Defer jQuery And jQuery Migrate
Hola Oscar.
Muchas gracias, realice lo que indicas y si funcionó
🤝👍
Hola Óscar, que tal
He intentado implementar el botón y he comprobado que el script de iniciar la librería no me funciona, se mueve el menú y desaparece el logo y no aparece el botón. He probado a apagar la carga de javascript, el css dynamico y el css critical de la configuración performance, ah y defer jQuery and jquery migrate apagado también y nada.
de dónde puede venir?
Hola Ruben, en la mayoría de los casos desactivando el defer jQuery and jquery migrate ha quedado. Si gustas compárteme tu url por correo y lo reviso 🙂
Lo acabo de implementar en 2 webs.
Espectacular!
Gracias
¡Genial José! 😍
el boton funciona perfecto, pero tengo problema, me tira error a la imagen que tengo como logo en una pagina de mi sitio
Revisa lo de las comillas que le comenté a Jorge Omar más arribita 👆
Saludos Oscar excelente tu trabajo mira pertenezco a la academia y realice el «Menu tipo app movil con popups» entonce tengo el menu en la parte inferior y el carrito flotante donde inserte mucho codigo en «opciones del tema/general/css». como puedo hacer para que el boton de whatsapp me quede arriba del menu, ya que en movil se enciman. Gracias y felicitaciones todo me ha funcionado perfectamente
Hola Aaron, en los ajustes de la página > Avanzado > CSS Personalizado pega este código:
@media only screen and (min-width: 768px) { .floating-wpp { bottom: 40px !important; } }Puedes cambiar el valor de 40px para adaptarlo a tus necesidades.
Gracias, Oscar.
Nos estaba funcionando genial, pero a la hora que puse el certificado y actualice todo a «https» en lugar de «http» desapareció, ¿A alguien le ha pasado algo así?
Qué extraño amigo, ¿No será porque actualizaste la versión de divi? Si tienes la última versión de divi (4.10.x) dirigete a divi > Opciones del tema > General > Performance y deshabilita la opción: Defer jQuery And jQuery Migrate.
A ver si esto ayuda 🙂
Muy buen tutorial, gracias por continuar creando contenido de calidad. Actualmente estoy terminado uno de tus cursos y me ha encantado mucho.
Ya me he motivado a adquirir los tutoriales exclusivos para seguir aprendiendo más de DIvi y WordPress.
Muchas gracias por las palabras y el apoyo Emmanuel, seguiremos así; creando más y más contenido tanto gratuito cómo premium.
Un abrazo 🤗
Hola,
He seguido el paso a paso y no me ha dado ningun problema pero no veo en mis páginas. El divi esta actualizado a la última versión??
Un saludo
Alfredo
Hola Alfredo, dirígete a Divi > Opciones del tema > Performance y deshabilita: Defer jQuery And jQuery Migrate