Personalización de la Jornada
La Personalización de la Jornada te permite aplicar la identidad visual de tu marca en la jornada de verificación de identidad de Unico — sin abrir un ticket, sin depender del equipo de soporte y con el resultado visible al instante.
Defines el logo, el color de fondo, los colores y la forma de los botones, y el color del contenido. Al publicar, la configuración pasa a aplicarse de inmediato a las próximas jornadas iniciadas en tu unidad.
Para quién es: clientes que usan la Jornada Web (CbU) en los modelos de integración iFrame, Redirect o SDK.
Qué cambia para el usuario final: la pantalla que ve al hacer la verificación de identidad ahora tiene la cara de tu marca.
Dónde está: Portal IDCloud → menú lateral Configuraciones → pestaña Personalización.
Antes de empezar
Permiso de acceso
Tu usuario necesita tener acceso al área de Configuraciones del Portal IDCloud. Si el ícono de engranaje no aparece en el menú lateral, habla con el administrador de tu cuenta para habilitar el acceso.
Cómo se aplica la configuración
| Alcance | La personalización aplica por unidad (branch) y por modelo de integración. iFrame y Redirect/SDK tienen configuraciones independientes: publicar en uno no afecta al otro. |
| Cuándo entra en vigencia | Inmediatamente después de publicar, para las jornadas iniciadas a partir de ese momento. Las jornadas en curso mantienen el aspecto anterior. |
| Si no personalizas | La jornada carga el tema predeterminado de Unico. |
| Versión de la jornada | La vista previa se basa en el diseño de la versión 3.0 de la Jornada Web. En otras versiones la vista previa puede no reflejar fielmente el resultado — en ese caso, contacta a Unico sobre la actualización de versión. |
Qué tener a la mano
- Logo en PNG, preferiblemente con fondo transparente, con hasta 60 px de altura y como máximo 100 KB.
- Los códigos hexadecimales de los colores de tu marca (ej.:
#1B3FA0).
Qué es configurable en tu integración
Además del modelo de integración, lo que aparece en la pantalla depende de la versión del CbU de tu integración. Esta es la causa más común de "no veo este campo":
| Función | 1.0 iFrame | 2.0 iFrame | 3.0 iFrame | 1.0 redirect | 2.0 redirect | 3.0 redirect |
|---|---|---|---|---|---|---|
| Logo | ✅ | no existe | no existe | ✅ | ✅ | ✅ |
| Color de fondo | — | — | — | — | — | ✅ |
| Color de fondo del botón | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Color de texto del botón | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Radio del borde del botón | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Color del contenido | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
En resumen: el color de fondo solo es configurable en CbU 3.0 en redirect, y en iFrame el logo existe únicamente en CbU 1.0. Los colores y la forma del botón funcionan en todas las combinaciones.
Si no sabes en qué versión estás, consulta a tu contacto de Onboarding o al soporte de Unico.
Paso a paso
Paso 1 — Abre la pestaña Personalización
En el Portal IDCloud, haz clic en el ícono de engranaje (Configuraciones) en el menú lateral. La pantalla se abre directamente en la pestaña Personalización.
La pantalla de Configuraciones tiene tres pestañas — Personalización, Webhook y QR Code. Esta guía cubre la primera.
Pantalla de Configuraciones con la pestaña Personalización seleccionada.
Paso 2 — Elige el modelo de integración
En la columna de la izquierda, selecciona iFrame o Redirect o SDK. Los campos del formulario cambian según el modelo.
Vas a reconocer la pantalla en tres áreas: el selector de modelo a la izquierda, el formulario en el centro y la vista previa a la derecha, que reacciona a cada cambio antes de publicar.
Si usas ambos modelos, necesitas configurar los dos. Son configuraciones independientes — ajusta y publica uno, y luego repite para el otro.
Selector iFrame / Redirect o SDK, formulario y vista previa.
Paso 3 — Envía el logo
Disponible en Redirect o SDK. En iFrame, solo en CbU 1.0.
Haz clic en Agregar un logo y selecciona el archivo. Requisitos: PNG, altura máxima 60 px, peso máximo 100 KB.
Usa un PNG con fondo transparente. Así el logo funciona sobre cualquier color de fondo — un PNG con fondo blanco se convierte en un rectángulo visible cuando el fondo tiene color. Prefiere también la versión horizontal del logo: el espacio disponible es ancho y bajo.
Campo "Agregar un logo" con los requisitos de formato, altura y peso.
Paso 4 — Define los colores
Son cuatro campos de color, agrupados en el formulario en Fondo, Botones y Contenido:
| Campo | Dónde aparece en la jornada | Predeterminado | Disponibilidad |
|---|---|---|---|
| Color de fondo | Fondo de la pantalla de la jornada | #F2F2F7 | Solo CbU 3.0 en redirect |
| Botones → Color de fondo | Relleno del botón de acción (ej.: "Tomar Selfie") | — | Todas las versiones |
| Botones → Color de texto | Texto dentro del botón | — | Todas las versiones |
| Color del contenido | Títulos y descripciones (ej.: "Verificación de identidad") | #000000 | Todas las versiones |
En cualquiera de ellos puedes escribir el hexadecimal (ej.: #1B3FA0) o hacer clic en el
cuadro de color a la izquierda del campo para abrir el selector visual. En los campos de fondo y
de contenido, mientras no llenes nada, la jornada usa el valor predeterminado que se muestra como
sugerencia en el propio campo.
El color de fondo se aplica como degradado, no como color sólido. El tono que indicas es la parte superior del degradado, y la jornada se oscurece progresivamente hacia la base de la pantalla. Los tonos muy oscuros producen una base casi negra — elige un tono medio a claro si quieres un resultado uniforme.
Usa el color primario de tu marca en el fondo del botón. Es el elemento que el usuario necesita encontrar primero; si no salta a la vista, la jornada pierde conversión.
Elige los cuatro colores como un conjunto, no uno por uno. Se afectan entre sí: un fondo oscuro con un color de contenido negro hace que la jornada sea ilegible, y un botón claro sobre la tarjeta blanca simplemente puede desaparecer. Define los cuatro y solo después evalúa el resultado en la vista previa (Paso 6).
Campos Color de fondo, Color de fondo y Color de texto de los botones, y Color del contenido, con el resultado en la vista previa.
Paso 5 — Configura los botones
Tres campos controlan el botón de acción de la jornada (ej.: "Tomar Selfie"):
| Campo | Qué hace |
|---|---|
| Color de fondo | Color de relleno del botón |
| Color de texto | Color del texto dentro del botón |
| Radio del borde | Redondeo de las esquinas, en píxeles |
Referencia para el Radio del borde:
- 0 → botón rectangular, esquinas rectas
- 8 a 16 → esquinas levemente redondeadas
- 24 o más → forma de píldora (totalmente curvo)
Los valores por encima de la mitad de la altura del botón ya no cambian el resultado: la forma de píldora es el límite.
Usa el color primario de tu marca en el fondo del botón. Es el elemento que el usuario necesita encontrar primero — si no salta a la vista, la jornada pierde conversión. Y mantén el radio del borde coherente con el resto de tu producto, para que la jornada se sienta como una continuación de tu app y no un sitio de terceros.
Color de fondo, Color de texto y Radio del borde, con el botón reflejado en la vista previa.
Paso 6 — Revisa la vista previa, en móvil y desktop
La vista previa a la derecha se actualiza con cada cambio. Usa el selector Móvil / Desktop en la parte superior para revisar ambos formatos.
Si escribes un valor de color inválido — el nombre de un color, un hexadecimal incompleto — el campo queda con un borde rojo y el valor no se aplica a la vista previa. Corrígelo antes de continuar.
Valida siempre en modo Móvil. La mayoría de los usuarios finales hacen la verificación desde el teléfono; es el formato que más importa. Y revisa los tres contrastes: texto del botón contra el fondo del botón, botón contra la tarjeta de la jornada, y color del contenido contra el color de fondo. Es común configurar un botón blanco sobre una tarjeta blanca y que simplemente desaparezca — la vista previa existe para revelar esto antes de publicar.
Selector Móvil / Desktop y un campo de color con un valor inválido destacado.
Paso 7 — Publica
El botón Publicar se habilita en cuanto existe algún cambio pendiente.
- Publicar guarda la configuración y la aplica a la jornada.
- Cancelar descarta todo lo que editaste y devuelve los campos al último estado publicado.
- Para volver al valor predeterminado de Unico, limpia los campos de color (dejando que reaparezca la sugerencia), quita el logo y publica.
No existe historial de versiones. Si publicas una configuración con errores, el camino es ajustar los valores y publicar de nuevo — no hay forma de restaurar la versión anterior con un clic. Por eso vale la pena revisar la vista previa en el paso anterior. Mientras aún no hayas publicado, Cancelar resuelve.
Paso 8 — Registra los dominios autorizados
Disponible solo en el modelo iFrame.
En iFrame, la jornada se ejecuta embebida dentro de tu propia página. Por seguridad, solo los dominios registrados aquí pueden cargarla.
-
Haz clic en Configurar dominios, en la esquina superior derecha.
-
El panel lateral lista los Dominios registrados, cada uno con las acciones de editar (lápiz) y eliminar (papelera).
-
Para agregar uno, haz clic en Crear dominio, indica el dominio y haz clic en Guardar.
Indica el dominio con su protocolo (https://tusitio.com).
Esta lista es una configuración de seguridad, y se guarda por separado. Se aplica en el Guardar del panel, no en el Publicar de la pantalla principal. Registra también los dominios de prueba y homologación que usas durante la integración, y elimina los que ya no estén en uso — es la lista de quién puede embeber tu jornada.
Preguntas frecuentes
¿Los cambios aplican a jornadas que ya están en curso? No. La configuración publicada aplica a las jornadas iniciadas después de la publicación.
¿Por qué no veo los campos de Logo y Fondo? Dos causas posibles. La primera: puedes tener iFrame seleccionado — en iFrame la jornada está embebida en tu propia página, que ya provee el fondo y la identidad. La segunda: la versión de tu CbU no expone el campo. El color de fondo solo existe en CbU 3.0 en redirect, y el logo en iFrame solo en CbU 1.0. Revisa la tabla en "Antes de empezar".
Mi logo fue rechazado al subirlo. ¿Por qué? Verifica los tres requisitos: formato PNG, altura de hasta 60 px y peso de hasta 100 KB.
El fondo se ve muy oscuro en la parte inferior de la pantalla. Es esperado: el fondo se renderiza como un degradado que se oscurece de arriba hacia abajo. Elige un tono base más claro.
La vista previa no se parece a mi jornada real. La vista previa se basa en el diseño de la versión 3.0 de la Jornada Web. Si tu integración está en otra versión, el resultado puede diferir — contacta a Unico para evaluar una actualización de versión.
Publiqué una configuración con errores. ¿Cómo la revierto? Vuelve a abrir la pantalla, ajusta los valores (o límpialos para volver al predeterminado) y publica de nuevo. No hay historial de versiones. Si aún no publicaste, solo haz clic en Cancelar.
¿Quién cambió la personalización de mi cuenta? La pantalla no muestra ese historial. Para saber qué usuario hizo el último cambio y cuándo, contacta al soporte de Unico.
Resumen rápido
Portal IDCloud
└─ Configuraciones (ícono de engranaje en el menú lateral)
└─ Pestaña Personalización
├─ iFrame ............... Botones (color de fondo, color de texto, radio del borde)
│ Contenido (color del contenido)
│ + Configurar dominios
└─ Redirect o SDK ...... Logo (PNG, 60 px, 100 KB)
Fondo (color de fondo, aplicado como degradado)
Botones (color de fondo, color de texto, radio del borde)
Contenido (color del contenido)
Vista previa en tiempo real · Móvil / Desktop · Cancelar · Publicar