Catálogo de componentes

Una respuesta se compone de uno a tres componentes de un catálogo cerrado de 17. El agente elige los componentes y llena sus campos; no puede inventar un decimocuarto, no puede emitir HTML y no puede escribir una URL. Cada componente se valida contra su esquema en el servidor antes de que un solo byte llegue al visitante, y un componente que falla la validación se descarta mientras el resto de la respuesta llega igual.

Los 17 componentes

Componente	Cuándo lo elige el agente
`heading`	Para abrir una respuesta de varios componentes con un título y una línea de encuadre. Nunca la respuesta completa.
`media`	Una imagen o video, cuando verlo es la respuesta (“cómo se ve”, “muéstrame”).
`mediaCard`	Una idea explicada en texto con una imagen de apoyo al lado.
`gallery`	De dos a cinco imágenes lado a lado: un recorrido, una comparación, un conjunto de espacios.
`timeline`	Una secuencia de pasos: un proceso, un onboarding, un trayecto.
`accordion`	Detalle secundario sobre un tema que el visitante no preguntó: letra chica, profundizaciones. Se renderiza plegado.
`cta`	Un banner de siguiente paso cuando la respuesta termina en una acción clara.
`metrics`	De una a tres cifras destacadas sobre el negocio, tomadas de su propio material.
`grid`	Un conjunto mixto de celdas para un panorama rico cuando una lista plana se quedaría corta.
`faq`	Varias preguntas distintas a la vez, formuladas como las haría un visitante.
`stats`	Cifras de terceros con su atribución, para el “por qué importa esto”.
`leadForm`	Un formulario de contacto, cuando el visitante quiere que lo contacten.
`info`	Último recurso: un matiz, un honesto “no, pero esto es lo que hacemos”, una redirección fuera de tema.
`features`	Un conjunto de 2 a 6 tarjetas iguales con ícono: un inventario, las razones detrás de una afirmación, opciones, casos de uso, una comparación cerrada.
`chips`	Grupos compactos de etiquetas cortas (canales, integraciones, métodos): nombres, no explicaciones.
`logos`	Prueba social o integraciones como marcas, opcionalmente agrupadas.
`plans`	Las ofertas de precio reales del negocio como tarjetas; el servidor formatea cada precio, el modelo solo elige cuáles mostrar.

Reglas que aplican a todos los componentes

Los campos de texto no llevan HTML, ni URLs, ni markdown. La única excepción es el body de info, que permite formato markdown pero sigue rechazando HTML, URLs crudas y enlaces inline.
Las referencias son ids, nunca direcciones. assetId nombra una imagen de tu registro, actionId nombra una de las acciones que declaraste en la página, linkId nombra uno de tus enlaces aprobados. Los ids van en minúsculas con guiones o guiones bajos simples, una forma que una URL no puede igualar. El servidor cambia cada id por el valor real después de la validación.
Los íconos vienen de un vocabulario fijo de nombres genéricos (shield, clock, truck, message-circle, …). Son vocabulario de la interfaz, no tus datos, así que son una lista cerrada.
Como máximo una instancia de cada componente por respuesta.

Props, componente por componente

heading

Prop	Tipo	Notas
`title`	texto, 4–80	Una etiqueta de 2–5 palabras que nombra lo que sigue.
`description`	texto, 8–220, nullable	Una oración completa que lo encuadra.

media

Prop	Tipo	Notas
`title`	texto, 4–80, nullable	Etiqueta corta opcional.
`assetId`	id de recurso	Una imagen o video del registro de la página.
`caption`	texto, 8–160, nullable	Una oración que dice qué está mirando el visitante.

Solo recursos horizontales. Uno vertical va en mediaCard, donde encaja sin estirarse.

mediaCard

Prop	Tipo	Notas
`title`	texto, 4–80	Etiqueta.
`description`	texto, 16–300	Una o dos oraciones completas que llevan la sustancia.
`assetIds`	1–2 ids de recurso	Imágenes que muestran lo que dice el texto.
`cta`	`label` (2–32) + `actionId`, nullable	Solo cuando un siguiente paso ayuda de verdad.

gallery

Prop	Tipo	Notas
`title`	texto, 4–80, nullable	Etiqueta opcional.
`variant`	`grid` o `bento`	`grid` para una comparación de cuadros uniformes; `bento` para un recorrido que conserva las proporciones de cada imagen.
`items`	2–5 entradas	Cada una: `assetId` más un `caption` opcional (4–120).

timeline

Prop	Tipo	Notas
`title`	texto, 4–80	Etiqueta de la secuencia.
`orientation`	`horizontal` o `vertical`	Horizontal cuando cada paso lleva una imagen, vertical para pasos compactos con ícono.
`items`	2–6 pasos	Cada uno: `title` (2–80), `description` (8–160), `assetId` (nullable), `icon` (nullable).

accordion

Prop	Tipo	Notas
`title`	texto, 4–80	El tema que se desglosa.
`items`	2–6 filas	Cada una: `label` (2–80) y `body` (16–400), texto plano.

Filas de un solo tema, ocultas hasta que el visitante hace clic, así que el acordeón lleva solo detalle secundario. El contenido que responde la pregunta real va a grid, timeline, metrics, faq o info; las preguntas formuladas como las haría un visitante pertenecen a faq.

cta

Prop	Tipo	Notas
`eyebrow`	texto, 2–48, nullable	Una línea pequeña opcional sobre el título.
`title`	texto, 4–80	Etiqueta.
`description`	texto, 8–180	Una oración sobre lo que obtiene el visitante.
`primaryCta`	`label` (2–32) + O BIEN `actionId` (sigue la conversación) O BIEN `linkId` (abre una página)	La acción. Las etiquetas son verbos.
`secondaryCta`	misma forma, nullable	Solo cuando existe una alternativa real.

metrics

Prop	Tipo	Notas
`title`	texto, 4–80	Etiqueta.
`items`	1–3 cifras	Cada una: `value` tal como se muestra (1–16 caracteres, p. ej. `6`, `24/7`), `label` (8–160), `assetId` (nullable).

Solo cifras que aparecen literalmente en tu material. Los números de terceros pertenecen a stats, donde llevan una fuente.

grid

Prop	Tipo	Notas
`title`	texto, 4–80	Etiqueta.
`items`	2–6 celdas	Cada una: `size` (`large` o `small`), `title` (2–80), `description` (8–160), `icon` (nullable), `assetId` (nullable).
`cta`	`label` + un destino, nullable	El único siguiente paso cuando el panorama termina en uno.

faq

Prop	Tipo	Notas
`title`	texto, 4–80	Etiqueta.
`items`	2–5 pares	Cada uno: `question` (8–120) y `answer` (16–300).

stats

Prop	Tipo	Notas
`title`	texto, 4–80	Etiqueta.
`items`	2–4 cifras	Cada una: `value` (1–12, p. ej. `5x`, `32%`), `label` (8–160), `source` (2–60).

Tanto el número como su atribución deben existir en el material. Una atribución nunca se descarta ni se altera.

leadForm

Prop	Tipo	Notas
`title`	texto, 4–80	Etiqueta.
`description`	texto, 8–180	Qué pasa después de que dejan sus datos.
`formId`	id de formulario	Uno de los formularios que configuraste; el servidor resuelve sus campos, y el agente nunca ve lo que un visitante escribe.

El agente elige qué formulario mostrar; tú defines sus campos y a dónde va un envío. Un formulario envía internamente (se guarda y se te avisa por correo) o externamente (se postea a tu propia API), y solo un formulario externo puede incluir una contraseña — wondeya nunca guarda una.

features

Prop	Tipo	Notas
`title`	texto, 4–80	Etiqueta del conjunto.
`items`	2–6 tarjetas	Cada una: `icon` (del enum), `title` (2–80), `description` (8–160).
`cta`	`label` + un destino, nullable	El siguiente paso natural.

chips

Prop	Tipo	Notas
`groups`	1–3 grupos	Cada uno: una `label` (1–3 palabras) y 1–6 `items`, cada uno con una `label` corta y un `icon` opcional.
`cta`	`label` + un destino, nullable	Solo cuando un siguiente paso ayuda de verdad.

logos

Prop	Tipo	Notas
`title`	texto, 4–80	Etiqueta.
`logoIds`	2–8 ids de logo	Marcas de tu conjunto de logos; nunca inventadas.

plans

Prop	Tipo	Notas
`offerIds`	las ofertas a mostrar	Tú configuras las ofertas; el servidor renderiza los nombres, precios y botones reales. El modelo nunca escribe una cifra.
`note`	texto, nullable	Una línea opcional sobre la selección, nunca una cifra.
`linkId`	nullable	Un enlace opcional de “ver todos los planes”.

info

Prop	Tipo	Notas
`title`	texto, 4–80	Etiqueta.
`body`	markdown, 16–600	La respuesta completa. Formato sí; HTML, URLs crudas y enlaces inline no.
`bullets`	1–6 líneas (2–160 cada una), nullable	Para enumeraciones.
`links`	1–3 entradas, nullable	Cada una: `label` (2–48) y `linkId` de tus enlaces aprobados.
`cta`	`label` + `actionId`, nullable	Solo cuando un siguiente paso ayuda de verdad.

Cómo se hace cumplir el catálogo

El servidor hace cumplir el mismo contrato de esquema antes de que algo se transmita, y el registro de renderizadores del cliente lo replica. Ese registro es cerrado: un tipo de componente que no reconoce nunca se adivina (el visitante ve en su lugar una nota corta que le pide refrescar la página), y un componente cuya imagen no logra cargar se degrada a un placeholder neutro en lugar de una caja rota. Como el catálogo es cerrado y sus campos de texto rechazan el marcado, el peor resultado de una instrucción maliciosa escondida dentro del conocimiento subido es un componente que falla la validación y desaparece, no marcado en la pantalla de tu visitante.

Comenzar

Construye tu página

Agrégalo a tu sitio

Por dentro

Confianza

Catálogo de componentes

Los 17 componentes

Reglas que aplican a todos los componentes

Props, componente por componente

heading

media

mediaCard

gallery

timeline

accordion

cta

metrics

grid

faq

stats

leadForm

features

chips

logos

plans

info

Cómo se hace cumplir el catálogo

​Los 17 componentes

​Reglas que aplican a todos los componentes

​Props, componente por componente

​heading

​media

​mediaCard

​gallery

​timeline

​accordion

​cta

​metrics

​grid

​faq

​stats

​leadForm

​features

​chips

​logos

​plans

​info

​Cómo se hace cumplir el catálogo

Los 17 componentes

Reglas que aplican a todos los componentes

Props, componente por componente

heading

media

mediaCard

gallery

timeline

accordion

cta

metrics

grid

faq

stats

leadForm

features

chips

logos

plans

info

Cómo se hace cumplir el catálogo