Cómo Añadir un Botón de Chat de WhatsApp a WordPress (3 formas gratuitas, 2026)
Tu sitio de WordPress está en línea y el tráfico está llegando, ¿y luego qué? La mayoría de los visitantes llegan, leen y se van sin una forma fácil de hacer una pregunta. Un botón de chat de WhatsApp soluciona eso en una tarde: un toque abre un chat con tu número en la aplicación que tus clientes ya usan. Este artículo muestra tres formas gratuitas de agregar uno en 2026: un enlace simple wa.me (con un fragmento flotante opcional), un plugin de widget de chat o tu constructor de páginas, y dónde se detiene cada uno de ellos, para que sepas cuándo cambiar a la API de WhatsApp Business. El Tech Pad es una plataforma de WhatsApp Business en la API oficial en la nube de Meta con 26 conectores gratuitos para WordPress y una bandeja de entrada compartida para el equipo, y continúa exactamente donde terminan los botones de chat. Tu primer mes es gratis cuando comienzas, y cada negocio que refieras que se registre y conecte un número de WhatsApp te da un mes gratis más —hasta 5 meses adicionales gratis— hasta un total de 6 meses gratis.
Lo que realmente hace un botón de chat de WhatsApp
Un botón de chat es un enlace. Detrás de la burbuja verde hay una URL en una de dos formas: https://wa.me/<countrycode><number> o https://api.whatsapp.com/send?phone=<number>. Cuando un visitante lo toca, su dispositivo abre WhatsApp — la aplicación en el móvil, o web.whatsapp.com en un navegador de escritorio sin la aplicación — con una conversación con tu número ya iniciada.
Ese es todo el truco, y importa por lo que un botón hace hacer: no envía nada desde tu sitio. El visitante escribe el primer mensaje, por lo que siempre es entrante, siempre con consentimiento, y gratuito. La conversación vive en la propia aplicación de WhatsApp del cliente, no en tu servidor. No hay API, no hay aprobación, no hay tarifa por mensaje.
Tres formas de agregar un botón: comparado
Los tres métodos a continuación son gratuitos para empezar. Las diferencias están en cuánto control deseas sobre la colocación, la segmentación y el seguimiento.
| Método | Tiempo de configuración | ¿Necesita un complemento? | ¿Flotante? | Segmentación por dispositivo | Seguimiento de clics | Costo |
|---|---|---|---|---|---|---|
| Enlace wa.me (bloque de botón, menú, widget) | ~5 minutos | No | Solo con CSS personalizado | No | Manual (evento GA4) | Gratis |
| Complemento de widget de chat (Joinchat, Chaty, WP Chat App) | 10–15 minutos | Sí | Sí | A menudo incluido | Usualmente integrado | Nivel gratuito; pago por extras |
| Botones flotantes de Elementor / Bloque de Gutenberg | ~10 minutos | No (constructor) | Sí (Elementor) | Parcial | Manual (evento GA4) | Gratis |
Método 1: un enlace wa.me sin un plugin
El formato es wa.me/<countrycode><number>?text=<urlencoded-message>. Para un número indio, se ve así:
https://wa.me/919876543210?text=Hi%2C%20I%20have%20a%20questionUsa el código de país sin + o espacios — 91 para India, 1 para EE. UU. El text parámetro rellena previamente el primer mensaje del visitante; los espacios deben codificarse en URL (%20) y la puntuación también (%2C para una coma). Si construyes el enlace en JavaScript, encodeURIComponent() lo gestiona por ti.
Puedes poner este enlace en cualquier lugar donde WordPress acepte un enlace:
- Bloque de botón en el editor Gutenberg, vinculado a la URL wa.me.
- Elemento del menú de navegación — agrégalo como un Enlace Personalizado.
- Widget de pie de página o barra lateral — un widget de texto o HTML personalizado.
- Botón flotante fijo — pega el fragmento a continuación en Personalizador → CSS Adicional más un widget de HTML personalizado en tu pie de página. Fija un botón en la esquina inferior derecha con un z-index seguro y un objetivo táctil de 48px, el tamaño mínimo cómodo para los pulgares en móviles.
<a class="wa-float" href="https://wa.me/919876543210?text=Hi%2C%20I%20have%20a%20question" target="_blank" rel="noopener">Chat on WhatsApp</a>
<style>
.wa-float {
position: fixed; bottom: 20px; right: 20px; z-index: 9999;
background: #25D366; color: #ffffff; padding: 12px 20px;
border-radius: 40px; min-height: 48px; display: inline-flex;
align-items: center; text-decoration: none; font-weight: 600;
box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.wa-float:hover { background: #1fb457; }
</style>Prueba el enlace terminado en un teléfono real antes de publicarlo, y también en un escritorio — sin la aplicación de WhatsApp instalada, wa.me redirige a web.whatsapp.com, lo cual funciona siempre que el texto prellenado se mantenga. Mantén los mensajes prellenados en una línea; el texto muy largo se trunca en algunos dispositivos.
Método 2: un plugin de widget de chat
Si quieres un botón flotante con segmentación por dispositivo, programación o múltiples agentes sin escribir CSS, un plugin es el atajo honesto. Todos estos tienen versiones gratuitas:
- Joinchat (Créame) — ligero y enfocado puramente en WhatsApp; un sólido valor predeterminado.
- Haz clic para chatear (HoliThemes) — libre y simple; número, posición y algunos estilos.
- Chaty (Premio) — soporta muchos canales, no solo WhatsApp; nivel gratuito más planes de pago.
- Aplicación de Chat WP (NinjaTeam) — botón flotante más multiagente y mensajes prellenados; gratuito y de pago.
- Botonizador — un lanzador de botones general que puede alojar tu botón de WhatsApp junto con otros.
- Botones flotantes de Elementor — widget nativo en Elementor Pro si ya construyes con él.
Instala, introduce tu número en formato internacional, elige la posición y el color, y ya está. Los planes de pago añaden segmentación por dispositivo y página, programación de chat y análisis de clics. Ninguno de estos plugins puede enviar mensajes desde tu sitio; eso no es para lo que sirven, y no es un fallo; es la frontera entre los widgets y la API.
Método 3: Elementor o un bloque de Gutenberg
Si usas Elementor Pro, el widget de Botones Flotantes coloca un botón de WhatsApp de forma nativa, sin plugin adicional. En Gutenberg simple, el bloque de Botón con un enlace wa.me cumple la misma función — combínalo con el CSS flotante del Método 1 si quieres que sea fijo. Un shortcode o patrón de bloque en el tema de tu sitio functions.php es el mismo enlace abajo; la única pregunta es dónde quieres mantenerlo.
Donde los botones de chat dejan de funcionar
Un botón de chat es solo entrante. No puede enviar una confirmación de pedido cuando un cliente realiza el pago, un recordatorio antes de una cita reservada, o un aviso de recuperación de carrito dos horas después del abandono — porque nada se envía desde tu sitio. No hay manejo de la ventana de servicio de 24 horas de Meta, no hay aprobación de plantillas, y no hay bandeja de entrada compartida: cada consulta llega al único teléfono cuyo número está en el enlace, por lo que un segundo agente respondiendo significa un segundo número.
Ese es el trabajo de la API de WhatsApp Business. Los mensajes iniciados por la empresa fuera de la ventana de 24 horas deben usar plantillas aprobadas por Meta (categorías de marketing, utilidad o autenticación), y la API los envía desde una plataforma como The Tech Pad, cuyos conectores gratuitos de WordPress envían automáticamente las entradas de formularios, reservas y pedidos a WhatsApp mientras tu equipo responde desde una bandeja de entrada compartida en [/features/inbox/](/features/inbox/). No hay tarifa mensual de SaaS por el conectors; pagas las tarifas por conversación por mensaje de Meta — aproximadamente ₹0.10–0.30 por mensajes de utilidad en India, con marketing alrededor de 2–3 veces eso — así que revisa la tabla de tarifas actual de Meta. Si estás decidiendo entre un botón y la API, [esta comparación](/blog/whatsapp-business-app-vs-api-2026/) establece la diferencia.
Paso a paso: agrega, estiliza y prueba tu botón
- Escribe tu número en formato internacional sin
+o espacios — por ejemplo919876543210para India. - Construye y prueba el enlace directo en tu teléfono primero:
https://wa.me/919876543210?text=Hi%2C%20I%20have%20a%20question. Debe abrir WhatsApp con el mensaje prellenado. - Agrega el botón donde tus visitantes lo vean: un bloque de Botón cerca de tu titular, un elemento del menú de navegación y/o el widget del pie de página.
- Para una versión fija, pega el HTML flotante en un widget de HTML personalizado y el CSS en CSS adicional, luego revisa en un viewport móvil.
- Si elegiste un plugin en su lugar, instálalo, ingresa el mismo número, selecciona posición y colores, y guarda.
- Rastrea los clics en GA4: da al enlace un id (por ejemplo
id="wa-float") y agrega un pequeño event listener, o usa las analíticas integradas de tu plugin.
document.getElementById('wa-float').addEventListener('click', function () {
gtag('event', 'whatsapp_click');
});- Prueba la página publicada en un teléfono real y en el escritorio, y confirma que el texto prellenado llega limpio — no
%20visible en el cuadro de chat.
Mensajes prellenados para enviar después del clic
El parámetro wa.me text prellena el primer mensaje del visitante. Los seguimientos que envíes después — acuses de recibo, seguimientos de cotizaciones — se ejecutan como plantillas a través de la API, usando {{1}}, {{2}} variables de estilo para que una plantilla aprobada sirva para cada cliente.
| Propósito | Variables de ejemplo | Cuándo enviar |
|---|---|---|
| Acuse de recibo de la consulta | {{1}} nombre, {{2}} producto/servicio | En minutos del clic |
| Seguimiento de la cotización | {{1}} nombre, {{2}} referencia de la cotización | Un día después de la primera respuesta |
"Hola {{1}}, gracias por contactarnos en WhatsApp. Tu consulta sobre {{2}} está con nuestro equipo — espera una respuesta dentro de una hora hábil."
"Hola {{1}}, aquí está la cotización que discutimos para {{2}}. ¿Te ayudaría una llamada breve esta semana a decidir?"
FAQ
¿Necesito un complemento para agregar un botón de WhatsApp a WordPress? No. Un enlace simple wa.me funciona en cualquier lugar donde WordPress acepte un enlace: un bloque de Botón, un elemento de menú, un widget o una plantilla de tema. Un complemento solo ayuda cuando quieres un botón flotante con segmentación por dispositivo, programación o múltiples agentes sin tocar el código.
¿Es gratis un botón de chat de WhatsApp? Sí. Los enlaces de click-to-chat son gratuitos e ilimitados porque la conversación ocurre en la propia aplicación de WhatsApp del cliente, y las versiones de complemento gratuitas cubren lo básico. Solo pagas las tarifas por mensaje de Meta cuando comienzas a enviar mensajes iniciados por la empresa a través de la API de WhatsApp Business.
¿Un botón de click-to-chat puede hacer que mi número sea bloqueado? No — el cliente inicia el chat, que es exactamente el comportamiento que Meta quiere. Los bloqueos provienen de envíos masivos no solicitados, generalmente enviados a través de herramientas no oficiales. Un botón que invita a las personas a enviarte un mensaje es una de las formas más seguras de construir una audiencia con aceptación previa.
¿Cuál es la diferencia entre un botón de chat y la API de WhatsApp Business? Un botón de chat abre una conversación; no puede enviar nada por sí mismo. La API envía mensajes automáticos — confirmaciones de pedidos, recordatorios de reservas, recuperación de carritos — a muchos clientes a la vez usando plantillas aprobadas, y le da a todo su equipo una bandeja de entrada compartida para las respuestas.
Llamada a la acción final
Un botón de chat hace que los visitantes comiencen a conversar; la API mantiene la conversación en movimiento sin que nadie tenga que copiar y pegar. El Tech Pad funciona con la API oficial de WhatsApp Cloud y te ofrece una bandeja de entrada compartida para el equipo, un Copiloto de IA, un centro de Plantillas, campañas y analíticas, además de 26 conectores gratuitos para WordPress (lista completa en [/plugins/](/plugins/), precios en [/pricing](/pricing)). Tu primer mes es gratis cuando comienzas, y cada negocio que refieras que se registre y conecte un número de WhatsApp te da un mes gratuito — hasta 5 meses adicionales gratuitos — hasta un total de 6 meses gratis. Configura tu botón hoy y agrega la capa de API el día en que la notificación del primer pedido se vuelva una tarea manual — comienza en [/wa/](/wa/).