Cierre y NPS

Al pulsar el botón ✕ del visor, el SDK ejecuta un flujo de cierre configurable. De forma predeterminada muestra un mensaje de gracias antes de liberar la cámara. Opcionalmente puede solicitar una puntuación NPS al usuario.

Flujo de cierre

✕  →  engine.stop()  →  overlay de cierre
        │
        ├─ ¿hay `nps`?
        │     SÍ → formulario NPS (pregunta + escala + comentario opcional)
        │             · Enviar  → onNps({ score, comment? }) → mensaje de gracias
        │             · Omitir  → mensaje de gracias (sin llamar onNps)
        │     NO → mensaje de gracias
        │
        └─ botón "Listo" → cierra overlay → onClose()

Si se pasa thanks: false, se omite el overlay completo y onClose se invoca de inmediato tras stop(). El NPS no se muestra aunque esté configurado.

NPS configurable

Pasa nps a start() para activar el formulario. Todos los campos son opcionales.

Campo	Tipo	Default	Descripción
`question`	`string`	`'¿Qué tan probable es que nos recomiendes?'`	Pregunta principal del formulario.
`min`	`number`	`0`	Valor mínimo de la escala.
`max`	`number`	`10`	Valor máximo de la escala.
`minLabel`	`string`	`''`	Etiqueta del extremo bajo (vacío = no se muestra).
`maxLabel`	`string`	`''`	Etiqueta del extremo alto (vacío = no se muestra).
`comment`	`boolean`	`false`	Muestra un campo de texto opcional tras la escala.
`commentLabel`	`string`	`'Cuéntanos más (opcional)'`	Placeholder del campo de comentario.
`submitLabel`	`string`	`'Enviar'`	Texto del botón de envío.
`skipLabel`	`string`	`'Omitir'`	Texto del botón para saltar el NPS.

El callback onNps recibe un objeto NpsResult:

interface NpsResult {
  score: number
  comment?: string  // solo si NpsConfig.comment y el usuario escribió algo
}

onNps se invoca únicamente cuando el usuario envía el formulario. Si pulsa "Omitir", el callback no se llama.

Tabla exhaustiva de tipos en 10-referencia-de-tipos.md.

Mensaje de gracias

El mensaje de gracias se muestra siempre al cerrar, a menos que thanks sea false. Todos los campos son opcionales.

Campo	Tipo	Default
`title`	`string`	`'Gracias'`
`message`	`string`	`'Gracias por probar tu color.'`
`doneLabel`	`string`	`'Listo'`

Desactivar el overlay (`thanks: false`)

Para replicar el comportamiento de cierre instantáneo sin overlay:

await vto.start({
  module: 'hair-color',
  colors: TONOS,
  ui: { branding: { name: 'AURA' } },
  thanks: false,          // sin overlay: onClose se dispara de inmediato
  onClose: () => { /* … */ },
})

Terminal según modo

El comportamiento final de onClose depende del modo de integración:

Modo	Qué ocurre al pulsar "Listo"
Selector (se pasó `experience` a `init`)	Vuelve a la pantalla de inicio y dispara `onClose`.
Headless-con-ui (sin `experience`)	Solo dispara `onClose`. El host decide qué hacer con el container.

Ejemplo completo (AURA)

await vto.start({
  module: 'hair-color',
  colors: TONOS,
  ui: { branding: { name: 'AURA', primaryColor: '#c8a97e' } },

  nps: {
    question:   '¿Qué tan probable es que recomiendes AURA?',
    minLabel:   'Nada probable',
    maxLabel:   'Muy probable',
    comment:    true,
    commentLabel: 'Cuéntanos qué mejorarías (opcional)',
  },

  thanks: {
    title:     '¡Gracias!',
    message:   'Tu opinión nos ayuda a mejorar AURA.',
    doneLabel: 'Cerrar',
  },

  onNps:   (r) => console.log('nps', r),   // { score: 8, comment?: '...' }
  onClose: () => console.log('visor cerrado'),
})

Notas

Back-compat: todos los campos (nps, thanks, onNps) son opcionales. Sin configuración adicional el visor muestra el mensaje de gracias por defecto y llama onClose al pulsar "Listo".
thanks: false anula el NPS: si no hay overlay de gracias no hay dónde terminar el flujo; usa thanks: false solo si quieres cierre instantáneo sin formulario.
El color de acento (--vto-primary) del overlay de cierre se hereda del branding.primaryColor del visor.

Flujo de cierre​

NPS configurable​

Mensaje de gracias​

Desactivar el overlay (thanks: false)​

Terminal según modo​

Ejemplo completo (AURA)​

Notas​