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

28 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
  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
  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

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.

$6 USD / mes

Pin It on Pinterest