Todos los componentes (204)

Encuesta NPS

Comercio · NpsSurvey · .amset-nps

Qué es y cuándo usarlo

La pregunta de 0 a 10 («¿Recomendarías la tienda a un amigo?») y, en cuanto se elige una nota, la de por qué.

Cuándo usarlo

Después de una compra o de una entrega, para medir el NPS.
value y onChange llevan la nota elegida (null sin nota).
Con onComment, al elegir una nota sale un campo de texto (con lo escrito en comment) y una pregunta según la nota: «¿Qué es lo que más te ha fallado?» (de 0 a 6), «¿Qué te faltaría para ponernos un 10?» (7 y 8) o «¿Qué es lo que más te ha gustado?» (9 y 10). tracking la cambia por la tuya.
lowEnd y highEnd dicen qué significan el 0 y el 10 («Nada probable», «Muy probable»).
Para sacar la puntuación de muchas respuestas, la biblioteca exporta npsScore y npsCategory.

Cuándo no

La opinión de un producto con estrellas: Rating.
Una escala corta de palabras («Mal», «Normal», «Bien»): SegmentedGroup o RadioGroup.

Teclado: es un grupo de radio: Tab entra por la nota elegida (sin nota, por la primera) y las flechas recorren la escala eligiendo. Si hay pregunta de después, el siguiente Tab va a su campo.

Accesibilidad: la question es el nombre del grupo y la línea de los extremos lo describe. El 0 y el 10 se leen con lo que significan («0, nada probable»). Todas las notas se ven igual hasta que se elige una: el color del tramo es confirmación, no información. Cada nota mide al menos 44 px de alto, y si no caben las once en una fila, la escala se parte a propósito en 0-5 y 6-10.

Aspecto fino: variables CSS --amset-nps-*: -ends, -gap, -note, -question, -radius. El tamaño mueve el hueco, la pregunta y las notas. La nota nunca baja del objetivo tactil.

Cómo se ve

<NpsSurvey
  question="Del 0 al 10, cuanto nos recomendarias?"
  value={nota}
  onChange={setNota}
/>

Props

Se importa con import { NpsSurvey } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`onChange`obligatoria	`(note: number) => void`	—
`question`obligatoria	`string`	«¿Recomendarías la tienda a un amigo?». Es el nombre del grupo.
`value`obligatoria	`number \| null`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`comment`	`string`	El comentario de despues. Sin `onComment`, no se pregunta.
`highEnd`	`string`	—
`lowEnd`	`string`	Lo que significa el 0 y el 10. Sin esto, una escala sola no dice nada.
`onComment`	`(text: string) => void`	—
`size`	`"sm" \| "md" \| "lg"`	—
`tracking`	`(note: number) => string`	Pregunta de seguimiento propia. Por defecto, una segun la categoria.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-nps-gap`	`var(--amset-space-4)`
`--amset-nps-question`	`var(--amset-text-base)`
`--amset-nps-note`	`var(--amset-text-base)`
`--amset-nps-ends`	`var(--amset-text-xs)`
`--amset-nps-radius`	`var(--amset-radius-sm)`
`--amset-nps-note-min`	`2.25rem`

Cómo se cambia

.amset-nps {
  --amset-nps-gap: ...;
  --amset-nps-question: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: