> ## Documentation Index
> Fetch the complete documentation index at: https://developers.argosidentity.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Personalización de Liveform

> Aprenda a ofrecer una experiencia de usuario alineada con la marca mediante configuración de result page e imágenes por idioma.

La función de personalización de result page le permite personalizar la página de resultado que se muestra a los usuarios después de completar la autenticación de ID check. Puede ofrecer experiencias de marca claras y consistentes a los usuarios configurando páginas personalizadas por idioma para cada estado: Approved, Rejected y Pending.

## Casos de uso

<AccordionGroup>
  <Accordion title="Mantenimiento de consistencia de marca en servicios financieros" icon="building-columns">
    Los bancos o servicios fintech pueden proporcionar guía sobre los próximos pasos (apertura de cuenta, emisión de tarjeta, etc.) junto con mensajes de bienvenida al aprobar, y guiar métodos de reintento o información de contacto del centro de atención al rechazar. Para estado pending, guíe claramente los métodos de envío de documentos adicionales y el tiempo esperado de procesamiento para aliviar la ansiedad del cliente.
  </Accordion>

  <Accordion title="Soporte multipaís para servicios globales" icon="globe">
    Las plataformas que proporcionan servicios internacionales pueden configurar páginas de resultado en el idioma de cada país para ofrecer experiencias de usuario localizadas. Se pueden construir interfaces amigables para el usuario utilizando imágenes y mensajes que reflejen las características culturales de cada región.
  </Accordion>

  <Accordion title="Onboarding de vendedores en plataformas de e-commerce" icon="cart-shopping">
    Los marketplaces online pueden guiar guías de inicio de ventas y beneficios de promoción cuando se completa la autenticación del vendedor, y proporcionar planes de mejora y procedimientos de re-solicitud en detalle al rechazar.
  </Accordion>
</AccordionGroup>

<Tip>
  **Optimización de la experiencia del usuario**

  Las páginas de resultado son puntos de contacto importantes en el recorrido del usuario. La satisfacción del usuario y las tasas de finalización del servicio pueden mejorarse proporcionando el tono emocional apropiado y guía de acciones de seguimiento para cada estado.
</Tip>

***

## Paso 1: Acceder a la configuración de result page

Acceda al menú de configuración de result page del proyecto en el dashboard para personalizar la result page del proyecto de ID check.

<Frame caption="Pantalla de configuración de personalización de Result Page">
  <img src="https://mintcdn.com/argosidentity/352WpTnZFyEfW7I6/images/dashboard/new/pj/cx_customizing/livform_customizing.png?fit=max&auto=format&n=352WpTnZFyEfW7I6&q=85&s=a71b109b1fead073b3b00e5795a64c1d" alt="Configuración de personalización de result page" width="1916" height="909" data-path="images/dashboard/new/pj/cx_customizing/livform_customizing.png" />
</Frame>

***

## Paso 2: Configuración de estado e idioma

Seleccione la combinación de estado e idioma para configurar la result page.

<Info>
  **Configurable por estado**

  Es posible configurar individualmente para cada estado: Approved, Rejected y Pending, y se pueden configurar páginas diferentes para todos los idiomas soportados.
</Info>

| Configuración         | Descripción                                                                                                                 |
| --------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| **Status & Language** | Seleccione combinando estado del resultado (aprobación/rechazo/pending) e idioma para personalizar.                         |
| **Preview Function**  | Puede verificar los resultados en tiempo real a través de la ventana de vista previa a la derecha durante la configuración. |

***

## Paso 3: Configuración de elementos visuales

Configure componentes visuales para cada result page.

| Configuración          | Descripción                                                                                         |
| ---------------------- | --------------------------------------------------------------------------------------------------- |
| **KYC Result Image**   | Suba imágenes para mostrar en cada página para reflejar la identidad de marca.                      |
| **Image Optimization** | Especificaciones de imagen recomendadas adecuadas para diversos dispositivos y tamaños de pantalla. |

***

## Paso 4: Redacción de contenido de texto

Escriba mensajes para entregar a los usuarios.

| Campo         | Descripción                                                                                             | Límite                |
| ------------- | ------------------------------------------------------------------------------------------------------- | --------------------- |
| **Main Text** | Mensaje principal intuitivo y claro apropiado para los resultados de autenticación de identidad         | Máximo 125 caracteres |
| **Sub Text**  | Información detallada que complementa el texto principal y guía las acciones de seguimiento del usuario | Máximo 100 caracteres |

<Note>
  **Directrices de redacción de texto**

  Ingrese main text y sub text para los estados de aprobación/pending/rechazo para cada idioma soportado (esquina superior derecha). Los mensajes detallados de rechazo que los usuarios pueden ver no son personalizables.
</Note>

Después de completar la configuración detallada anterior, haga clic en **Save**.

***

## Paso 5: Pruebas y optimización

Después de completar la configuración de result page, puede verificar y optimizar de las siguientes formas:

<Steps>
  <Step title="Probar por estado">
    Verifique las result pages mediante submissions de prueba para cada estado.
  </Step>

  <Step title="Revisar configuración de idioma">
    Revise la visualización de la página en diversas configuraciones de idioma.
  </Step>

  <Step title="Verificar consistencia de marca">
    Verifique la consistencia de marca de imágenes y texto.
  </Step>

  <Step title="Mejora continua">
    Mejore continuamente la efectividad analizando datos de comportamiento del usuario y comentarios.
  </Step>
</Steps>

***

## Beneficios de la personalización de Result Page

<CardGroup cols={2}>
  <Card title="Consistencia de marca" icon="palette">
    Proporciona experiencia de usuario manteniendo consistencia de marca.
  </Card>

  <Card title="Soporte multipaís" icon="globe">
    La configuración personalizada por idioma es posible para servicios multipaís.
  </Card>

  <Card title="Mejora de satisfacción del usuario" icon="face-smile">
    Mejora la satisfacción del usuario mediante entrega de mensajes optimizados por estado.
  </Card>

  <Card title="Mejora de tasa de finalización del servicio" icon="chart-line-up">
    Mejora las tasas de finalización del servicio mediante guía de acciones de seguimiento.
  </Card>
</CardGroup>

<Info>
  La función de personalización de liveform se actualiza continuamente. Proporcionaremos funciones de autenticación de identidad conectadas a su servicio mediante opciones más diversas.
</Info>

***

## Custom Theme (query string)

<Note>
  Custom Theme no se configura desde esta página del dashboard. Se aplica agregando parámetros de query string directamente a la URL de liveform.
</Note>

Además de la personalización de result page, puede aplicar los colores de su marca a los botones CTA y elementos UI de acción positiva del liveform usando los parámetros de query string `mainColor` e `innerColor`. Esto le permite mantener un branding consistente durante todo el flujo KYC.

### Parámetros de query string

| Parámetro    | Formato                                      | Descripción                                                                            |
| ------------ | -------------------------------------------- | -------------------------------------------------------------------------------------- |
| `mainColor`  | Hex de 6 dígitos con `#` (p. ej., `#AEFF00`) | Establece el color primario para botones CTA y elementos de acción principal.          |
| `innerColor` | Hex de 6 dígitos con `#` (p. ej., `#FFFFFF`) | Establece el color interior (texto/icono) dentro de botones CTA y elementos de acción. |

<Warning>
  * El prefijo `#` es obligatorio. Los valores sin `#` (p. ej., `AEFF00`) no se aplicarán correctamente.
  * Debe cifrarse para su uso. Los valores anteriores deben incluirse dentro del parámetro `encrypted`.
</Warning>

**URL de ejemplo:**

```
https://form.argosidentity.com?pid={project_Id}&encrypted={'mainColor': '#AEFF00', 'innerColor': '#FFFFFF'}
```

<Note>
  El contenido dentro de `encrypted` debe estar cifrado. La URL anterior se muestra sin cifrar solo con fines ilustrativos.
</Note>

### Vista previa de colores

<div style={{display: 'flex', gap: '12px', alignItems: 'center', margin: '16px 0'}}>
  <div style={{display: 'flex', alignItems: 'center', gap: '6px'}}>
    <div style={{width: '16px', height: '16px', borderRadius: '4px', backgroundColor: '#AEFF00', border: '1px solid #E5E7EB'}} />

    <span style={{fontSize: '13px', color: '#374151'}}>`mainColor`: `#AEFF00`</span>
  </div>

  <div style={{display: 'flex', alignItems: 'center', gap: '6px'}}>
    <div style={{width: '16px', height: '16px', borderRadius: '4px', backgroundColor: '#FFFFFF', border: '1px solid #E5E7EB'}} />

    <span style={{fontSize: '13px', color: '#374151'}}>`innerColor`: `#FFFFFF`</span>
  </div>
</div>

<Frame caption="Liveform con Custom Theme aplicado (mainColor: #AEFF00, innerColor: #FFFFFF)">
  <img src="https://mintcdn.com/argosidentity/4V7KlU72S_FWV-KF/images/liveform/custom-theme/custom_theme_en.png?fit=max&auto=format&n=4V7KlU72S_FWV-KF&q=85&s=1a2f354dd1a8080cd754cf2ab2fb94de" alt="Pantalla de inicio de liveform mostrando un boton CTA verde con colores de marca personalizados aplicados" style={{maxHeight: '400px', width: 'auto'}} width="394" height="870" data-path="images/liveform/custom-theme/custom_theme_en.png" />
</Frame>

### Qué cambia

#### `mainColor` — elementos afectados por pantalla

<Expandable title="Alcance detallado de aplicación de mainColor">
  | Pantalla                                                 | Elemento afectado                                                                                                      |
  | -------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
  | Página de inicio (`/main`)                               | Botón Start / Submit (fondo degradado)                                                                                 |
  | Captura de tarjeta ID (`/shoot-id-card`)                 | Botón de captura, color de etiqueta de dirección del frente, guía de captura (fondo de slide positivo, trazo de icono) |
  | Captura de reverso de tarjeta ID (`/shoot-id-card-back`) | Botón de captura, guía de captura (fondo de slide positivo, trazo de icono)                                            |
  | Revisión de tarjeta ID (`/id-card-review`)               | Botón Submit / Re-capture                                                                                              |
  | Formulario Knowledge-Based (`/knowledge-form`)           | Botón de siguiente paso                                                                                                |
  | Formulario de información adicional (`/additional-form`) | Botón Submit                                                                                                           |
  | Búsqueda de dirección (`/address`)                       | Botón Select, fondo de icono de pin del mapa, color de texto del enlace "Change address"                               |
  | Captura de selfie — passive (`/shoot-face`)              | Texto guía, texto de estado de progreso                                                                                |
  | Guía de Active Liveness (`/active-liveness-guide`)       | Colores de texto e icono de guía de pasos                                                                              |
  | Resultado del submission (`/submission-result`)          | Botón Retry / Done, icono de estado de resultado (approved)                                                            |
  | Face Auth (`/face-auth`, `/face-auth-result`)            | Botón Start, botón de confirmación de resultado                                                                        |
  | Página de error (`/error-page`)                          | Botón Restart / Retry (solo tipos refresh, not-allow-file-upload)                                                      |
  | Página de escaneo QR en PC                               | Degradado de fondo de página, color de borde de esquina del código QR                                                  |
  | Popups de alerta (todas las pantallas)                   | Solo icono de éxito (tipo `success`); los iconos de error / warning / info no se afectan                               |
  | Iconos SVG (todas las pantallas)                         | Iconos de degradado de tema positivo (p. ej., ShieldCheck)                                                             |
</Expandable>

#### `innerColor` — elementos afectados

<Expandable title="Alcance detallado de aplicación de innerColor">
  | Pantalla                          | Elemento afectado                                                                 |
  | --------------------------------- | --------------------------------------------------------------------------------- |
  | Todas las pantallas — Botones CTA | Color de texto del botón (no se aplica cuando `innerColor` es `#FFFFFF` o `#FFF`) |
  | Todas las pantallas — Header      | Color de texto del botón de idioma actualmente seleccionado                       |
  | Guía de captura de tarjeta ID     | Color de texto de aviso del slide positivo                                        |
</Expandable>

#### No afectados

| Elemento                                         | Razón                                     |
| ------------------------------------------------ | ----------------------------------------- |
| Indicadores negativos (iconos Rejected, Warning) | Fijados a colores de tema negativo        |
| Iconos de popup de alerta Error / Warning / Info | Fijados a sus respectivos colores de tema |
| Texto negro del cuerpo                           | No es objetivo del Custom Theme           |
| Etiqueta de dirección del reverso de tarjeta ID  | Fijada a color rosa                       |

<Info>
  Custom Theme actualmente se aplica solo a elementos de acción positiva como botones CTA y UI relacionada con aprobación. Los indicadores negativos (rechazado, advertencia) y el texto negro existente no se ven afectados. El soporte para estos elementos está planificado para una actualización futura.
</Info>

<Tip>
  Puede probar fácilmente los parámetros de Custom Theme usando la [Herramienta de cifrado/descifrado de Query String](/dashboard/es/project-management/project-settings/project-info#herramienta-de-cifrado-y-descifrado-de-query-string) en el dashboard bajo **Configuración del proyecto > Información del proyecto**.
</Tip>

***

## Documentación relacionada

<CardGroup cols={2}>
  <Card title="Información del proyecto" icon="sliders" href="/dashboard/es/project-management/project-settings/project-info">
    Consulte la configuración de branding y Return URL.
  </Card>

  <Card title="Soporte de idiomas de Liveform" icon="language" href="/es/idcheck/getting-started/liveform-languages">
    Consulte la lista de idiomas soportados por liveform.
  </Card>

  <Card title="Guía de Return URL" icon="arrow-turn-down-right" href="/es/idcheck/getting-started/liveform-url/return-url-guide">
    Aprenda a configurar Return URLs.
  </Card>
</CardGroup>