Cerrar video

Cómo agregar botón flotante de WhatsApp Chat en página web creada con divi y wordpress sin plugins

por | Feb 9, 2021 | Tutorial gratuito | 158 Comentarios

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.

Cómo agregar botón flotante de WhatsApp Chat en página web creada con divi y wordpress sin plugins

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.

Tutoriales Relacionados

158 Comentarios

  1. Jorge

    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

    Responder
    • Oscar Viedma

      Hola Jorge, muchas gracias.

      Esta librería también funciona en móvil ¿Te da algún error?

      Responder
      • Jorge Salazar

        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.

        Responder
        • Oscar Viedma

          Excelente Jorge, muchas gracias por aclararlo 🙂 Esto puedo ayudar a más personas.

          Un abrazo.

          Responder
          • carlos

            Hola, muy buen tutorial gracias, no me funciona en movil, limpie cache pero nada, no se que mas hacer, gracias.

          • Oscar Viedma

            Hola Carlos, revisa el tema de las comillas que menciono en los comentarios. También las opciones de divi performance.

  2. Christian

    Hola Oscar, si yo quisiera poner el logo de whatsapp en una página en especial, que puedo hacer?

    Responder
    • Oscar Viedma

      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.

      Responder
  3. RAFAEL

    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?

    Responder
    • Oscar Viedma

      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.

      Responder
      • Cristóbal Pohlhammer

        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.

        Responder
        • Oscar Viedma

          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.

          Responder
    • Cristóbal Pohlhammer

      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.

      Responder
        • Cristobal

          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!

          Responder
          • Moliva

            hola, me encantan tus tutoriales, tengo una página con Divi, la verdad no se usarlo mucho, quisiera saber si existen temas diferentes para cambio

          • Oscar Viedma

            Hola Moliva, no entiendo bien tu pregunta amigo, a qué te refieres con temas diferentes para cambio?

  4. Luz

    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?

    Responder
    • Oscar Viedma

      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)

      Responder
  5. Sebastian

    Hola Oscar buen dia, tengo el mismo problema de Cristóbal, no me guarda los cambios
    Gracias

    Responder
  6. LEDO ANGEL VARGAS JUAREZ

    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…!!!

    Responder
    • Oscar Viedma

      Gracias también a ustedes Angel. Te deseo mucho éxito en tus proyectos.

      ¡Abrazo enorme!

      Responder
  7. Alexander Waldo

    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

    Responder
    • Oscar Viedma

      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.).

      Responder
  8. Alexander Waldo

    Ok… gracias y estaré pendiente

    Responder
  9. Andrés Triana

    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?

    Responder
    • Oscar Viedma

      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.

      Responder
  10. jorge omar

    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?

    Responder
    • Oscar Viedma

      Hola Jorge, revisa que tenga comillas simples y después comillas dobles la siguiente línea del código:

      buttonImage: '<img src="https://rawcdn.githack.com/rafaelbotazini/floating-whatsapp/3d18b26d5c7d430a1ab0b664f8ca6b69014aed68/whatsapp.svg" />', // Icono WhatsApp
      

      No puede tener comillas simples dos veces o comillas dobles dos veces. Para encerrar unas comillas dentro de otra debes usar simples con dobles.

      Responder
      • johan

        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?

        Responder
        • Martha

          saludos a mi me pasa exactamente lo mismo, casi lloro…

          Responder
          • Fer Rios

            Me pasa algo parecido, el icono aparece 2 veces uno encima de otro en el editor de Divi y también en las páginas con formas de contacto, sólo en móvil.

          • Cristian Fontalvo

            ME pasa exactamente lo mismo, sale doble en el constructor, y no case ni en el pc ni en el movil

  11. john bernal

    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

    Responder
    • Oscar Viedma

      Muchas gracias John. Sii sería genial un curso de código para divi 🙂

      Lo voy a valorar para más adelante.

      ¡Saludos!

      Responder
    • Cristian Fontalvo

      Me pasa exactamente lo mismo, trate de implementarlo hoy y no me funciona

      Responder
  12. Rosa Mora

    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.

    Responder
    • Oscar Viedma

      Hola Rosa, te entiendo, pero la librería solamente funciona haciendo tap para dispositivos móviles. En escritorio es al pasar el cursor 🙁

      Responder
  13. Guido

    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

    Responder
    • Oscar Viedma

      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. 😀

      Responder
  14. Juan Pedro Gallager

    Excelente información, muy clara, bien explicada y lo mejor es que funciona a la perfección.
    Muchas gracias

    Responder
    • Oscar Viedma

      Genial Juan 🙂 muchas gracias, seguimos con todo. 🙌

      Responder
  15. yetzojhanan

    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?

    Responder
    • Oscar Viedma

      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.

      Responder
      • yetzojhanan

        CUANDO hablas de instertar el script es cargar las librerias tal como en el video correcto? ya que las librerias estan en internet correcto?

        Responder
  16. Yaney Hernandez

    Me funciona genial. Gracias por compartir tus conocimientos.

    Responder
  17. Eduardo

    Excelente. Funciona al 100 en pc, tablet y smartphone. Muchas gracias.

    Responder
    • Oscar Viedma

      Excelente Eduardo, me alegro saber que funciona 😀 ¡Un abrazo!

      Responder
  18. Carlos

    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

    Responder
    • Oscar Viedma

      Hola Carlos, no he tenido ese inconveniente, quizá tu nombre es demasiado largo o no sé. ¿Cuál es la url de tu web?

      Responder
      • allan saavedra

        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

        Responder
        • Oscar Viedma

          Hola Allan, compárteme la url de tu web para ver que está pasando.

          Responder
  19. Maria Gandarillas

    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

    Responder
    • Oscar Viedma

      Hola Maria, que raro, debe funcionar para ambas versiones 🙁

      Responder
  20. Xavier

    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

    Responder
    • Oscar Viedma

      Hola Xavier muchas gracias.

      El código debe ser este:

      @media only screen and (min-width: 768px) {
       #WABoton {
         display: none;
       }
      }
      
      Responder
  21. Jorge

    Hola Oscar, buenas tardes, como puedo agregar un salto linea? Esto en la linea 11 (popupMessage)

    Responder
    • Oscar Viedma

      Hola Jorge, no estoy seguro que sea posible pero puedes intentar con este html: <br>

      Responder
  22. Jesús Riveros

    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.

    Responder
  23. Jesús Riveros

    Hola Oscar no me funciono ya revise las comillas limpie el cache y nada

    Responder
    • Oscar Viedma

      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

      Responder
      • Fabian Mauricio

        Hola, gracias con esto me soluciono el inconveniente que lo veia en el constructor pero no en la pagina en si.

        muchas gracias.

        Responder
      • Federico

        Listo esto me funciono para mi también. gracias

        Responder
      • Martha

        excelente me funcionó y me inscribire en la academia. Un abrazo

        Responder
      • Silvia

        Genial! a mi también me funcionó!

        Responder
  24. Yoan

    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

    Responder
    • Oscar Viedma

      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 🙂

      Responder
  25. Jhonny Vasquez

    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?

    Responder
    • Oscar Viedma

      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

      Responder
      • Jhonny Vasquez

        Hola Oscar.
        Muchas gracias, realice lo que indicas y si funcionó
        🤝👍

        Responder
  26. ruben

    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?

    Responder
    • Oscar Viedma

      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 🙂

      Responder
  27. Jose

    Lo acabo de implementar en 2 webs.

    Espectacular!

    Gracias

    Responder
  28. alejandro

    el boton funciona perfecto, pero tengo problema, me tira error a la imagen que tengo como logo en una pagina de mi sitio

    Responder
    • Oscar Viedma

      Revisa lo de las comillas que le comenté a Jorge Omar más arribita 👆

      Responder
  29. Aaron Fuentes

    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

    Responder
    • Oscar Viedma

      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.

      Responder
  30. Rojo

    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í?

    Responder
    • Oscar Viedma

      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 🙂

      Responder
  31. Emmanuel

    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.

    Responder
    • Oscar Viedma

      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 🤗

      Responder
  32. Alfredo

    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

    Responder
    • Oscar Viedma

      Hola Alfredo, dirígete a Divi > Opciones del tema > Performance y deshabilita: Defer jQuery And jQuery Migrate

      Responder
  33. genesis

    Hola, como estas? Excelente tutorial, lo hice se ve perfecto en el front con la sesión iniciada de administrador, pero no se ve en el front como usuario. ¿Qué puedo hacer? revise las comillas

    Responder
    • Oscar Viedma

      Revisa lo de las comillas que ya he respondido un par de veces aquí en los comentarios 🙂

      Responder
  34. Danilo

    Hola buenas, tengo un error con el codigo, no me aparece el boton en celulares y cuando lo pongo en la pantalla de pc me sale doble una imagen de whatsapp arriba de la otra, a alguien le paso algo similar? lograron solucionarlo?

    Responder
    • Oscar Viedma

      Seguro es por el tema de las comillas que comento en algunas respuestas de los comentarios, revisa ese detalle 😉

      Responder
  35. eva

    Hola,
    Me surge el problema con el último fragmento de código, al pegar lo veo correctamente, pero al guardar solo me mantiene el tercer fragmento del código, que es el primero que hemos copiado en el body, el fragmento 4 lo elimina.
    ¿Me podéis ayudar? Muchas gracias

    Responder
    • Oscar Viedma

      Hola Eva, ¿ya revistaste el tema de las comillas que he respondido en más de una ocasión en los comentarios?

      También deshabilita la opción «Defer jQuery And jQuery Migrate» desde Divi > Opciones del tema > General > Performance… Puede ser esto último también.

      Saludos Eva.

      Responder
      • Mauro

        Que crack!! En mi caso era eso tambien, hice tu tutorial paso a paso dos veces y no me quedaba, lo veía en el editor pero no en la version final.
        Realmente te las sabes a todas jaja

        Muchas gracias.
        Un saludo!

        Responder
        • Oscar Viedma

          Excelente Mauro, me alegra saber que con esto lo haz podido solucionar 🙂

          Es un problema muy recurrente en los comentario de aquí y en los comentarios del tutorial en youtube jaja, pero bueno, siempre estaré dispuesto a estar resolviendo sus dudas.

          Un abrazo.

          Responder
  36. Rafael

    Hola,
    ¿se puede modificar el tamaño del botón (X) de cierre de la ventana?

    Gracias

    Responder
    • Oscar Viedma

      Hola Rafael, por defecto no es posible pero podrías hacer pruebas con CSS, si gustas envíame la url de tu sitio y veo que podemos hacer.

      Saludos.

      Responder
  37. Albert

    Hola que tal Oscar excelente tutorial de máxima calidad, me podrías orientar en cómo hacer para, que no se vea la burbuja en solo unas cuantas paginas específicas, digamos que tengo paginas 5 donde no quiero que aparezca el chat. Como le podría hacer Muchas Gracias Oscar te escribo de Atlanta GA.

    Responder
    • Oscar Viedma

      Hola Albert, deberías hacer un pie de página personalizado desde el generador de temas, la plantilla se la asignas a las páginas que desees y dentro del pie de página vas a insertar un módulo código dónde insertaras los códigos del botón de WhatsApp 🙂

      Responder
  38. oswaldo

    que tal buenas noches disculpa yo acabo de agregar tu codigo en mi pagina y solo puedo verlo al editar, pero en mi pagina oficial no se refleja me puedes a´poyar a solucionarlo

    Responder
    • Oscar Viedma

      Hola Oswaldo, revisa el tema de las comillas que he comentado en estos mismos comentarios. También puede ser por las opción de Divi > Performance, debes desactivar las opción Defer jQuery And jQuery Migrate, también ya lo he respondido anteriormente en los comentarios.

      Saludos.

      Responder
  39. Abby

    Hola, antes que nada muchas gracias por el tutorial, solo quisiera cambiar la función de cómo aparece el chat tan solo al pasar el cursor sobre el botón, quisiera que solo se desplegara el chat al dar clic al botón

    Responder
    • Oscar Viedma

      Hola Abby, cómo la funcionalidad viene incluida en la librería, entonces no es posible controlar el click en el botón 🙁

      Responder
  40. Noel

    Muchas gracias por tu gran aporte!!!

    Quería consultarte si éste código se puede usar en una página HTML fuera de DIVI???
    Desde ya, muchas gracias!

    Responder
  41. casandra

    Hola buenas tardes. He seguido el tutorial paso a paso, he revisado y las comillas estan correctas. Por otro lado tengo la version de divi 5.9.2, como has comentado he ido a opciones del tema y performance y he desabilitado Defer jQuery And jQuery Migrate.
    Mi problema es que veo dos iconos de whatsapp en el constructor pero en el front como usuario no se ve nada. Cuando inspecciono en el contructor veo que hay dos <img pero en la parte del codigo que facilitas lo verifico y en divi no veo duplicada el <img.
    A que se puede deber?.
    Muchas gracias de antemano he intentado explicarme de la mejor manera pero no se si lo he conseguido.
    saludos.

    Responder
    • Oscar Viedma

      Casandra no había visto tu mensaje, disculpa.

      ¿Cómo vas con este problema?

      Responder
  42. casandra

    Disculpa lo he conseguido. Ya me sale todo correcto.
    Muchisimas gracias por todo tu trabajo. Estoy aprendiendo muchisimo contigo.
    Eres un crack.
    Saludos.

    Responder
    • Fer Rios

      Hola Casandra! Cómo solucionaste el problema? A mi me salen dos iconos en el constructor y también en el móvil, pero sólo en las páginas con formularios de contacto.

      Responder
      • Oscar Viedma

        Hola Fer, ¿Ya configuraste divi performance como lo recomiendo? También ya revisaste el tema de las comillas dobles y simples?

        Responder
        • Fer Rios

          Si, ya revisé esos puntos que mencionas varias veces y sigue igual.

          Responder
          • Oscar Viedma

            ¿Cuál es la url de tu web? Necesito inspeccionarla.

    • Ivan

      Hola como lo has conseguido? Yo tengo 2 paginas muy parecidas y en una me sale y en otro no, he probado desactivar el Defer jQuery And jQuery Migrate de las comillas tampoco es. Hasta he copiado el mismo código exactamente de la pagina que si funciona a la que no y nada, sigue sin funcionar. He mirado la configuración y está igual en las 2 paginas. No se que puede pasar. En el constructor sí que lo veo, veo 2 iconos pero la pagina web no. He borrado caché y nada. Que extraño

      Responder
      • Oscar Viedma

        Hola Ivan qué tal, si tienes un plugin cache puede ser por la configuración del mismo. También puedes deshabilitar todas las opciones de Divi Performance, es probable que también sea debido a otra opción.

        ¿Cuales son las dos páginas dónde lo haz implementado?

        Responder
        • Ivan

          Ya lo he solucionado he desactivado los pluggins que tenía y ya me funciona. Muchas gracias.

          Responder
  43. Sergio

    Hola. Gracias por el aporte. soy muy novato y me esta sirviendo aprender. Logre personalizar el color de background, nombre, etc pero los mensajes por defecto del pop up se ven en blanco, al igual que el fondo por eso solo sale la manito. Que podra ser? Agradezco la respuesta

    Responder
    • Oscar Viedma

      Hola Sergio ¿Cuál es la url de tu sitio dónde implementaste este ejercicio?

      Responder
  44. Sergio

    Si quisiera limitar que se habilite de 9:45 a 17:15 hs como podria hacerlo?
    desde ya muchas gracias por el aporte

    Responder
    • Oscar Viedma

      No se puede hacer algo así Sergio, lo siento.

      Aunque pensándolo bien puedes usar las condiciones de fecha y hora de divi pero para eso deberías insertar el código «HTML Floating WhatsApp» en un módulo código en la página dónde desees el botón. Y a ese módulo código aplicarle las condiciones.

      Responder
  45. mara

    Hola! muy buena la explicacion paso a paso. Lo probé y me funciona perfecto en la PC pero no funciona en el celular. que habrá que agregarle o modificar? Gracias

    Responder
    • Oscar Viedma

      Hola Mara, compárteme la url de tu ejercicio para inspeccionar y saber que sucede.

      Saludos

      Responder
  46. alberto

    no funciona se borra el codigo body cuando guardo

    Responder
    • Oscar Viedma

      Debe ser un bug de la versión de divi.

      Puedes intentar insertar el código dentro de tu página pero en un módulo código…

      Responder
  47. Freddy

    Hola, buen tutorial… sabes que te iba a comentar que a partir de la versión 5.8 o 5.9 de wordpress, ya el botón no aparece, hice una prueba y volví a una versión anterior en un servidor de prueba y nuevamente, pero cuando actualizas wordpress, el botón desaparece.

    Pero cuando le doy habilitar el constructor visual sobre cualquier página de mi sitio, entonces si se ve el botón flotante, pero cuando salgo del constructor visual de divi, vuelve a desaparecer, es muy raro esto.

    Si ya les ha pasado, me gustaría saber si lo resolvieron y como.
    Gracias, saludos a todos…

    Responder
    • Oscar Viedma

      Hola Freddy, es recomendable desactivar la opción «Defer jQuery And jQuery Migrate» de Divi / Performance… Puede deberse a eso.

      Responder
      • Freddy

        En efecto, leí poco a poco todos los comentarios en tu publicación y conseguir esa respuesta, la aplique en todos mis sitios y funcionó bien, solo que no aparecía mi pregunta para comentarles que lo había resuelto.

        Gracias…

        Responder
  48. Marietta

    Hola buena tarde; tengo una duda, tengo tu tutorial del carrito Ajax, por lo que el botón de Whats queda encimado. ¿Cómo puedo lograr que no quede así?

    Responder
    • Oscar Viedma

      Hola Marietta, lo ideal es cambiar de posición el botón o bien, ajustar la posición para que no se encimen.

      Responder
  49. Silvia

    Hola Oscar! A mi me pasa lo mismo, en la página de construcción aparece el botón y los cambio que realizo correctamente pero no se ven en el Front-end y el icono me aparece dos veces

    Responder
    • Oscar Viedma

      Vi que te sirvió esta respuesta:

      Dirigete a divi > Opciones del tema > General > Performance y deshabilita la opción: Defer jQuery And jQuery Migrate…

      Saludos 🙂

      Responder
  50. Juan Carlos Castro Castro

    Hola Óscar cómo estás. El ejercicio funcionó en la página que estoy construyendo, pero me salen dos burbujas flotantes. Cómo hago para que sólo me salga una? ya revisé e hice el proceso dos veces, pero cuando guardo cambios, no sale en un principio, pero cuando sigo editando, salen dos burbujas y al verificar en el sitio no salen. Agradezco tu ayuda. Un abrazo desde Colombia!

    Responder
    • Oscar Viedma

      Hola Juan, puede ser tema de las comillas, ya he comentado la solución algunas veces aquí en los comentarios 🙂

      Responder
  51. Jesús

    Que tal Oscar, espero que te encuentres muy bien.

    Al insertar el último código me aparecen unos iconos que me dicen (tap for identification)

    Espero puedas leer mi comentario, muchas gracias.

    Responder
    • Oscar Viedma

      Hola Jesús, copia el código manualmente, es decir, seleccionándolo y copiándolo. No lo hagas con el botón «copiar» ya que me ha estado fallando :/

      Responder
  52. Kelvin Rodriguez

    Buen día oscar, gracias por el tutorial, implemente el botón en una web hace un año aproximadamente y funcionaba excelente, sin embargo ahora cuando haces click en el botón desde el celular, te lleva a una página de whatsapp con un error que dice: «enlace incorrecto. cierra la ventana y vuelve a intentarlo con un enlace diferente» que podrá ser?

    Responder
    • Oscar Viedma

      Hola Kelvin, la verdad desconocía eso que me comentas, quizá sea tema del propio whatsapp, tengo que revisar que está sucediendo. ¿Cual es la url de tu web?

      Responder
      • Mario Cubillos Madariaga

        me pasa lo mismo, ya no deja enviar mensajes.

        Responder
        • Oscar Viedma

          Qué raro, a mi me sigue funcionando correctamente 🤔

          Responder
  53. Kevin D. Salazar

    Hola Oscar. Hace un año implementé este botón en un sitio y todo marcha bien.
    Ahora estoy configurando una etiqueta en GTM para medir la cuántos clic hacen los usuarios en el icono para enviar el mensaje de WhatsApp.
    Sin embargo requiero de que el botón tenga una «Class Name:» o una «ID:». Actualmente, el contiene ni un Class Name o ID para el botón de enviar.

    ¿Sabes si hay una manera de incluir este parámetro en alguna aprte del código para este botón de enviar? Muchas gracias por tu ayuda. Saludos

    Responder
    • Oscar Viedma

      Hola Kevin, solo agrega la clase en el HTML del botón, así:

      <div id="WABoton" class="nombre-clase"></div>
      
      Responder
      • Kevin D. Salazar

        Gracias Oscar por tu respuesta.
        Sabes, no me funcionó. GTM No reconoce el ClickName después de agregar la clase. Me funcionó enlazando el ClickURL, en este caso usando en enlace de la imagen. Muchas gracias igual por tomarte el tempo de responderme.
        Saludos.

        Responder
  54. Fer Obispo

    Hola Óscar, me encantan tus tutoriales y siempre me funcionan. De hecho ya había usado este, pero ahora que lo quise poner en otro sitio web no me funcionó. No sale el botón de whats aún después de poner todos los código, guardarlos y limpiar el caché. ¿Crees que me puedas apoyar?

    Responder
    • Oscar Viedma

      Hola Fer, no sé si haz seguido las recomendaciones que he dejado en los comentarios sobre divi performance y el tema de las comillas…

      Responder
  55. Luis Astudillo

    Hola! genial el tutorial, muchas gracias, pero venia funcionando bien hasta hace unas horas, en el editor de divi me muestra el botón de Whastapp, pero cuando visito la web no lo muestra, he vaciado café y demás pero no funciona en ningún pc externo, he revisado código y esta bien, que podría ser? gracias.

    Responder
    • Oscar Viedma

      Hola Luis, revisa el tema de las comillas que he comentado aquí en los comentarios. También es importante tengas esta configuración en divi performance.

      Responder
  56. Kevin D. Salazar

    Hola Oscar. Gracias nuevamente por el tutorial.
    Una consulta, después de habilitar el popup para que automáticamente se habilite el chat después de ciertos segundos, ¿hay manera de que también se cierre después de un minuto? ¿Algo como un popdown? Gracias por su ayuda.

    Responder
    • Oscar Viedma

      Hola Kevin, con éste método no hay forma 🙁 debes cerrarlo el usuario

      Responder
  57. Francesc

    Hola Oscar.
    Primero de todo felicidades por tu web y el compartir recursos y tips. Son de gran ayuda.

    Segundo. He implementado el codigo pero solo me aparece en la home. ¿no deberia aparecer también en el resto de paginas?

    Responder
    • Oscar Viedma

      Hola Francesc, sí debe aparecer en todo tu sitio a menos que tengas oculto el header en otras páginas 🤔

      Responder
  58. Alexandra

    Hola, gracias por tu apoyo de antemano, ya me leí todos los comentarios e hice lo que propones pero sigo sin ver el icono de whatsapp en el movil, en la computadora funciona perfecto pero ya no se que mas hacer para visualizarlo en el celular, podrias ayudarme por favor??

    Responder
    • Oscar Viedma

      Hola Alexandra, perdona por responder hasta ahora.

      ¿Me puedes compartir la url de tu web para poder inspeccionarla y ver que sucede por fa?

      Responder
  59. Leonardo

    Hola, Óscar, un gusto saludarte!!!
    Excelente tutorial, como siempre. Si bien tiene un tiempo, supongo que debe seguir funcionando.
    Antes de implementarlo te consulto si exista la forma de establecer un rango horario y que solo en él esté activo. Por ejemplo, que solo se pueda mandar mensaje de las 15 a las 20.
    Abrazo
    Leo

    Responder
    • Oscar Viedma

      Hola Leonardo qué tal, si sigue totalmente funcional solamente hay que seguir la recomendación que hago de divi performance.

      Sobre lo que deseas lograr, no es posible para este icono amigo, lo siento. La librería no incluye esa funcionalidad.

      Un abrazo.

      Responder

Trackbacks/Pingbacks

  1. Cómo agregar un chat flotante de WhatsApp Multi Agente en divi sin plugins - OV DIVI - […] ya hemos realizado un tutorial gratuito dónde agregamos un botón flotante de WhatsApp Chat en divi pero esta burbuja…

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$8 USD / mes

Pin It on Pinterest