Botón de WhatsApp flotante en Divi con WhatsApp Chat Pro

El botón de WhatsApp se ha vuelto casi obligatorio en cualquier sitio que venda productos o servicios. La gente prefiere preguntar por WhatsApp antes que llenar un formulario, y un botón flotante siempre visible convierte esa preferencia en conversaciones reales. En este tutorial te muestro cómo añadir un botón de WhatsApp flotante en Divi usando un plugin potente que se integra con tu WhatsApp Business o personal y que puedes personalizar a fondo.

El plugin que uso es WP WhatsApp Chat, de QuadLayers — una empresa conocida por sus plugins de calidad. Lo bueno es que la versión Pro permite personalizar el botón de muchas formas: horarios de atención, mensaje predefinido, agentes múltiples, y el diseño completo del widget. Vamos a configurarlo paso a paso.

¿Por qué un botón de WhatsApp flotante mejora tus conversiones?

Un botón flotante de WhatsApp está siempre presente mientras el usuario navega, sin importar en qué sección esté. Eso reduce la fricción para contactarte: el visitante no tiene que buscar tu información de contacto ni salir de la página. Para negocios locales, tiendas y servicios, esa inmediatez se traduce en más consultas y más ventas. Y a diferencia de un formulario, WhatsApp abre una conversación directa donde puedes cerrar la venta en tiempo real. Si quieres dominar este tipo de personalizaciones en Divi, el Curso de Divi 5 completo te da todas las bases.

Paso 1: Instala WP WhatsApp Chat

Sube e instala el plugin desde Plugins → Subir plugin con el archivo ZIP (la versión Pro la dejo en los recursos de este tutorial, ya con su licencia activada). Actívalo y aparecerá un menú propio del plugin en tu panel donde configuras todo el comportamiento del botón flotante.

Consejo: usa un número de WhatsApp Business si lo tienes, en lugar del personal. WhatsApp Business te da herramientas como mensajes de bienvenida automáticos, etiquetas de clientes y un perfil con la información de tu negocio, lo que profesionaliza la atención que llega desde el botón flotante.

Paso 2: Configura el número y el mensaje predefinido

En la configuración del plugin, ingresa tu número de WhatsApp en formato internacional (con código de país, sin el signo +). Luego define el mensaje predefinido — el texto que aparece ya escrito cuando el usuario abre el chat. Un buen mensaje predefinido facilita el primer contacto: por ejemplo, "Hola, me interesa información sobre…". Esto baja la barrera de empezar la conversación.

🎓 ¿Quieres personalizar tu sitio Divi a nivel profesional?
En uxdivi.com/cursos tenemos el Curso de Divi 5 completo donde cubrimos integraciones, plugins y personalización avanzada para que tu sitio convierta. Accede como suscriptor y construye sitios que generan negocio.

Paso 3: Personaliza el diseño del botón

Aquí es donde la versión Pro destaca. Puedes elegir la posición del botón (esquina inferior derecha o izquierda), el color, el ícono, el texto que lo acompaña, y si muestra una ventana de chat previa antes de abrir WhatsApp. También puedes configurar horarios de atención, de modo que el botón muestre "en línea" o "fuera de horario" según el momento. Estos detalles hacen que el botón se sienta parte de tu marca y no un añadido genérico.

Paso 4: Configura horarios y agentes (opcional)

Si atiendes en horarios definidos, configúralos para que el widget refleje tu disponibilidad real. Y si tienes varios agentes o departamentos (ventas, soporte), la versión Pro permite añadir múltiples contactos, de modo que el usuario elija con quién hablar. Esto es especialmente útil para negocios con equipos de atención.

Consejo: no satures. Un botón de WhatsApp bien configurado basta. Si además quieres ofrecer Telegram u otras vías, considera integrarlas de forma ordenada — por ejemplo con el tutorial de botón de WhatsApp y Telegram en Monarch, en lugar de llenar la pantalla de botones flotantes que compiten entre sí.

Casos de uso del botón de WhatsApp

El botón flotante funciona muy bien en tiendas online (consultas pre-compra), sitios de servicios (cotizaciones rápidas), negocios locales (reservas y horarios), y landing pages (cerrar la venta en caliente). Si tienes una tienda WooCommerce, puedes incluso combinarlo con un modo catálogo donde los pedidos se hacen por WhatsApp, ideal para negocios que prefieren cerrar las ventas por chat en lugar de checkout tradicional.

Preguntas frecuentes sobre el botón de WhatsApp en Divi

¿Funciona con WhatsApp Business y con el personal?

Sí, funciona con cualquier número de WhatsApp, sea Business o personal. Solo necesitas el número en formato internacional. WhatsApp Business aporta funciones extra de atención, pero el botón funciona igual con ambos.

¿El botón flotante afecta la velocidad del sitio?

Un plugin bien hecho como WP WhatsApp Chat tiene un impacto mínimo. Aun así, como con cualquier plugin, conviene medir el rendimiento con una herramienta como GTmetrix antes y después de instalarlo.

¿Puedo mostrar el botón solo en algunas páginas?

Sí, la versión Pro permite definir en qué páginas o secciones se muestra el botón. Puedes mostrarlo en toda la tienda y ocultarlo en el checkout, por ejemplo, o donde tenga más sentido para tu flujo.

¿Se ve bien en móvil?

Sí, el botón flotante está diseñado para ser responsive, y de hecho en móvil es donde más se usa — al tocarlo abre directamente la app de WhatsApp del usuario con tu número y mensaje predefinido cargados.

Conclusión

Un botón de WhatsApp flotante es una de las mejoras con mejor retorno que puedes añadir a un sitio que busca generar contactos o ventas. Con WP WhatsApp Chat en Divi tienes el control para personalizarlo a fondo: número, mensaje, diseño, horarios y agentes. Configúralo bien, pruébalo en móvil, y convertirás más visitas en conversaciones reales.

🎓 ¿Quieres convertir tu sitio Divi en una máquina de generar negocio?
En uxdivi.com/cursos tienes el Curso de Divi 5 completo donde aprendes a integrar plugins, optimizar la conversión y construir sitios profesionales. Accede como suscriptor y lleva tu sitio al siguiente nivel.

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido prémium.

Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐

Recursos, Snippets y descargas de este tutorial: