Para añadir WhatsApp a una web sin plugins, crea un enlace con https://wa.me/ seguido de tu número internacional sin +, espacios ni guiones. Puedes convertirlo en un botón HTML y añadir un mensaje opcional codificado en la URL.
<a href="https://wa.me/34600111222" target="_blank" rel="noopener noreferrer">
Hablar por WhatsApp
</a>Número de ejemplo: reemplázalo por uno propio que tenga WhatsApp activo.
Cómo construir un enlace wa.me correctamente
WhatsApp ofrece enlaces «Click to Chat» que permiten abrir una conversación sin guardar el contacto. Funcionan en dispositivos compatibles con WhatsApp y, en escritorio, pueden mostrar las opciones de abrir la aplicación o WhatsApp Web.
| Parte | Ejemplo | Función |
|---|---|---|
| Dominio | https://wa.me/ | Acceso oficial al chat |
| Número | 34600111222 | País + número, solo dígitos |
| Mensaje | ?text=Hola%2C%20... | Texto precargado opcional |
El texto precargado no se envía automáticamente. El usuario debe decidir si pulsa enviar en WhatsApp.
<a href="https://wa.me/34600111222?text=Hola%2C%20quiero%20un%20presupuesto"
target="_blank" rel="noopener noreferrer">
Pedir presupuesto por WhatsApp
</a>Cómo crear un botón de WhatsApp con HTML y CSS
No es necesario instalar un plugin para tener un botón dentro de un contenido. Dale un texto visible, color adecuado y un foco identificable para usuarios de teclado.
<a class="whatsapp-contacto"
href="https://wa.me/34600111222"
target="_blank" rel="noopener noreferrer">
Escribir por WhatsApp
</a>
<style>
.whatsapp-contacto {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: .75rem 1rem;
border-radius: .75rem;
background: #146c43;
color: #fff;
font-weight: 700;
text-decoration: none;
}
.whatsapp-contacto:focus-visible {
outline: 3px solid #111827;
outline-offset: 3px;
}
</style>Puedes fijarlo con CSS, pero evita tapar el contenido, los banners de cookies o los controles de accesibilidad, especialmente en móvil. Un botón visible dentro de la sección de contacto suele bastar para muchos negocios.
Generador de enlaces de WhatsApp con mensaje
Escribe tu número y, si quieres, un mensaje inicial. Este generador funciona localmente en tu navegador: no envía los datos a Talestin.
El número debe incluir el prefijo del país.
Probar enlace generado ↗Cómo añadir WhatsApp en WordPress
- Edita la página o entrada donde quieras mostrarlo.
- Inserta un bloque Botones o HTML personalizado, según prefieras.
- Pega la URL
https://wa.me/...como enlace o inserta el HTML generado. - Comprueba en móvil y escritorio que se abre el contacto previsto.
Si usas un tema de bloques, también puedes situar un botón en una parte de la plantilla. No instales extensiones de chat de terceros únicamente por añadir un enlace básico.
Consejos de conversión, accesibilidad y privacidad
- Explica qué sucede: «Consultar por WhatsApp» es más claro que un icono sin etiqueta.
- Elige el momento: junto a precios, dudas o formularios de presupuesto suele tener más sentido que en cualquier sitio.
- Evita insistir: botones flotantes invasivos pueden obstaculizar el contenido.
- Protege los datos: no incluyas datos sensibles ni información personal de terceros en mensajes predefinidos.
- Diferencia clic y lead: medir el clic al botón no implica que el usuario haya enviado un mensaje.
- Revisa la identidad: si utilizas el botón oficial con marca de WhatsApp, respeta sus directrices visuales.
Preguntas frecuentes
¿Necesito WhatsApp Business para crear un enlace wa.me?
No necesariamente. El teléfono debe tener una cuenta de WhatsApp activa y el enlace debe seguir el formato admitido.
¿Cómo pongo un mensaje automático?
Puedes precargar texto con el parámetro ?text=, pero el usuario decide si lo envía. No es una automatización que envíe mensajes por sí sola.
¿Hace falta un plugin de WordPress?
No. Para un botón sencillo basta un enlace y estilos del editor o CSS.
¿Puedo usar el mismo enlace desde móvil y escritorio?
Sí. WhatsApp mostrará las opciones compatibles con el dispositivo o navegador.
Fuentes y documentación oficial
Una web útil, rápida y preparada para convertir.
Si tu proyecto necesita una nueva web, mejorar su rendimiento o resolver problemas técnicos, estudiaremos una solución adaptada.
Solicitar información ↗