--- title: Personalización de la Jornada description: Configura la identidad visual de la jornada — logo, colores, fondo y forma de los botones — directo en el Portal IDCloud, con vista previa en tiempo real. canonical: https://developer.unico.io/es/dual-api/product-guide/portal-idcloud/settings/journey-customization locale: es generated_by: markdown-export --- 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. :::info **Para quién es:** clientes que usan la Web Journey 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 Web Journey. 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 de la Web Journey** 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 Web Journey v3.0 en redirect**, y en iFrame el logo existe únicamente en Web Journey v1.0. Los colores y la forma del botón funcionan en todas las combinaciones. :::info 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 el ícono de engranaje destacado en el menú lateral](/img/product-guide/journey-customization/es/01-settings-tab.png) *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. ![Pantalla completa de Personalización: selector de modelo, formulario y vista previa](/img/product-guide/journey-customization/es/02-integration-model.png) *Selector iFrame / Redirect o SDK, formulario y vista previa.* ### Paso 3 — Envía el logo :::warning Disponible en **Redirect o SDK**. En iFrame, solo en Web Journey v1.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](/img/product-guide/journey-customization/es/03-customization-form.png) *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 **Web Journey v3.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, colores de los botones y Color del contenido](/img/product-guide/journey-customization/es/04-colors.png) *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. ![Campo Radio del borde y el botón reflejado en la vista previa](/img/product-guide/journey-customization/es/05-button-border-radius.png) *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 en el panel de vista previa](/img/product-guide/journey-customization/es/06-live-preview.png) *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 :::warning 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. 1. Haz clic en **Configurar dominios**, en la esquina superior derecha. ![Botón Configurar dominios, destacado](/img/product-guide/journey-customization/es/07-configure-domains-button.png) 2. El panel lateral lista los **Dominios registrados**, cada uno con las acciones de **editar** (lápiz) y **eliminar** (papelera). ![Panel Configurar dominios con la lista de dominios registrados](/img/product-guide/journey-customization/es/08-domains-list.png) 3. Para agregar uno, haz clic en **Crear dominio**, indica el dominio y haz clic en **Guardar**. ![Formulario de creación de un nuevo dominio de iFrame](/img/product-guide/journey-customization/es/09-create-domain.png) 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 Web Journey** no expone el campo. El color de fondo solo existe en Web Journey v3.0 en redirect, y el logo en iFrame solo en Web Journey v1.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 Web Journey. 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 ```text 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 ```