Cómo agregar un botón de WhatsApp a tu página web (HTML y CSS)

Un botón de WhatsApp no necesita un plugin ni un script de terceros. Es un enlace común con un poco de estilo. Aquí tienes dos versiones listas para copiar.

Publicado el 6 de octubre de 2026 · Por el equipo de QLinky

Versión 1: botón dentro del contenido

Reemplaza el número y el mensaje por los tuyos (o genera el enlace con QLinky y pega la URL en el href).

<a class="btn-whatsapp"
   href="https://wa.me/529981234567?text=Hola%2C%20quiero%20informaci%C3%B3n"
   target="_blank" rel="noopener">
  Escríbenos por WhatsApp
</a>

.btn-whatsapp {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 8px;
  background: #128c7e;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.btn-whatsapp:hover { background: #0e6f64; }

Versión 2: botón flotante en una esquina

Queda fijo abajo a la derecha mientras la persona se desplaza por la página.

<a class="wa-flotante"
   href="https://wa.me/529981234567"
   target="_blank" rel="noopener"
   aria-label="Abrir chat de WhatsApp">
  WhatsApp
</a>

.wa-flotante {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1000;
  padding: 14px 18px;
  border-radius: 999px;
  background: #128c7e;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

Detalles que marcan la diferencia

• Texto visible o aria-label. Si el botón solo muestra un ícono, agrega aria-label para que los lectores de pantalla anuncien a dónde lleva.
• rel="noopener" cuando uses target="_blank", para que la página que se abre no tenga acceso a la tuya.
• Contraste. El verde claro clásico con texto blanco se lee mal. Un verde más oscuro, como el del ejemplo, mantiene el texto legible.
• Que no tape nada. Revisa en un celular que el botón flotante no quede encima del aviso de cookies, del carrito o del botón de enviar de un formulario.
• Un mensaje distinto por página. En la página de un producto puedes dejar escrito «Hola, consulto por el modelo X». Te ahorra la primera pregunta.

Dónde pegarlo según tu plataforma

• WordPress: agrega un bloque «HTML personalizado» con el enlace, y el CSS en Apariencia, Personalizar, CSS adicional.
• Constructores como Wix, Shopify o Squarespace: casi todos permiten crear un botón y asignarle una URL. Pega ahí el enlace wa.me y no necesitas código.
• Sitio hecho a mano: el HTML va donde quieras el botón y el CSS en tu hoja de estilos.

Cómo saber si lo usan

Un clic en el botón es un clic hacia otro dominio. Google Analytics 4 registra esos clics de salida automáticamente si tienes activada la medición mejorada, y los puedes filtrar por la URL de destino.