Cómo poner botón de WhatsApp en tu web (2026): Código + mejores prácticas
Resumen: Botón WhatsApp web 2026: API oficial de WhatsApp (wa.me/34XXXXXXXXX), botón flotante CSS, mensaje pre-escrito, icono verde visible. Plugins WordPress: Click to Chat, WP Social Chat. Alternativa: web con IA incluye WhatsApp automático, desde ~€17/mes.
Por qué WhatsApp en tu web (España, 2026)
En España, WhatsApp es el canal #1 de contacto — supera email y teléfono:
- 95% españoles usan WhatsApp (vs. 40% email diario)
- Conversión: 3–5x más alta que formulario web
- Respuesta instantánea = cliente no se va a la competencia
- Familiaridad: el usuario ya sabe usar WhatsApp
Obligatorio para: Autónomos, servicios locales, comercios, restaurantes, clínicas.
Método 1: Código HTML simple (para cualquier web)
Paso 1: Número WhatsApp Business
Formato internacional: 34XXXXXXXXX (sin +, sin espacios).
Ejemplo: 34612345678 (España = código 34).
Paso 2: URL de WhatsApp
https://wa.me/34XXXXXXXXX?text=Hola,%20me%20gustaría%20información%20sobre...
Partes:
wa.me/— API oficial de WhatsApp34XXXXXXXXX— tu número?text=— mensaje pre-escrito (opcional pero recomendado)%20— espacio en URL
Paso 3: Botón flotante (HTML + CSS)
Pega este código antes de </body>:
<!-- Botón flotante WhatsApp -->
<a href="https://wa.me/34XXXXXXXXX?text=Hola,%20me%20gustaría%20información"
class="whatsapp-float"
target="_blank"
aria-label="Contactar por WhatsApp">
<svg width="40" height="40" viewBox="0 0 40 40" fill="white">
<path d="M20 0C8.954 0 0 8.954 0 20c0 3.516.914 6.816 2.512 9.688L0 40l10.563-2.438C13.366 39.148 16.584 40 20 40c11.046 0 20-8.954 20-20S31.046 0 20 0zm0 36.5c-3.234 0-6.266-.906-8.84-2.48l-.633-.375-6.563 1.5 1.563-6.375-.438-.656C3.125 25.625 2.5 22.875 2.5 20c2.5 9.125 11.875 16.5 20 16.5S37.5 29.125 37.5 20 30.125 3.5 20 3.5zm10.313 21.875c-.563-.281-3.313-1.656-3.828-1.844-.516-.187-.891-.281-1.266.281-.375.563-1.453 1.844-1.781 2.219-.328.375-.656.422-1.219.141-.563-.281-2.375-.875-4.516-2.781-1.672-1.484-2.797-3.328-3.125-3.891-.328-.563-.031-.875.25-1.156.25-.25.563-.656.844-1.031.281-.328.375-.563.563-.938.187-.375.094-.703-.047-.984-.141-.281-1.266-3.047-1.734-4.172-.469-1.094-.938-1.094-1.266-1.094-.328 0-.703-.047-1.078-.047-.375 0-.984.141-1.5.703-.516.563-1.969 1.922-1.969 4.688s2.016 5.438 2.297 5.813c.281.375 3.938 6.047 9.563 8.484 1.344.563 2.391.938 3.203 1.172.938.281 1.797.234 2.484.141.766-.094 2.344-.984 2.813-1.922.469-1.031.469-1.875.328-2.063-.094-.187-.469-.281-1.031-.563z"/>
</svg>
</a>
<style>
.whatsapp-float {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
background: #25D366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 999;
transition: transform 0.3s ease;
}
.whatsapp-float:hover {
transform: scale(1.1);
}
</style>
Cambia: 34XXXXXXXXX por tu número, y el texto del mensaje.
Método 2: Plugin WordPress
Opción A: Click to Chat (más usado)
- Instala plugin «Click to Chat» (gratis)
- Ajustes → Click to Chat
- Número WhatsApp (con código país: 34)
- Mensaje pre-escrito
- Estilo: Flotante, esquina inferior derecha
- Guardar
Opción B: WP Social Chat
Similar, más opciones de diseño (botones múltiples, horarios).
Método 3: WebZum (automático)
WebZum incluye botón WhatsApp automático:
- Al crear la web, mencionas tu número de WhatsApp
- IA coloca botón flotante verde, posición óptima
- Mensaje pre-escrito adaptado a tu negocio
- Responsive (también móvil)
Precio: Desde ~€17/mes, todo incluido.
Mejores prácticas WhatsApp en web (2026)
1. Mensaje pre-escrito SIEMPRE
❌ Malo: https://wa.me/34XXXXXXXXX (usuario escribe desde cero)
✅ Bueno: https://wa.me/34XXXXXXXXX?text=Hola,%20me%20gustaría%20un%20presupuesto%20de%20[SERVICIO]
Por qué: Usuario sabe qué decir, tú sabes de dónde viene (web).
2. Personaliza mensaje según página
- Página inicio: «Hola, me gustaría información general»
- Página servicios: «Hola, me interesa el servicio de [X]»
- Página precios: «Hola, quiero un presupuesto»
3. Color verde (#25D366)
Es el verde oficial de WhatsApp — familiar, reconocible.
4. Botón flotante (esquina inferior derecha)
- Siempre visible (scroll)
- No tapa contenido importante
- Tamaño: 60×60px escritorio, 55×55px móvil
5. Icono sin texto (móvil)
En móvil, solo icono verde. En escritorio, puedes añadir texto «WhatsApp» al lado.
6. Horario de atención (opcional)
Si no respondes 24/7, añade texto: «Horario: L-V 9h–18h».
Plugins como WP Social Chat pueden ocultar botón fuera de horario.
7. Múltiples números (raro)
Si tienes varios departamentos (ventas, soporte), usa plugin que permita selección o dos botones flotantes.
WhatsApp Business vs. WhatsApp normal
WhatsApp normal:
✓ Gratis
✓ Suficiente para autónomos y pymes
✗ Sin etiquetas de conversación
✗ Sin respuestas automáticas
WhatsApp Business (app):
✓ Gratis
✓ Perfil profesional (horario, dirección, web)
✓ Respuestas rápidas
✓ Etiquetas conversaciones
✓ Estadísticas básicas
WhatsApp Business API (empresa):
✓ Múltiples agentes
✓ Integración CRM
✗ Pago (desde €0.005/mensaje)
✗ Necesita proveedor (Twilio, MessageBird)
Recomendación: Usa WhatsApp Business (app) — gratis y suficiente.
Ejemplo mensaje pre-escrito por sector
Fontanero / Reformas:
Hola, necesito presupuesto de [fontanería/reforma]. ¿Podéis ayudarme?
Restaurante:
Hola, me gustaría reservar mesa para [número] personas.
Clínica / Consulta:
Hola, quisiera pedir cita para [servicio]. ¿Tenéis disponibilidad?
Abogado / Consultor:
Hola, me gustaría una primera consulta sobre [tema].
Tienda / Comercio:
Hola, tengo una pregunta sobre [producto].
Preguntas frecuentes
¿Es gratis poner WhatsApp en la web?
Sí. La API wa.me es gratuita. Solo pagas si usas WhatsApp Business API (empresas grandes).
¿Funciona en cualquier dispositivo?
Sí:
- Móvil: Abre app WhatsApp
- Escritorio: Abre WhatsApp Web (si está instalado) o pide escanear QR
¿Necesito WhatsApp Business?
No es obligatorio para el botón, pero sí recomendado (perfil profesional, respuestas rápidas).
¿Puedo saber cuántos clics tiene mi botón?
Con Google Analytics 4: evento de clic en enlace saliente (wa.me). Plugins WordPress suelen tener estadísticas.
¿El botón molesta?
Si está bien posicionado (esquina, no tapa contenido), NO. Es esperado en España.
Pruébalo ahora — la vista previa es gratis
Escribe el nombre de tu negocio y verás tu web lista en unos 5 minutos. Sin tarjeta.
Crea tu web gratis