Módulo · FAQWithContact
Preguntas frecuentes
Lo que más nos preguntan — respondemos antes de que cotices.
Reunimos las preguntas más frecuentes para que llegues al primer contacto con todo claro.
¿Tu duda no está aquí? Usa el formulario y te respondemos directamente por WhatsApp.
Cada pieza, explicada
Preguntas frecuentes
Lo que más nos preguntan — respondemos antes de que cotices.
Reunimos las preguntas más frecuentes para que llegues al primer contacto con todo claro.
¿Tu duda no está aquí? Usa el formulario y te respondemos directamente por WhatsApp.
Encabezado en layout «duo»: título a la izquierda, cuerpo explicativo a la derecha. El componente lo genera internamente — no necesitas pasarle un SectionHeading desde la página.
Dato Interno al componente — hardcoded con los textos del encabezado canónico.
El acordeón de preguntas frecuentes en modo bare (sin padding propio, sin centrado). Se alimenta del array items. El primer ítem abre por defecto (openFirst). El FAQ emite FAQPage schema solo si el acordeón no está en modo bare — aquí el schema lo emite el layout de la página.
Dato prop items: { question, answer }[]
Tarjeta blanca con sombra y border-radius-xl. En desktop es position:sticky con top = --stack-height + sp-5, así sigue al visitante mientras lee las preguntas. En móvil sube por encima del acordeón (order:-1) para que sea lo primero visible.
Dato CSS interno — position:sticky solo activa en ≥900px.
Menú desplegable con los tipos de negocio más comunes. Actúa como pre-cualificador del lead: el mensaje que llega a WhatsApp ya incluye el giro, así no hay que preguntarlo después. Es el único campo obligatorio junto con el textarea.
Dato Opciones hardcoded dentro del componente — editar FAQWithContact.astro para cambiarlas.
Campo de texto libre con límite de 500 caracteres. El contador actualiza en tiempo real y cambia a ámbar cuando el visitante supera 420 caracteres. El mensaje completo (nombre + giro + pregunta) se construye en JS antes de abrir WhatsApp.
Dato Lógica en <script define:vars={{ waNumber }}>.
Número de WhatsApp del negocio en formato E.164 sin «+» — igual que CONTACT.whatsapp en site.ts. El componente construye el enlace wa.me directamente con este valor. Cambiar el número en site.ts y pasarlo aquí es suficiente.
Dato prop waNumber: string — usar CONTACT.whatsapp (site.ts).
Ventajas de FAQWithContact
El problema de separar FAQ y formulario en secciones distintas: el visitante lee las preguntas, baja hasta el fondo del acordeón y el formulario ya quedó muy arriba. Con FAQWithContact la tarjeta sticky sigue al scroll — el CTA de conversión siempre está a la vista.
El select obliga a elegir el tipo de negocio antes de enviar. Cuando el mensaje llega a WhatsApp ya viene con «Tipo de negocio: Restaurante o cocina», lo que permite responder con el equipo correcto sin preguntar de vuelta.
El componente no guarda ningún dato ni necesita una función serverless. El formulario arma el texto y abre wa.me en una pestaña nueva. El cliente responde directo, sin bandeja que revisar ni correo en spam.
En pantallas estrechas la tarjeta de contacto sube por encima del acordeón (order:-1 en CSS). Así el visitante ve primero el CTA, no 6 preguntas que quizá no son la suya.
Reglas de uso
Cuándo usar cada variante