El cierre del servicio es waUrl() como fuente única del CTA de WhatsApp, un solo botón principal de conversión, un SectionMenu que retiene al visitante no listo, y el WhatsApp flotante como respaldo global.
WhatsApp convierte más que el formulario en el mercado mexicano de pymes. La regla del sistema es clara: waUrl(WA_MESSAGES.servicios) en el CTA principal, nunca wa.me escrito a mano. Un cambio de número es una sola línea en site.ts; sin eso, hay que buscar y reemplazar en decenas de archivos.
El anti-patrón más común en el cierre es la acumulación: formulario + WhatsApp + «Llámanos» + chat en vivo + pop-up compitiendo en la misma zona. Cada CTA añadido por encima del primero reduce las conversiones. Un CTA claro produce más contactos que tres ambiguos.
Definición
El conjunto de piezas del cierre de la ficha L3 que mueven al visitante del «me interesa» al «voy a escribir»: waUrl(), el CTA principal, el SectionMenu de retención y el WhatsApp flotante.
La conversión en un catálogo de servicios es el momento en que el visitante decide dar el primer paso: escribir por WhatsApp. Ese primer paso tiene tres capas. La primera es el CTA principal —un botón que dice exactamente qué va a pasar («Cotizar por WhatsApp») y usa waUrl() para llevar al visitante a WhatsApp con el mensaje de apertura correcto. La segunda es el SectionMenu, que retiene al visitante no listo dándole el siguiente paso natural dentro del sitio. La tercera es el WhatsApp flotante de PageLayout, que aparece en todas las páginas como respaldo siempre visible.
Lo que une las tres capas es waUrl(): la función de site.ts que construye la URL de WhatsApp con el número y el mensaje de apertura encodeados correctamente. Nunca se escribe wa.me/<número> a mano en un componente o una página: el número y el mensaje viven en un solo lugar y se propagan solos.
Función e importancia
Convierte la intención del visitante en un primer contacto con la menor fricción posible. waUrl() centraliza el número. Un CTA elimina la parálisis de decisión. El SectionMenu recupera al visitante que no convierte.
La función del cierre es reducir la distancia entre «me interesa» y «voy a escribir». Cada elemento de fricción en ese camino —URL de WhatsApp rota, texto del CTA ambiguo, múltiples botones compitiendo, página sin salida para quien no está listo— reduce las conversiones. El sistema resuelve cada uno de esos problemas con una pieza concreta.
waUrl() elimina URLs rotas o desactualizadas. Un CTA principal con texto preciso elimina la ambigüedad. El SectionMenu elimina el callejón sin salida. El WhatsApp flotante elimina el caso donde el visitante quiere escribir pero ya subió de la zona del CTA.
Cambiar el número de WhatsApp o el mensaje de apertura de un servicio es editar una sola línea en site.ts. Todos los CTAs del sitio que usan waUrl() se actualizan en el siguiente build. Cero wa.me hardcodeados que se quedan desactualizados.
Múltiples CTAs compitiendo en el mismo cierre (formulario + WhatsApp + chat + pop-up) generan parálisis de análisis: el visitante no sabe a dónde ir y no va a ningún lado. Un CTA principal claro produce más contactos que tres CTAs ambiguos.
No todos los visitantes que llegan a una ficha de servicio están listos para contratar. El SectionMenu de cierre les ofrece el siguiente paso natural: otro servicio, el catálogo o el contacto. Sin él, el visitante que no convierte simplemente se va.
Anatomía
Cinco piezas: waUrl() como constructora de la URL, WA_MESSAGES como fuente del mensaje, el CTA principal (un botón), el SectionMenu de retención y el WhatsApp flotante global.
El cierre no es un elemento: es un sistema de cinco piezas que trabajan juntas. Dos son helpers de site.ts (waUrl y WA_MESSAGES), dos son componentes de la ficha (el CTA + SectionMenu) y uno es global en PageLayout (WhatsAppFloat).
Abajo, las cinco piezas anotadas con su función.
La función waUrl(message) de site.ts construye la URL de WhatsApp: encoda el número y el mensaje de apertura correctamente. Nunca se escribe wa.me/<número> a mano en componentes ni páginas. Un solo lugar para cambiar el número o el mensaje.
Dato waUrl(WA_MESSAGES.servicios) — nunca wa.me hardcodeado
El objeto WA_MESSAGES en site.ts tiene un mensaje por contexto de conversión: servicios, productos, cotizacion, contacto. El mensaje de apertura correcto baja la fricción del primer clic: el cliente llega a WhatsApp con su intención ya expresada, no con una pantalla en blanco.
Dato WA_MESSAGES.servicios: string — fuente única del mensaje de apertura
El cierre tiene UN botón principal de conversión: «Cotizar este servicio» o equivalente, usando waUrl(). Un solo CTA elimina la fatiga de decisión. El botón secundario («Ver otros servicios») y el WhatsApp flotante son soporte, no competencia del CTA principal.
Dato Un CTA principal · un botón secundario · WhatsApp flotante = respaldo
El SectionMenu posicionado al final de la ficha enlaza a otros servicios, al catálogo y al contacto. Da al visitante que no está listo una salida que no lo pierde: puede explorar otros servicios sin abandonar el sitio.
Dato SectionMenu: otros servicios + catálogo /servicios + contacto
El componente WhatsAppFloat en PageLayout aparece en todas las páginas del sitio como botón flotante. No reemplaza el CTA de cierre: lo respalda. El visitante puede escribir desde cualquier sección, no solo desde el cierre.
Dato WhatsAppFloat: global en PageLayout · respaldo · no compite con el CTA
Variantes
Desde el CTA único mínimo hasta el doble CTA para dos perfiles de cliente. El estándar del sistema es CTA WhatsApp + SectionMenu. Cada variante tiene su caso de uso.
El cierre más efectivo es el más simple: un CTA claro con el texto correcto. Las variantes añaden capas solo cuando hay una razón concreta (dos perfiles de cliente distintos, un contexto B2B que prefiere formulario, un servicio estratégico que necesita remate visual fuerte).
Abajo, seis configuraciones de cierre con su caso de uso.
Responsive y móvil
En móvil el CTA de WhatsApp debe ser ancho completo y con touch target ≥52px para el pulgar. El verde #25d366 de WhatsApp es reconocible sin texto: el visitante sabe exactamente a dónde lo lleva.
En móvil, el botón de WhatsApp es la acción más importante de la página. Debe ser fácil de tocar con el pulgar: ancho completo en pantallas pequeñas (≤480px) y con una altura mínima de 52px. El verde #25d366 de WhatsApp es una señal visual inmediata que el visitante reconoce antes de leer el texto.
El WhatsApp flotante de PageLayout ocupa la esquina inferior derecha. En móvil, el flotante y el CTA de cierre no compiten: el CTA de cierre tiene el contexto completo del servicio; el flotante está disponible cuando el visitante ya subió de esa zona.
En pantallas ≤480px el botón ocupa el ancho completo para que el pulgar lo alcance desde cualquier posición.
/* CTA de WhatsApp en móvil: ancho completo, touch target ≥44px.
En pantallas pequeñas el botón debe ser fácil de tocar con el pulgar. */
.cta-wa {
display: flex;
justify-content: center;
padding: var(--sp-8) var(--sp-4);
}
.cta-wa a {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
min-height: 52px; /* cómodo para el pulgar */
padding: 0 var(--sp-8);
border-radius: var(--radius-full);
background: #25d366; /* verde WhatsApp */
color: #fff;
font-weight: 700;
}
@media (max-width: 480px) {
.cta-wa a { width: 100%; justify-content: center; }
}Posición
waUrl() y WA_MESSAGES en site.ts. El CTA y el SectionMenu en la ficha L3 (ServiceLayout). El WhatsApp flotante en PageLayout como componente global.
La distribución de las piezas refleja su alcance. waUrl() y WA_MESSAGES viven en site.ts porque son datos del negocio que aplican a todo el sitio. El CTA principal y el SectionMenu viven en la ficha L3 (ServiceLayout) porque son específicos del servicio en esa página. El WhatsApp flotante vive en PageLayout porque es global: aparece en todas las páginas sin configuración adicional.
El lugar donde NO debe vivir el número de WhatsApp es en un componente específico. Si está en un .astro individual, cada cambio requiere buscarlo manualmente. Si está en site.ts via waUrl(), un solo cambio propaga a todo el sitio.
Implementación
Dos recetas: waUrl() en site.ts (la fuente) y el cierre estándar de una ficha L3 (CTA + SectionMenu + CTABanner).
El cierre de conversión se construye en tres pasos: importar waUrl() y WA_MESSAGES de site.ts, pasar el href al CTA principal y al SectionMenu, y agregar el CTABanner si el servicio lo necesita. El WhatsApp flotante es automático desde PageLayout.
Abajo, las recetas del sistema.
// src/config/site.ts — waUrl() centraliza el número y el mensaje.
export const WA_MESSAGES = {
servicios: 'Hola, me interesa cotizar un servicio. ¿Me pueden dar más información?',
productos: 'Hola, me interesa un producto. ¿Me pueden dar información?',
cotizacion: 'Hola, quiero cotizar. ¿Pueden ayudarme?',
contacto: 'Hola, tengo una consulta.',
} as const
export function waUrl(msg: string): string {
const num = CONTACT.whatsapp.replace(/D/g, '') // limpia el número
return `https://wa.me/${num}?text=${encodeURIComponent(msg)}`
}
// En la ficha del servicio:
// import { WA_MESSAGES, waUrl } from '@config/site'
// const ctaHref = waUrl(WA_MESSAGES.servicios)
// → nunca wa.me/<número> escrito a mano---
// Cierre estándar de una ficha de servicio L3.
import SectionMenu from '@components/SectionMenu.astro'
import CTABanner from '@components/CTABanner.astro'
import { WA_MESSAGES, waUrl, SERVICES } from '@config/site'
// SectionMenu: otros servicios + catálogo + contacto
const cierreItems = SERVICES.filter(s => s.href !== Astro.url.pathname).slice(0, 3).map(s => ({
label: s.label, href: s.href, sub: s.desc ?? '',
}))
const cierreCta = {
label: 'Cotizar por WhatsApp',
href: waUrl(WA_MESSAGES.servicios),
sub: 'Respuesta inmediata',
external: true,
}
---
{/* 1) SectionMenu retiene al visitante no listo */}
<SectionMenu items={cierreItems} cta={cierreCta}
ariaLabel="Más servicios disponibles" />
{/* 2) CTABanner: el remate visual de conversión */}
<CTABanner
title="¿Listo para empezar?"
desc="Cuéntanos tu proyecto. Te respondemos por WhatsApp."
cta={{ label: 'Cotizar por WhatsApp', href: waUrl(WA_MESSAGES.servicios), external: true }}
/> waUrl(WA_MESSAGES.servicios) produce la URL correcta en cada build.
Si el número cambia, se edita CONTACT.whatsapp en site.ts
y todos los CTAs del sitio se actualizan solos. El texto del mensaje de apertura
(WA_MESSAGES.servicios) también vive en site.ts: un solo
lugar para afinar el primer mensaje que el cliente ve al llegar a WhatsApp.
Buenas prácticas
La conversión se optimiza con un CTA claro, waUrl() como fuente única y el SectionMenu como red de seguridad. Se arruina acumulando CTAs que compiten.
El error más común en el cierre es la acumulación: añadir un CTA por cada objeción imaginada hasta tener cinco botones compitiendo. Cada CTA adicional sobre el primero reduce las conversiones porque divide la atención del visitante.
Abajo, los patrones concretos.
Las otras piezas del flujo para crear una página de servicio profesional.