Contacto a un toque, siempre
Está visible en cualquier página y en cualquier punto del scroll. El visitante nunca tiene que buscar «¿cómo los contacto?»: la respuesta lo acompaña a donde vaya.
Módulo del sitio · WhatsApp flotante
El WhatsApp flotante: el contacto que te sigue
El botón verde fijo en una esquina, visible en cada página y en cada punto del scroll. Pequeño y discreto, pero deja el canal de contacto favorito de la gente a un solo toque, siempre.
No es una ficha técnica más: es el módulo entero, abierto y explicado. Qué problema resuelve y por qué se gana su lugar, de qué piezas se compone, dónde encaja en el layout y cómo está construido —el recorrido completo, del criterio de diseño a la implementación.
Y todo se apoya en un mismo principio: una única fuente de verdad. El número y el mensaje viven en site.ts y el enlace se arma con waUrl(); por eso lo ajustas una sola vez y el cambio se propaga, idéntico y sin sorpresas, a cada página del sitio.
Definición
¿Qué es el WhatsApp flotante?
Un botón fijo, anclado a una esquina de la pantalla, que abre WhatsApp con un mensaje ya listo. Acompaña al visitante por todo el sitio.
El WhatsApp flotante (o FAB de contacto, por «floating action button») es ese botón verde que se queda quieto en una esquina mientras el resto de la página se desplaza. No pertenece a una sección concreta: flota por encima del contenido, así que está presente lo mismo en el hero que al final de un artículo largo.
Su forma dice lo que hace sin leerse: el logo de WhatsApp es reconocible al instante y el verde lo confirma. Piensa en él como el timbre junto a la puerta: no es la fachada ni el escaparate, pero cuando alguien decide tocar, está justo donde la mano lo busca.
Función e importancia
¿Para qué sirve?
Quita la fricción del «¿cómo los contacto?»: pone el canal favorito de la gente a un toque, en cualquier página y en cualquier momento.
Su función es ser la vía de escape rápida hacia una conversación. Mientras el contenido informa y convence, el botón resuelve la pregunta práctica que aparece en cuanto hay interés: «quiero preguntar algo, ¿por dónde?». Tener esa respuesta siempre a la vista atrapa la intención justo en el instante en que surge.
Y ahí está su importancia: muchas consultas se pierden por un segundo de duda —el visitante no vio claro cómo escribir y se fue—. El botón flotante elimina ese punto de fuga llevando el contacto al canal donde la gente ya se siente cómoda. Es de los elementos más pequeños del sitio y de los que más trabajan por la conversión.
Cero fricción a su canal favorito
WhatsApp es donde la gente ya conversa a diario. Llevar el contacto a ese terreno —con el mensaje pre-armado— convierte una duda en una conversación, sin formularios ni esperas.
Convierte sin robar protagonismo
Ocupa una esquina, no el contenido. Está cuando se le busca y se aparta cuando no, así suma conversaciones sin estorbar la lectura ni competir con el CTA principal.
Anatomía
¿Qué lleva el botón?
Poco y bien elegido: un ícono que se reconoce, una etiqueta que invita, un enlace con mensaje y un anclaje que lo mantiene siempre a mano.
Cada pieza se gana su lugar. El ícono comunica el canal sin palabras; la etiqueta empuja el primer toque; el enlace abre WhatsApp con el mensaje ya escrito; y el anclaje fijo es lo que lo vuelve «flotante», por encima del contenido y respetando el borde del teléfono.
Abajo lo ves montado como aparece en una esquina de la página. Cada punto numerado se desglosa en su tarjeta —qué resuelve y de qué pieza de la plantilla sale—, para que distingas de un vistazo qué es diseño y qué es dato.
1 2¿Necesitas ayuda?
Ícono de WhatsApp
El logo de WhatsApp en SVG inline (sin imagen que cargar). Es el código universal de «escríbeme por aquí»: se reconoce al instante y no necesita texto para entenderse.
Dato SVG inline · currentColor
Etiqueta
Un texto corto junto al ícono —«¿Necesitas ayuda?»— que invita a la acción en escritorio. En móvil se colapsa y queda solo el círculo, para no robarle pantalla al contenido.
Dato prop label
Enlace + mensaje
El destino: abre wa.me con un mensaje ya escrito para que la conversación empiece con contexto, no en «hola». El enlace SIEMPRE se arma con waUrl() y el texto sale de WA_MESSAGES.
Dato waUrl(WA_MESSAGES.x)
Anclaje fijo
Lo que lo vuelve «flotante»: queda pegado a una esquina, por encima de todo (z-index alto) y respeta el área segura del iPhone para no caer bajo la barra de gestos.
Dato position: fixed · z-index · safe-area
Variantes
Otros diseños y aplicaciones
El de esta plantilla es una pastilla con etiqueta, pero el botón flotante adopta muchas formas según el negocio y el canal.
No hay un único botón flotante: hay una acción anclada a una esquina que cada sitio adapta a su objetivo. Un negocio local quiere que le escriban por WhatsApp; una tienda lanza una campaña; una marca cuidada prefiere lo mínimo. Mismo lugar, intención distinta.
Abajo, seis variantes reales —cada una con una réplica en vivo y el tipo de proyecto donde brilla—. Sirven para reconocer cuál te conviene y para ver cómo el mismo patrón se reescribe sin perder su sitio.
- ¿Necesitas ayuda?
-
- ¿Te ayudo? 👋 1
- ＋
- ¡Hola! 👋 ¿Te ayudamos a cotizar? Escríbenos
-
Responsive y móvil
Cómo se comporta en el teléfono
En móvil el botón no es «el de escritorio encogido»: decide qué se ve, dónde se ancla y cómo no estorbar el pulgar ni el contenido.
En el teléfono cada píxel cuenta, así que el botón se adelgaza: la etiqueta se va y queda el círculo, que se reconoce solo. Pero su razón de ser —ser tocable y estar a mano— se cuida más que nunca: crece al objetivo táctil de 44–52 px y se ancla en la zona cómoda para una sola mano.
Y manda la convivencia: el botón vive sobre el contenido, así que no debe tapar el cierre ni un CTA, y tiene que respetar el borde del iPhone para no caer bajo la barra de gestos. Abajo, cuatro patrones, cada uno con su vista en el teléfono y una receta comentada lista para copiar.
1 · La etiqueta se colapsa
En escritorio es una pastilla con texto que invita; al estrecharse la pantalla cae la etiqueta y queda solo el círculo verde, que ya comunica el canal sin ayuda. Menos ancho ocupado, mismo mensaje.
/* WHATSAPP FLOTANTE · etiqueta colapsable
En escritorio: ícono + un texto que invita a la acción.
En móvil el espacio es oro → queda solo el círculo. */
.wa-float {
display: inline-flex; align-items: center; gap: .5rem;
padding: .75rem 1rem; /* pastilla con texto */
border-radius: 9999px;
background: #25D366; color: #fff;
}
@media (max-width: 640px) {
.wa-float__label { display: none; } /* 1º cae el texto */
.wa-float { padding: .75rem; } /* vuelve círculo */
}2 · Respeta el borde del iPhone
Con viewport-fit=cover el sitio usa toda la pantalla, así que el botón se separa del borde con env(safe-area-inset-bottom) para no quedar bajo la barra de gestos ni el notch. Siempre tocable, nunca a medias.
/* ANCLAJE QUE RESPETA EL iPhone
Fijo en la esquina inferior derecha, por encima de todo, y
separado de la barra de gestos con la safe-area (iOS). */
.wa-float {
position: fixed;
right: max(1rem, env(safe-area-inset-right));
bottom: max(1rem, env(safe-area-inset-bottom));
z-index: 9999; /* por encima del contenido */
box-shadow: 0 4px 16px rgba(37,211,102,.4);
}3 · No tapar el contenido ni el cierre
El botón flota sobre la página, así que no debe sentarse encima de un CTA o del footer. Un patrón simple: cuando el cierre entra en pantalla, el botón sube unos píxeles para cederle el paso —sin librerías, con un observador nativo—.
<!-- NO TAPAR EL CIERRE
Cuando el footer (o un CTA importante) entra en pantalla,
el botón sube un poco para no taparlo. Sin librerías. -->
<script>
const fab = document.querySelector('.wa-float');
const footer = document.querySelector('footer');
new IntersectionObserver(([e]) => {
fab.classList.toggle('wa-float--up', e.isIntersecting);
}).observe(footer);
</script>
<style>
.wa-float { transition: transform .2s ease; }
.wa-float--up { transform: translateY(-72px); }
</style> 52px
4 · Cómodo de tocar con el pulgar
En el teléfono el círculo crece a 52 px —por encima del mínimo de 44 px de Apple y WCAG— y al ser un enlace real es accesible por teclado y lectores de pantalla, con un foco visible claro al tabular.
/* OBJETIVO TÁCTIL CÓMODO
En móvil el círculo crece a 52px y el enlace ya es un <a>:
tocable por teclado y lectores de pantalla de fábrica. */
@media (max-width: 640px) {
.wa-float {
width: 52px; height: 52px; /* ≥ 44px (iOS HIG · WCAG) */
display: grid; place-items: center;
}
}
.wa-float:focus-visible {
outline: 3px solid rgba(37,211,102,.5);
outline-offset: 2px;
}Posición
¿Dónde se coloca?
Fijo en la esquina inferior derecha, por encima de todo y en todas las páginas. No pertenece a una sección: flota sobre el contenido.
Va anclado a una esquina —por convención, la inferior derecha, al alcance del pulgar— y se queda ahí pase lo que pase con el scroll. Al estar fijo (position: fixed) con un z-index alto, vive en una capa por encima del contenido, así que acompaña al visitante por toda la página sin moverse.
Y va en TODAS las páginas, idéntico, porque se monta una sola vez en el layout —no se pega página por página—. Esa constancia es parte de su valor: el visitante aprende dónde está el contacto y lo encuentra siempre en el mismo lugar, en la home o en la ficha más profunda del catálogo.
Implementación
Cómo está construido
Un componente, montado una vez en el layout, con el enlace armado solo desde site.ts. Cambias el número o el mensaje una vez y cambia en todo el sitio.
El botón vive en el componente WhatsAppFloat.astro, pero no guarda ningún dato propio: el número y el mensaje salen de site.ts y el enlace lo arma waUrl(). Por eso actualizar el WhatsApp del negocio es un solo ajuste, en un solo lugar, que se refleja en cada página.
El enlace nunca se escribe a mano: es la regla dura D4. waUrl() centraliza el número y el encoding, y el texto precargado sale de WA_MESSAGES, así el lead entra en materia desde el primer toque. El botón es accesible (es un enlace con aria-label, ícono oculto a lectores) y responsive: pastilla con etiqueta en escritorio, círculo táctil en móvil.
En concreto, así se reparten las responsabilidades: el componente
(src/components/WhatsAppFloat.astro) pone el diseño y el comportamiento; el
contenido (src/config/site.ts) pone los datos. El componente
recibe dos props opcionales —message (una clave de WA_MESSAGES) y
label (el texto de la etiqueta)— y construye el destino con
waUrl(WA_MESSAGES[message]). Cero número hardcodeado (regla D4).
Se monta una sola vez en PageLayout.astro (el chrome estándar:
Header + Breadcrumbs + contenido + Footer + WhatsAppFloat), así que cada página que usa ese
layout hereda el botón sin hacer nada. El responsive vive en el propio
componente: en < 640px se oculta la etiqueta y la pastilla se vuelve un
círculo, anclado con env(safe-area-inset-bottom) para respetar el iPhone.
Buenas prácticas
Qué hacer y qué evitar
La diferencia entre un botón flotante que convierte y uno que molesta está en unos pocos hábitos.
Ninguno de estos hábitos es capricho: salen de observar qué acerca al visitante y qué lo aleja. Un botón que ayuda mantiene el foco en el contacto y respeta el contenido; uno que estorba tapa el CTA, salta solo o multiplica acciones hasta volverse ruido.
La ventaja es que son pocos y se sostienen solos en cuanto respetas la fuente única: número y mensaje en site.ts, enlace con waUrl(), y un solo botón ligero. Abajo, lo que conviene y lo que conviene evitar, enfrentados.
Sí conviene
- Precarga un mensaje con contexto (WA_MESSAGES): la conversación arranca en materia, no en «hola».
- Arma el enlace con waUrl(): centraliza el número y el encoding (regla dura D4).
- Respeta el área segura del iPhone (env(safe-area-inset-bottom)) para que no caiga bajo la barra de gestos.
- En móvil colápsalo a solo ícono y deja un objetivo táctil de 44–52 px.
- Un solo botón flotante y un solo canal principal: claridad, no ruido.
Mejor evita
- No escribas el wa.me ni el número a mano dentro del componente (regla dura D4).
- No tapes el contenido ni el CTA principal: súbelo cuando aparezcan el footer o un formulario.
- No abuses de pop-ups que salten solos ni de animaciones que distraigan.
- No multipliques botones flotantes (WhatsApp + Messenger + llamar + subir…): se vuelve ruido.
- No dejes el mensaje DEMO en producción: el texto pre-armado debe ser el real.