Cómo Integrar WhatsApp con WordPress

Tienes un sitio en WordPress y quieres que los visitantes te escriban por WhatsApp con un clic. Hay tres formas de hacerlo: con plugin, con código manual o con un link directo. Cada una tiene su momento — y voy a explicarte cuándo usar cuál.

Puntos Clave

• Un botón de WhatsApp en tu web puede aumentar conversiones entre 15-25%
• El método más rápido: un link generado en wplink.app + botón HTML
• Plugins como "Join.chat" añaden botón flotante sin tocar código
• Para máximo rendimiento, el código manual es más liviano que cualquier plugin

Método 1: Link Directo (Sin Plugin, Sin Código Complejo)

El camino más rápido. Generas tu link en wplink.app y lo insertas donde quieras.

Paso 1: Genera el link

Ve a wplink.app. Ingresa tu número con código de país y escribe el mensaje predeterminado:

"Hola, vengo de su página web y tengo una consulta 🌐"

Copia el link generado.

Paso 2: Insértalo en WordPress

Como botón en una página:

En el editor de bloques (Gutenberg), añade un bloque de "Botones". Pega el link como URL del botón. Texto: "Escríbenos por WhatsApp 💬".

En el menú de navegación:

Ve a Apariencia > Menús > Añadir enlace personalizado. Pega el link. Etiqueta: "WhatsApp".

En el footer o sidebar:

Usa un bloque HTML personalizado o widget de texto con este código:

<a href="TU_LINK_AQUÍ" target="_blank" rel="noopener" 
   style="display:inline-block;background:#25D366;color:white;
   padding:12px 24px;border-radius:8px;text-decoration:none;
   font-weight:bold;">
   💬 WhatsApp
</a>

Reemplaza TU_LINK_AQUÍ con el link de wplink.app.

Ventajas: Cero plugins, carga instantánea, funciona en cualquier tema.

Desventajas: No es un botón flotante persistente (está donde lo pongas, no sigue al scroll).

Método 2: Plugin de WhatsApp

Para un botón flotante que aparezca en todas las páginas sin editar código.

Los Mejores Plugins 2026

Join.chat (antes Joinchat)

El más completo y popular. Gratuito con opciones premium.

• Botón flotante personalizable
• Mensaje predeterminado por página
• Horarios de disponibilidad
• Tooltip con texto atractivo
• Compatible con WooCommerce
• Dark mode
• Analytics con Google Analytics / GTM

Instalación:

1. Ve a Plugins > Añadir nuevo > Busca "Join.chat"
2. Instala y activa
3. Ve a Join.chat en el menú lateral
4. Configura número, mensaje y posición

Social Chat by suspended (Widget WhatsApp)

Más simple. Ideal si solo quieres el botón y nada más.

• Botón flotante básico
• Múltiples agentes (cada uno con su número)
• Gratuito

Starter Templates / Starter Sites (Astra)

Si usas Astra, algunos starter templates ya incluyen integración de WhatsApp. Revisa antes de instalar un plugin adicional.

Cuándo Usar un Plugin

• Quieres botón flotante en todas las páginas
• No sabes editar código
• Necesitas funciones avanzadas (horarios, múltiples agentes, analytics)
• Usas WooCommerce y quieres integración con páginas de producto

Cuándo NO Usar un Plugin

• Tu sitio ya tiene muchos plugins (cada uno suma peso)
• Solo necesitas un link en una o dos páginas
• La velocidad de carga es crítica (Core Web Vitals)

Método 3: Botón Flotante con Código (Sin Plugin)

Máximo control, mínimo peso. Pegas este código en tu tema y listo.

El Código

Añade esto en Apariencia > Editor de temas > footer.php (antes de </body>) o mejor aún, en un plugin como "Code Snippets":

<!-- WhatsApp Floating Button -->
<a href="https://wa.me/TUNUMERO?text=Hola%2C%20vengo%20de%20su%20web"
   target="_blank" rel="noopener noreferrer"
   style="position:fixed;bottom:20px;right:20px;z-index:9999;
   background:#25D366;width:60px;height:60px;border-radius:50%;
   display:flex;align-items:center;justify-content:center;
   box-shadow:0 4px 12px rgba(0,0,0,0.15);transition:transform 0.3s;"
   onmouseover="this.style.transform='scale(1.1)'"
   onmouseout="this.style.transform='scale(1)'">
   <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="white">
     <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
     <path d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492a.5.5 0 00.611.611l4.458-1.495A11.943 11.943 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-2.347 0-4.522-.809-6.243-2.164l-.436-.348-2.634.883.883-2.634-.348-.436A9.956 9.956 0 012 12C2 6.486 6.486 2 12 2s10 4.486 10 10-4.486 10-10 10z"/>
   </svg>
</a>

Reemplaza TUNUMERO con tu número completo (código de país + número, sin signos).

Ventajas del Código Manual

• 0 KB de JavaScript adicional. Un plugin de WhatsApp puede cargar 50-100KB de JS. Este código pesa menos de 1KB.
• Sin dependencias. No se rompe con actualizaciones de WordPress ni conflictos de plugins.
• Personalización total. Cambias colores, tamaño, posición, animación — todo en CSS inline o tu hoja de estilos.

Dónde Pegar el Código

Optimización para Conversiones

Posición del Botón

Esquina inferior derecha es el estándar. El 85% de los botones de chat (WhatsApp, Intercom, Drift) están ahí. Tu visitante ya sabe dónde buscarlo.

Tooltip o Texto de Apoyo

Un botón verde sin contexto funciona. Pero un botón con tooltip "¿Dudas? Escríbenos" convierte un 18% más. Join.chat incluye esta función. Con código manual, añade un title al enlace.

Páginas Estratégicas

No pongas el botón en toda tu web sin pensar. Las páginas donde más convierte:

1. Páginas de producto — el visitante está considerando la compra
2. Página de contacto — ya busca comunicarse
3. Página de precios — tiene dudas antes de decidir
4. Landing pages de campañas — tráfico caliente

Mensaje Según la Página

Si usas Join.chat o código dinámico, cambia el mensaje predeterminado según la página:

• Página de producto: "Hola, tengo una pregunta sobre [producto]"
• Precios: "Hola, quiero más información sobre el plan [X]"
• Blog: "Hola, leí su artículo sobre [tema] y quiero saber más"

Preguntas Frecuentes

¿Un botón de WhatsApp afecta la velocidad de mi web?

Depende del método. Un plugin puede agregar 50-100KB de JavaScript. El método de código manual agrega menos de 1KB. Si la velocidad es prioridad (y debería serlo), el código manual gana.

¿Funciona en móvil?

Sí. Los tres métodos funcionan en móvil. En dispositivos con WhatsApp instalado, el link abre la app directamente. En escritorio, abre WhatsApp Web.

¿Puedo tener múltiples números de WhatsApp?

Con plugins como Join.chat, sí — puedes configurar diferentes agentes. Con el método manual, necesitarías crear múltiples botones o un selector.

¿Es compatible con WooCommerce?

Join.chat tiene integración nativa con WooCommerce. Puede mostrar el nombre del producto en el mensaje predeterminado automáticamente. Los otros métodos requieren personalización manual.

¿Necesito WhatsApp Business para esto?

No es obligatorio, pero sí recomendado. WhatsApp Business te da perfil de empresa, respuestas rápidas y etiquetas — herramientas que complementan perfectamente el botón en tu web.

Conclusión

Integrar WhatsApp con WordPress no debería tomar más de 10 minutos. Si quieres lo más simple, genera tu link en wplink.app y pégalo como botón. Si quieres flotante sin código, instala Join.chat. Si quieres máximo rendimiento, usa el código HTML directo.

Lo que no deberías hacer es dejar tu web sin un canal directo a WhatsApp. Cada visitante que se va sin contactarte es una conversación que nunca existió.