Cómo Poner el Botón Flotante de WhatsApp en WordPress

Un visitante entra en tu página, revisa tus servicios y está a punto de pedir información. Sin embargo, no encuentra una forma sencilla de contactarte desde el móvil. En ese momento, una duda sobre el precio, la disponibilidad o el proceso de contratación puede convertirse en una oportunidad perdida.

Para poner un botón flotante de WhatsApp en WordPress puedes instalar un plugin como Joinchat, introducir tu número y configurar su apariencia. También puedes hacerlo sin un plugin específico de WhatsApp mediante un enlace y unas reglas de CSS. La mejor alternativa depende de si necesitas únicamente abrir una conversación o añadir mensajes personalizados, reglas de visibilidad e integración con tu tienda.

En esta guía encontrarás ambos métodos, cómo adaptar el botón a Elementor y WooCommerce, qué revisar cuando no funciona y cómo medir su utilidad para tu negocio. El objetivo es que el contacto resulte fácil y que las consultas lleguen con suficiente contexto para atenderlas.

Qué es un botón flotante de WhatsApp y cómo funciona

Un botón flotante de WhatsApp es un acceso de contacto que permanece en una posición de la pantalla mientras el usuario se desplaza por la página. Normalmente se coloca en una esquina inferior para que esté disponible sin interrumpir la lectura.

Al pulsarlo, el visitante accede a una conversación con el número configurado. En móviles puede abrirse la aplicación de WhatsApp; en ordenadores, el destino dependerá del enlace, la configuración del plugin y las aplicaciones disponibles.

Conviene distinguir entre un botón de contacto y un sistema de atención dentro de la web. Algunos plugins muestran primero una ventana con una bienvenida, pero esa ventana no significa que un agente esté respondiendo en tiempo real. La conversación se realiza en WhatsApp cuando el visitante continúa.

Tampoco se envía automáticamente el mensaje que hayas preparado. El texto aparece escrito en el campo de conversación y el usuario decide si lo modifica y lo envía. Esta diferencia importa tanto al configurar el botón como al interpretar los resultados.

Qué necesitas antes de agregar WhatsApp a WordPress

Antes de instalar nada, comprueba que tienes acceso al administrador de WordPress y que el número de contacto cuenta con una cuenta activa de WhatsApp. Para instalar un plugin también necesitas un usuario con los permisos correspondientes.

Puedes utilizar WhatsApp o WhatsApp Business. Para un negocio, resulta conveniente separar la atención comercial de las conversaciones personales y preparar un perfil que identifique claramente a la empresa.

También deberías decidir quién responderá, en qué horario y qué tipo de consultas quieres recibir. Instalar el botón sin organizar la atención puede generar conversaciones pendientes y expectativas que después no puedas cumplir.

Cómo escribir correctamente el número de WhatsApp

Los enlaces de contacto utilizan el número completo en formato internacional. Debes incluir el código del país y evitar el símbolo +, los espacios, los paréntesis y los guiones.

Por ejemplo, un número móvil ecuatoriano escrito localmente como 0991234567 se convertiría en 593991234567: se añade el prefijo 593 y se elimina el cero inicial del formato nacional. Este número es ilustrativo; debes sustituirlo por el de tu negocio.

Las palabras NUMERO son marcadores que debes reemplazar. Conserva los dígitos que forman parte del número válido y elimina únicamente los prefijos de marcación o ceros iniciales que no correspondan al formato internacional.

Antes de configurar WordPress, prueba el enlace directamente en el navegador. Si no abre una conversación con la cuenta correcta, resuelve ese problema primero: cambiar el diseño del botón no corregirá un número mal escrito.

Qué método elegir: plugin o código personalizado

Hay dos caminos principales para crear un botón flotante. Un plugin facilita la administración desde WordPress, mientras que una implementación con HTML y CSS permite resolver un contacto sencillo con pocas piezas.

La elección debería responder a las funciones que necesitas y a tu capacidad para mantenerlas. Tener menos plugins no garantiza una web más rápida, del mismo modo que instalar un plugin no implica necesariamente un problema de rendimiento.

Si estás empezando y quieres modificar la configuración sin tocar código, un plugin es una opción práctica. Si solo necesitas un enlace fijo hacia una conversación, el método manual puede ser suficiente.

Cómo poner el botón flotante de WhatsApp con Joinchat

Joinchat permite configurar el contacto y mostrar un botón flotante desde el panel de WordPress. Para evitar confusiones con nombres parecidos, identifica el plugin por su nombre y por el desarrollador, Creame.

Antes de instalarlo, realiza una copia de seguridad si vas a trabajar en una web en producción. Después, aplica los cambios y prueba el resultado tanto en móvil como en ordenador.

Paso 1. Instala y activa el plugin

Entra en el administrador de WordPress y sigue esta secuencia:

1. Accede a Plugins → Añadir nuevo.
2. Busca Joinchat.
3. Identifica el plugin desarrollado por Creame.
4. Pulsa Instalar ahora.
5. Cuando termine la instalación, selecciona Activar.

Si no aparece la opción de instalar plugins, revisa los permisos de tu usuario y las restricciones de tu servicio de alojamiento o modalidad de WordPress. La ausencia de ese menú no significa que el plugin esté fallando.

Una vez activado, abre el asistente o los ajustes de Joinchat. La ubicación y las etiquetas pueden variar entre versiones; utiliza el acceso que aparezca en el menú de tu instalación.

Paso 2. Configura el teléfono y comprueba el destino

Introduce el número de atención y selecciona el país cuando la interfaz lo solicite. Comprueba que el prefijo no quede duplicado si el plugin lo añade mediante su selector.

Utiliza la opción de probar el número, si aparece, y verifica la cuenta que se abre. Revisa el nombre y la identificación del negocio antes de continuar.

Este paso debe hacerse con especial cuidado cuando cambias de número comercial. Un botón visualmente correcto puede seguir enviando visitantes a una cuenta antigua si no revisas el destino.

Paso 3. Escribe un mensaje inicial útil

El mensaje predefinido debe ayudar al visitante a comenzar y darte una pista sobre lo que necesita. Un texto demasiado genérico facilita el contacto, pero puede obligarte a preguntar después qué página estaba consultando.

Para una página de servicios puedes utilizar:

Hola, estoy interesado en sus servicios. ¿Podrían explicarme cómo trabajan y qué información necesitan para preparar una propuesta?

Cuando quieras incorporar el contexto de la página, Joinchat admite variables como {TITLE} y {URL}. Un ejemplo sería:

Hola, estoy consultando la página {TITLE}.
Quisiera recibir más información.
Enlace: {URL}

Prueba el mensaje en varias páginas antes de dejarlo activo. Algunos títulos editoriales no encajan bien dentro de una consulta comercial, por lo que puede ser mejor utilizar mensajes específicos en tus páginas de servicios.

Paso 4. Diferencia la bienvenida del mensaje de WhatsApp

La bienvenida es el texto que el visitante puede ver en la ventana previa del plugin. El mensaje inicial es el contenido que aparecerá preparado dentro de WhatsApp cuando continúe.

Para la bienvenida puedes escribir: “¿Necesitas información sobre este servicio? Cuéntanos qué buscas y te orientamos”. Para el botón de inicio, utiliza una acción clara como “Consultar por WhatsApp”.

Evita presentar un mensaje como una respuesta de un agente conectado si nadie está atendiendo en ese momento. La interfaz debe explicar correctamente qué ocurrirá al pulsar.

Paso 5. Ajusta el diseño y la ubicación

Configura la posición, el color y los elementos visuales disponibles en tu versión. La esquina inferior derecha suele ser un punto de partida práctico, pero debes revisarla junto con los demás componentes de la página.

Si tienes un aviso de cookies, un carrito flotante o un botón para volver arriba, puede que necesites cambiar el lado o aumentar la separación inferior. La prioridad es que el usuario pueda utilizar todos esos controles.

Comprueba también el contraste y el tamaño en una pantalla pequeña. El botón debe reconocerse y pulsarse con facilidad, sin cubrir campos de formularios ni información importante.

Paso 6. Decide dónde debe mostrarse

No todas las páginas necesitan el mismo acceso a WhatsApp. En una página de servicios puede ayudar a solicitar una propuesta; en una página de pago podría distraer al usuario o resolver una duda decisiva, según tu proceso comercial.

Revisa los ajustes de visibilidad y las opciones específicas de cada publicación. Configura las exclusiones disponibles cuando el botón interfiera con una tarea o no tenga una finalidad clara.

Una configuración inicial razonable consiste en mostrarlo en la portada y las páginas comerciales, y revisar por separado los artículos, el carrito y la finalización de compra.

Paso 7. Guarda y realiza una prueba completa

Guarda los ajustes y abre una página pública en una ventana privada. Comprueba que el botón aparece, que permite continuar hacia WhatsApp y que el texto preparado corresponde a esa página.

Repite la prueba desde un teléfono y un ordenador. El comportamiento puede variar entre dispositivos, por lo que una única comprobación no es suficiente.

Finalmente, envía una consulta de prueba desde otra cuenta. Así podrás verificar que el negocio recibe el mensaje y que la persona responsable sabe cómo atenderlo.

Cómo poner un botón flotante de WhatsApp sin plugin

Para crear un acceso sencillo no necesitas un plugin específico de WhatsApp. Puedes utilizar un enlace HTML y CSS para mantenerlo fijo en la pantalla.

El HTML define el destino y el texto; el CSS controla la posición y la apariencia. El ejemplo siguiente utiliza un botón con texto visible, sin cargar bibliotecas de iconos ni scripts externos.

Paso 1. Añade el enlace HTML

Pega este código en un bloque de HTML personalizado. Sustituye 593991234567 por tu número comercial en formato internacional.

<a
  class="mt-whatsapp-flotante"
  href="https://wa.me/593991234567?text=Hola%2C%20quiero%20informacion%20sobre%20sus%20servicios."
  target="_blank"
  rel="noopener noreferrer"
  aria-label="Contactar por WhatsApp; se abre en otra pestaña"
>
  Consultar por WhatsApp
</a>

El parámetro text contiene el mensaje preparado. En este ejemplo, los espacios y signos están codificados para que formen parte de la URL correctamente.

Si colocas el bloque dentro de una página concreta, el botón aparecerá únicamente donde se cargue ese bloque. Que un elemento sea flotante no significa que se muestre automáticamente en toda la web.

Paso 2. Añade el CSS

Pega estas reglas en el área de CSS adicional de tu tema o en el sistema de estilos personalizados que utilices. En temas clásicos suele encontrarse en Apariencia → Personalizar → CSS adicional; otras interfaces pueden ofrecer una ubicación diferente.

.mt-whatsapp-flotante {
  position: fixed;
  right: 20px;
  bottom: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 1000;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 12px 18px;
  border-radius: 999px;

  background-color: #075e54;
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  text-align: center;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: background-color 0.2s ease;
}

.mt-whatsapp-flotante:hover {
  background-color: #064c44;
  color: #ffffff;
  text-decoration: none;
}

.mt-whatsapp-flotante:focus-visible {
  outline: 3px solid #111111;
  outline-offset: 4px;
}

@media (max-width: 600px) {
  .mt-whatsapp-flotante {
    right: 16px;
    padding: 12px 16px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mt-whatsapp-flotante {
    transition: none;
  }
}

El código incorpora un estado de foco para usuarios que navegan con teclado y una separación que tiene en cuenta el área segura inferior de dispositivos compatibles.

Si el botón se superpone a una barra fija, modifica la distancia inferior. Por ejemplo, puedes cambiar 24px por 90px en las dos declaraciones de bottom. Es una adaptación de diseño que debes comprobar en tu propia web.

Paso 3. Haz que aparezca en todo el sitio

Para mostrar el botón globalmente, coloca el HTML en una zona compartida: una plantilla de pie de página, un área de widgets presente en todo el sitio o un elemento global del tema.

En un tema de bloques, comprueba que la parte de plantilla elegida se utiliza en todas las vistas relevantes. Si unas páginas tienen un pie diferente, el botón podría faltar en ellas.

Evita editar directamente los archivos del tema principal: una actualización puede sobrescribir el cambio. Si utilizas un tema hijo o un sistema de hooks, aplica la inserción mediante ese mecanismo y verifica que el HTML se genera una sola vez.

Cómo agregar WhatsApp en Elementor

En Elementor puedes añadir un contacto contextual utilizando un widget de botón. Escribe un texto como “Solicitar presupuesto por WhatsApp” y coloca como enlace tu URL wa.me.

Este método crea un botón dentro del diseño de la página. Para que sea flotante en todo el sitio necesitas una implementación global y una posición fija, o utilizar un plugin que gestione esa función.

Si ya tienes Joinchat activo, puedes conectar un botón de Elementor con sus disparadores. El enlace #joinchat permite abrir la ventana de Joinchat, mientras que #whatsapp inicia la apertura de WhatsApp a través del plugin.

Estos enlaces especiales dependen de Joinchat. Si desactivas el plugin, debes sustituirlos por un enlace directo o por otra integración funcional.

Cómo configurar WhatsApp para WooCommerce

En una tienda online, recibir un mensaje que diga únicamente “Hola” puede dificultar la atención. Un contacto vinculado al producto ayuda a entender qué está consultando el comprador.

Configura el mensaje para incorporar el nombre o el enlace del producto mediante las opciones disponibles en tu integración. Por ejemplo: “Hola, quisiera consultar la disponibilidad de este producto: [nombre y enlace]”.

Prueba el resultado en productos simples y variables. No asumas que el mensaje incluye automáticamente la talla, el color o la variación elegida: comprueba qué información transmite realmente tu configuración.

Además, abrir WhatsApp no crea un pedido ni registra un pago. Si quieres procesar ventas por ese canal, define cómo confirmarás el producto, el precio, el envío y la compra.

¿Conviene mostrar el botón en el checkout?

Depende de la función que cumpla. Puede ayudar cuando los compradores necesitan confirmar una condición de entrega, pero también puede alejarlos de un proceso de pago que ya estaba funcionando.

Compara las consultas recibidas con las compras completadas y revisa si el botón resuelve dudas concretas. Mantenerlo visible en todas las pantallas por defecto no sustituye ese análisis.

Cómo personalizar el botón para conseguir consultas más útiles

La llamada a la acción debe corresponder a la intención de la página. “Hablar por WhatsApp” es comprensible, pero “Consultar disponibilidad” explica mejor el propósito en una ficha de producto.

En servicios profesionales, puedes pedir información inicial sin convertir el mensaje en un formulario largo. Una consulta sobre el tipo de negocio, la necesidad y la ubicación puede ser suficiente para empezar.

También puedes combinar un botón flotante con otro dentro del contenido, junto a una explicación del servicio. Mantén el mismo destino y revisa que ambos mensajes sean coherentes.

Si todavía estás trabajando la captación de visitas, nuestra guía sobre cómo hacer SEO local para posicionar tu negocio y captar clientes te ayudará a conectar la visibilidad con una página preparada para recibir consultas.

Cómo medir los clics de WhatsApp en Google Analytics 4

El botón debe evaluarse como parte del proceso comercial. Saber cuántas personas lo pulsan ayuda a entender la interacción, pero no indica por sí solo cuántas consultas recibes ni cuántas terminan en una venta.

Para un enlace HTML directo, la medición mejorada de GA4 puede registrar un evento de clic saliente. Comprueba que está activada y que la implementación genera el evento al pulsar tu enlace.

Después, analiza el dominio o la URL de destino para identificar los enlaces hacia wa.me. Si el plugin abre WhatsApp mediante JavaScript, verifica su integración de analítica: no des por hecho que se medirá igual que un enlace convencional.

Cuándo utilizar Google Tag Manager

Google Tag Manager puede ayudarte a registrar un evento específico, como whatsapp_click, y distinguir el botón flotante de otros contactos dentro de la página.

En un enlace directo puedes utilizar un activador de clic en enlaces que filtre el destino hacia WhatsApp. En un plugin con eventos propios, utiliza la integración o el evento documentado correspondiente.

Comprueba el resultado en el modo de vista previa y en las herramientas de depuración de GA4. Si ya existe una integración que registra la misma interacción, evita configurar otra que duplique el evento.

Distingue clics, conversaciones y ventas

Estas tres métricas representan etapas diferentes. Un usuario puede pulsar y no escribir, enviar una consulta sin intención de contratar o terminar comprando después de varias conversaciones.

Registra las consultas recibidas y su resultado en un CRM o una hoja de seguimiento. Puedes conservar una referencia de la página consultada en el mensaje inicial, sin introducir datos personales dentro de tus eventos de analítica.

Por ejemplo, si durante un mes registras 120 clics, 45 consultas y 9 ventas, la relación entre ventas y consultas sería del 20 %. Es un ejemplo hipotético para explicar el cálculo, no un promedio esperado.

Por qué no aparece el botón de WhatsApp en WordPress

Cuando el botón no aparece, revisa primero si existe en la página y después si algún ajuste lo oculta. Este orden evita cambiar estilos cuando el problema está en la configuración.

Comprueba que el plugin está activo, que el teléfono está configurado y que la página permite mostrar el botón. En el método manual, confirma que el bloque HTML se carga en la plantilla que estás visitando.

La caché muestra una versión anterior

Después de guardar cambios, puede que sigas viendo una copia antigua de la página. Vacía la caché de WordPress y, si corresponde, la del alojamiento y la CDN.

Abre después una ventana privada y revisa de nuevo. Si el botón aparece allí, pero no en tu sesión habitual, puede quedar contenido almacenado en el navegador.

El botón queda detrás de otro elemento

Si el HTML existe pero no se ve correctamente, revisa la posición y las capas de diseño. Un contenedor con transformaciones o un contexto de apilamiento puede afectar a un elemento fijo.

Aumentar z-index puede ayudar en algunos casos, aunque no soluciona todos los conflictos. Si el botón está insertado dentro de un contenedor problemático, puede ser necesario moverlo a una zona global más adecuada.

Hay dos botones de WhatsApp

Este problema suele ocurrir cuando utilizas un plugin y mantienes otra implementación en el tema, el constructor o un bloque HTML.

Identifica ambas inserciones y conserva la que necesitas. No ocultes una al azar con CSS sin entender su origen, porque podrías dejar enlaces duplicados o código innecesario cargándose.

El botón aparece, pero no abre el chat correcto

Prueba primero el enlace fuera de WordPress. Si falla también allí, comprueba el número, el prefijo y la cuenta de WhatsApp asociada.

Cuando el problema ocurre únicamente en la web, revisa el enlace generado y las herramientas de optimización. El retraso o la combinación de JavaScript pueden interferir con algunas integraciones; haz pruebas controladas antes de excluir recursos.

Si el mensaje llega con caracteres incorrectos, comprueba la codificación del parámetro text. En los campos de un plugin escribe normalmente el texto sin codificar, salvo que su interfaz indique lo contrario: muchas integraciones realizan esa conversión.

Rendimiento y experiencia móvil: qué debes revisar

Un enlace con HTML y CSS requiere pocas piezas, pero eso no permite afirmar que cualquier implementación tendrá un impacto nulo. Los plugins pueden cargar estilos, scripts y funciones adicionales.

Compara la página antes y después de instalar el botón utilizando las mismas condiciones de prueba. Revisa también el comportamiento real: retrasos, superposiciones, clics que no responden y movimientos inesperados.

En móvil, comprueba especialmente los formularios, el menú, el aviso de cookies y las barras de compra. Un botón útil debe facilitar el contacto sin impedir la tarea principal del visitante.

No hay una mejora de posicionamiento garantizada por instalar WhatsApp. Su utilidad está en ofrecer un canal de contacto accesible dentro de una web cuyo contenido, rendimiento y propuesta comercial ya respondan a las necesidades del usuario.

Cómo integrar WhatsApp en tu estrategia de captación

El botón funciona mejor cuando el visitante entiende qué ofreces antes de escribir. Una página con servicios claros, proceso de trabajo y respuestas a las dudas habituales permite comenzar conversaciones más concretas.

Para un negocio local, puedes conectar la visita desde Google con una página del servicio y un mensaje relacionado con esa necesidad. También puedes complementar el tráfico orgánico con una estrategia de publicidad en Google Maps.

Una vez recibida la consulta, registra lo que necesita la persona y cuál es el siguiente paso. Mantén disponibles otros canales, como un formulario o correo, para quienes prefieran utilizarlos.

Si necesitas integrar el contacto con el diseño, el posicionamiento y la medición, en Monetiza Todito, agencia de marketing digital y SEO podemos ayudarte a preparar una web orientada a generar oportunidades comerciales.

Preguntas frecuentes sobre el botón flotante de WhatsApp en WordPress

¿Puedo poner el botón de WhatsApp gratis?

Sí. Puedes utilizar las funciones gratuitas de un plugin o crear un acceso directo con HTML y CSS. Comprueba si las funciones adicionales que necesitas pertenecen a una extensión de pago.

El botón sencillo de contacto no requiere, por sí mismo, contratar una integración con WhatsApp Business Platform. Las automatizaciones y los servicios externos deben evaluarse por separado.

¿Es obligatorio usar WhatsApp Business?

No. El enlace puede abrir una conversación con una cuenta activa de WhatsApp. Para atención comercial, una cuenta separada y un perfil de negocio ayudan a organizar el canal.

La elección debe considerar quién responde y cómo gestionas las consultas, además de la configuración visual del botón.

¿El mensaje se envía automáticamente al pulsar?

No. El texto predefinido aparece preparado en el chat y el visitante decide si lo envía. Puede editarlo, eliminarlo o abandonar la conversación.

Por eso, un clic registrado en tu web no demuestra que hayas recibido una consulta.

¿Puedo utilizar distintos números según la página?

Sí, si tu implementación permite establecer configuraciones por página. Joinchat dispone de ajustes a nivel de publicación, incluido el teléfono de contacto.

Revisa las páginas donde hayas personalizado el número cuando cambies de equipo o de cuenta comercial, para evitar que queden destinos antiguos.

¿Funciona con Gutenberg, Elementor y otros constructores?

Un enlace directo de WhatsApp puede utilizarse en los botones o bloques que permitan introducir una URL. La implementación flotante global depende de las opciones del tema, el constructor o el plugin elegido.

Comprueba el resultado en la página publicada. El aspecto dentro del editor no siempre refleja la posición final de un elemento fijo.

¿Puedo instalar el botón en WordPress.com?

Depende de las funciones habilitadas en tu modalidad. Revisa si puedes instalar plugins o añadir el CSS necesario para una implementación flotante.

Cuando no dispongas de esas opciones, un botón normal con un enlace de WhatsApp puede servir como contacto dentro del contenido.

¿Cómo compruebo que está listo para publicarse?

Verifica el número, el mensaje y la visibilidad desde móvil y ordenador. Envía una consulta de prueba y comprueba que llega al responsable de atención.

Revisa también que el botón no cubra otros controles y que su medición registre la interacción una sola vez. Con esas comprobaciones tendrás un acceso funcional y una base fiable para evaluar su utilidad comercial.