# Cómo poner un botón de WhatsApp en tu web

> HTML y CSS para poner un botón de WhatsApp inline o flotante, hacerlo accesible y medir clics sin confundirlos con consultas.

Para un botón simple no necesitas un plugin: alcanza con un enlace a WhatsApp y CSS. Aquí tienes dos snippets copiables, una versión inline y otra flotante, más una forma honesta de medir clics y conversaciones.

Un enlace con HTML y CSS suele alcanzar cuando quieres abrir un chat. Un widget puede tener sentido si necesitas horarios, consentimiento, routing o integración con CRM; elígelo por esas funciones y mide su impacto, no solo por llamarse plugin.

## Primero, genera tu enlace

Crea aquí el enlace con tu número y un mensaje breve. Después reemplaza TU-LINK en cualquiera de los ejemplos.

*(En la versión web de esta guía hay un generador gratuito embebido en este punto. La herramienta completa está en https://taap.at/crear/whatsapp — Link de WhatsApp, sin registro.)*

## Opción 1: botón inline

Este enlace ya funciona como botón de texto. target="_blank" es opcional: úsalo si quieres abrir otro contexto y conserva rel="noopener".

> <a href="TU-LINK" target="_blank" rel="noopener">Escríbenos por WhatsApp</a>

El texto visible explica el propósito a todas las personas, también a quienes usan lector de pantalla. Si dejas solo un icono, agrega aria-label="Escríbenos por WhatsApp" y mantén un indicador de foco visible.

## Opción 2: botón flotante con HTML y CSS

Pega el HTML en el cuerpo y el CSS en tu hoja de estilos o bloque de CSS personalizado. El ejemplo queda abajo a la derecha, respeta el área segura de iPhone y muestra el foco de teclado:

> <a class="wa-float" href="TU-LINK" target="_blank" rel="noopener">WhatsApp</a>

.wa-float { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 1000; padding: .8rem 1rem; border-radius: 999px; color: #fff; background: #087f5b; font-weight: 700; text-decoration: none; box-shadow: 0 4px 16px #0003; }
.wa-float:focus-visible { outline: 3px solid #111; outline-offset: 3px; }
@media (max-width: 480px) { .wa-float { right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); } }

> **Pruébalo donde hay fricción real**
>
> Revisa celular y escritorio con el banner de cookies, el carrito y el teclado abiertos. Cambia right por left si tapa una acción principal. Un z-index alto no justifica cubrir checkout, accesibilidad o soporte existente.

## Dónde instalarlo

| Entorno | Implementación | Chequeo |
| --- | --- | --- |
| HTML propio | Pega el enlace y el CSS en tu plantilla. | Prueba foco, móvil y destino. |
| WordPress | Usa un bloque HTML y el CSS adicional del tema. | Que el editor no elimine atributos. |
| Builder | Usa su botón nativo con TU-LINK. | No hace falta código si acepta URL y posición. |
| GTM | Resérvalo para equipos que ya gobiernan cambios por etiquetas. | Revisa permisos, CSP y mantenimiento. |

## Qué texto poner

- «Escríbenos por WhatsApp» describe mejor el destino que «Contacto».
- Si tienes horario de atención, ponlo al lado para ajustar expectativas.
- No abras una burbuja automática sin probarla: puede competir con la tarea principal o tapar contenido.
- En una página de precios, prueba un texto específico como «Consultar por planes» contra el genérico.

## Cómo medir clics, conversaciones y ventas

GA4 puede registrar el evento click para un enlace saliente a wa.me con la medición mejorada. Un link corto distinto por ubicación agrega aperturas, país y dispositivo incluso fuera de tu web. En ambos casos mides el paso hacia WhatsApp, no que el mensaje se haya enviado.

1. **Separa las ubicaciones** — Usa un enlace o identificador distinto para el flotante, la ficha y el pie.
2. **Cuenta la apertura** — Mídela con GA4 outbound click o con el link corto. Elige una fuente primaria para no duplicar.
3. **Marca la conversación y la venta** — Usa un mensaje precargado por ubicación y una etiqueta o CRM después del envío.
4. **Prueba una variable por vez** — Ubicación, texto u horario, con ventana y criterio definidos antes de mirar resultados.

> **Límites del link medido Free**
>
> Free muestra siete días de métricas y admite 100 clics por mes; luego aparece una página intermedia con publicidad. La edición de destino está disponible en Basic y Premium.

## Preguntas frecuentes

### ¿Necesito un plugin para poner WhatsApp en mi web?

No para un botón simple: un enlace y CSS alcanzan. Un widget sí puede servir para horarios, consentimiento, routing o CRM. Mide su peso y utilidad en tu sitio antes de decidir.

### ¿Funciona en computadora?

Sí. Si la persona tiene WhatsApp de escritorio puede abrir la app; si no, usa WhatsApp Web. El mensaje precargado se mantiene.

### ¿Puedo poner varios números?

Un enlace wa.me abre un solo número. Para repartir tráfico entre varios, crea un link genérico con destinos ponderados; el generador específico de WhatsApp no arma ese reparto directamente.

### ¿El botón flotante afecta la velocidad de mi web?

Un enlace con CSS puede ser liviano, pero iconos, fuentes y estilos también pesan. Un widget agrega recursos y scripts. Mide Lighthouse y Core Web Vitals antes y después en vez de asumir el efecto.

### ¿Cómo sé qué botón de mi web genera más consultas?

Usa un identificador o link distinto por ubicación para contar aperturas y un mensaje, etiqueta o CRM para confirmar conversación y venta. Un clic solo no demuestra que hubo consulta.

---

Versión web de esta guía: https://taap.at/guias/boton-de-whatsapp-para-tu-web
Herramienta gratuita relacionada: https://taap.at/crear/whatsapp

---

Parte de la documentación de taap.at. Índice: https://taap.at/llms.txt