Inicio y branding

Pantalla de inicio

Cuando se pasa experience a OBVto.init, el SDK monta una pantalla de inicio con un selector de modo antes de arrancar el visor. Al elegir modo, el SDK llama internamente a vto.start() con las opciones de start y el source correspondiente ('camera' para selfie, 'photo' para subir foto).

Flujo con pantalla de inicio:

OBVto.init(…)
  └─ monta selector (SELFIE / SUBIR FOTO)
        └─ usuario elige
              └─ SDK llama vto.start({ source: 'camera' | 'photo', … })

Sin experience, init devuelve el motor en modo headless y el host es responsable de llamar vto.start(). Ver 02-init-y-arranque.md.

Campos de ExperienceConfig

Campo	Tipo	Default	Descripción
branding	ViewerBranding	{}	Logo, marca y color de acento de la pantalla de inicio.
tagline	string	'Prueba tu color'	Subtítulo mostrado bajo la marca en la pantalla de inicio.
modes	ExperienceMode[]	['selfie', 'photo']	Modos visibles en el selector. Omitir un modo elimina su card.

ExperienceMode puede ser 'selfie' (activa la cámara) o 'photo' (el usuario sube una imagen).

Ejemplo completo

await OBVto.init({
  modules: ['hair-color'],
  container: '#vto',
  experience: {
    branding: {
      name: 'AURA',
      logoSvg: '<svg>…</svg>',
      primaryColor: '#c81e5a',
    },
    tagline: 'Prueba tu color',
    modes: ['selfie', 'photo'],
  },
  start: {
    module: 'hair-color',
    colors: TONOS,
    ui: { branding: { name: 'AURA' } },
  },
})

Si se pasa experience sin start, init lanza un error en tiempo de ejecución.

---

Branding

ViewerBranding controla la identidad visual del SDK. El mismo tipo se reutiliza en dos puntos:

• experience.branding — pantalla de inicio (logo, marca, color de acento de los botones de modo).
• ui.branding — chrome del visor (barra superior, botón de inicio, acentos de la paleta).

Campos de ViewerBranding

Campo	Tipo	Default	Descripción
name	string	'VTO'	Nombre de marca mostrado en texto.
logoSvg	string	—	Markup SVG del logo. Se inserta como HTML dentro de la pantalla de inicio.
primaryColor	string	—	Color de CTA y acentos. Se inyecta como la variable CSS --vto-primary en el contenedor raíz.

primaryColor acepta cualquier valor CSS válido ('#c81e5a', 'hsl(340 76% 44%)', etc.). Todos los botones de acción del visor leen --vto-primary, por lo que un solo campo controla el esquema de color completo.

Ejemplo — solo branding de la pantalla de inicio

// Solo personaliza la home; el visor usa defaults neutros.
await OBVto.init({
  modules: ['hair-color'],
  container: '#vto',
  experience: {
    branding: { name: 'AURA', primaryColor: '#c81e5a' },
  },
  start: { module: 'hair-color', colors: TONOS },
})

Ejemplo — branding en home y en el visor

const BRANDING = { name: 'AURA', logoSvg: '<svg>…</svg>', primaryColor: '#c81e5a' }

await OBVto.init({
  modules: ['hair-color'],
  container: '#vto',
  experience: { branding: BRANDING },
  start: {
    module: 'hair-color',
    colors: TONOS,
    ui: { branding: BRANDING },
  },
})

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