Cómo poner un botón de WhatsApp en tu web
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.
4 min de lecturaActualizado el
En esta página
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.
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.
Que sea tuyo, no expire y mida cada clic
Lo que generaste aquí dura 30 días y no registra métricas. Con una cuenta gratuita pasa a tu panel, deja de expirar y empieza a contar clics con país, dispositivo y origen.