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

# Personalizar el widget

> Configura la apariencia y experiencia del widget de onboarding con tu marca

Ajusta la apariencia y el flujo de consentimiento del widget para que refleje tu marca: logo, colores, políticas y el modo de consentimiento que muestra al prospecto. La configuración se hace desde una interfaz con vista previa en tiempo real.

<Note>
  Esta funcionalidad requiere el permiso `account:customize`. Si no ves la opción "Personalización" en tu menú de configuración, contacta a tu administrador de cuenta.
</Note>

## Acceso a la interfaz

Para acceder a la configuración de personalización:

1. Navega al [Aplicativo Web de Trébol](https://app.gotrebol.com/) e inicia sesión
2. Navega a **Ajustes** en el menú desplegable que se abre haciendo click en tu foto de perfil en la parte superior derecha de la pantalla
3. Selecciona **Personalización** en el menú lateral
4. Verás una interfaz dividida en dos columnas:
   * **Izquierda**: formulario de configuración
   * **Derecha**: vista previa en tiempo real del widget

## Campos configurables

### Información de la empresa

<Card title="Nombre de la empresa" icon="building">
  El nombre que se mostrará en el widget. Este aparecerá en múltiples lugares como el encabezado del sidebar y en los textos de consentimiento.

  **Campo requerido**
</Card>

### Branding visual

<CardGroup cols={2}>
  <Card title="Logo de la empresa" icon="image">
    **Formatos soportados:** PNG, JPG, GIF, WebP, SVG

    **Tamaño máximo:** 20MB

    **Dimensiones recomendadas:** 200x100px

    <Tip>
      Para mejor visualización, usa imágenes con fondo transparente (PNG o SVG)
    </Tip>

    El logo se mostrará en:

    * Sidebar del widget (versión pequeña)
    * Banner principal (versión grande, solo en modo referral)
    * Flujo "¿Cómo funciona?" (miniatura, solo en modo referral)
  </Card>

  <Card title="Colores" icon="palette">
    **Color primario (requerido):** color principal de tu marca, usado en botones, acentos y elementos activos.

    **Color secundario (opcional):** color complementario para elementos secundarios.

    <Note>
      Los colores deben ser en formato hexadecimal. Ejemplos: `#6BC33C`, `#000000`. Se aceptan formatos cortos (`#RGB`) y completos (`#RRGGBB`).
    </Note>
  </Card>
</CardGroup>

### URLs y políticas

<AccordionGroup>
  <Accordion title="URL de política de privacidad" icon="shield-check">
    **Campo requerido**

    URL completa de tu política de privacidad. Los usuarios deberán aceptarla antes de continuar con el onboarding.

    **Formato:** `https://tuempresa.com/privacidad`

    Este enlace aparecerá en el footer del widget con el texto "política de privacidad".
  </Accordion>

  <Accordion title="URL de redirección (opcional)" icon="arrow-right-to-bracket">
    URL a la que será redirigido el usuario al finalizar exitosamente el proceso de onboarding.

    **Formato:** `https://tuempresa.com/dashboard`

    Si no se especifica, el usuario permanecerá en la página de confirmación del widget.
  </Accordion>
</AccordionGroup>

## Configuración de consentimiento

Esta es una de las configuraciones más importantes, ya que determina el **modelo de consentimiento** y la **experiencia del usuario** en el widget.

<Tabs>
  <Tab title="Modo directo">
    ### El cliente acepta directamente tus términos

    **Cuándo usar:** cuando tu empresa es el responsable principal del tratamiento de datos frente al cliente.

    **Características:**

    * El usuario acepta directamente tu política de privacidad
    * El widget muestra un formulario de captura de datos inmediato
    * **No** se muestra "Powered by Trébol" en el sidebar
    * El flujo es más directo: Email → NIT → Página Web → Comenzar
    * Footer simplificado con tu política de privacidad únicamente

    **Experiencia del usuario:**

    ```
    [Logo de tu empresa]

    Validación de documentos
    Completa los siguientes datos para iniciar tu proceso de registro

    Email *
    NIT (Sin dígito de verificación)*
    Página Web

    [Botón: Comenzar]

    Al dar click en comenzar aceptas la política de privacidad de [Tu Empresa]
    ```

    <Info>
      Esta opción es ideal para empresas que tienen su propio marco legal establecido y prefieren una experiencia de marca completamente propia.
    </Info>
  </Tab>

  <Tab title="Modo referral">
    ### Trébol refiere leads

    **Cuándo usar:** cuando necesitas que Trébol obtenga el consentimiento del lead para compartir sus datos con tu institución.

    **Características:**

    * Trébol obtiene el consentimiento explícito del usuario
    * El widget muestra una landing page con información sobre cómo funciona Trébol
    * **Se muestra** "Powered by Trébol" en el sidebar
    * Landing page con sección "¿Cómo funciona?" que explica el flujo
    * Tarjetas de beneficios detalladas (Seguro, Rápido, Confidencial, Aprobado)
    * Footer con términos de Trébol y tu política de privacidad

    **Experiencia del usuario:**

    ```
    [Logo de tu empresa]
    Powered By 🍀Trébol

    [Tu Empresa] usa Trébol para validar documentos

    Sube tus documentos de forma rápida y segura a Trébol,
    una solución aprobada por [Tu Empresa]

    [Botón: Comenzar]

    ¿Cómo funciona?
    1. Sube tus documentos a Trébol → 2. Trébol los verifica y comparte con [Tu Empresa]

    ✓ Seguro: Certificación ISO 27001 y encriptación avanzada
    ⚡ Rápido: Sube los documentos sin tener que ir a oficinas
    🔒 Confidencial: Tu información solo se comparte con [Tu Empresa]
    ✅ Aprobado: Trébol es un proveedor aprobado por [Tu Empresa]

    Al continuar aceptas los términos y la política de privacidad de Trébol,
    y la política de privacidad de [Tu Empresa]
    ```

    <Info>
      Esta opción es ideal para instituciones financieras y empresas que necesitan un marco legal claro de referencia de leads con autorización explícita.
    </Info>
  </Tab>
</Tabs>

### Comparación visual

| Aspecto                       | Modo directo         | Modo referral                         |
| :---------------------------- | :------------------- | :------------------------------------ |
| **Branding principal**        | Tu empresa           | Trébol + tu empresa                   |
| **Powered by Trébol**         | ❌ No se muestra      | ✅ Se muestra en sidebar               |
| **Landing page**              | ❌ Formulario directo | ✅ Landing con explicación completa    |
| **Sección "¿Cómo funciona?"** | ❌ No incluida        | ✅ Flujo visual de dos pasos           |
| **Tarjetas de beneficios**    | Íconos simples       | Tarjetas detalladas con descripciones |
| **Consentimiento**            | Solo tu política     | Trébol + tu política                  |

## Vista previa en tiempo real

La columna derecha de la interfaz muestra una **vista previa miniatura** del widget que se actualiza automáticamente conforme realizas cambios:

<Steps>
  <Step title="Previsualización instantánea">
    Cada cambio en nombre, logo, colores o configuración de consentimiento se refleja inmediatamente en la vista previa.
  </Step>

  <Step title="Representación fiel">
    La vista previa replica fielmente la estructura y estilos del widget real, incluyendo layout de sidebar + contenido, colores y tipografía, y textos y descripciones según el modo seleccionado.
  </Step>

  <Step title="Tamaños responsivos">
    La vista previa está optimizada para mostrar una versión a escala del widget, manteniendo las proporciones y diseño originales.
  </Step>
</Steps>

## Guardar los cambios

<Warning>
  El botón **"Guardar cambios"** solo estará habilitado si has realizado al menos un cambio en la configuración. Los cambios se aplican inmediatamente a todas las nuevas verificaciones creadas con tu cuenta.
</Warning>

Al hacer clic en "Guardar cambios":

1. **Validación de logo**: si cargaste un nuevo logo, se valida tamaño y formato
2. **Subida a S3**: el logo se sube a un bucket seguro de AWS S3
3. **Guardado de configuración**: todos los campos se guardan en tu cuenta
4. **Aplicación inmediata**: los cambios se reflejan en todas las nuevas instancias del widget

## Mejores prácticas

<CardGroup cols={2}>
  <Card title="Logo" icon="image">
    * Usa formato PNG o SVG con fondo transparente
    * Mantén dimensiones de 200x100px (ratio 2:1)
    * Asegúrate de que sea legible en tamaños pequeños
    * Evita logos con texto muy fino o detalles complejos
  </Card>

  <Card title="Colores" icon="palette">
    * El color primario debe tener buen contraste con blanco para botones
    * Prueba tu paleta en la vista previa antes de guardar
    * Usa colores de tu guía de marca oficial
    * El secundario es opcional, úsalo solo si es necesario
  </Card>

  <Card title="URLs" icon="link">
    * Verifica que tu política de privacidad esté publicada y accesible
    * Usa HTTPS en todas las URLs
    * La URL de redirección debe apuntar a un recurso válido
    * Considera usar una landing page post-onboarding personalizada
  </Card>

  <Card title="Consentimiento" icon="shield-check">
    * Consulta con tu equipo legal sobre qué modo usar
    * El modo directo requiere que tengas tu propia base legal
    * El modo referral es más seguro para instituciones financieras
  </Card>
</CardGroup>

## Consideraciones

<AccordionGroup>
  <Accordion title="Caché del navegador" icon="clock">
    Los usuarios que ya tengan el widget abierto pueden no ver los cambios inmediatamente. Necesitarán recargar la página o iniciar una nueva verificación.
  </Accordion>

  <Accordion title="Propagación asíncrona de cambios" icon="rotate">
    Los cambios se aplican de forma asíncrona. Puede tomar hasta 30 segundos para que la nueva configuración esté disponible en todas las regiones.
  </Accordion>

  <Accordion title="El logo no se muestra en la vista previa" icon="image-slash">
    **Posibles causas:**

    * El archivo excede 20MB
    * El formato no es soportado (verifica que sea PNG, JPG, GIF, WebP o SVG)
    * El archivo está corrupto

    **Solución:** prueba con un archivo diferente. Si el problema persiste, reduce el tamaño o cambia el formato.
  </Accordion>
</AccordionGroup>

## Preguntas frecuentes

<AccordionGroup>
  <Accordion title="¿Puedo tener diferentes configuraciones para diferentes flujos?" icon="question">
    No actualmente. La configuración de personalización es a nivel de cuenta y se aplica a todos los flujos. Si necesitas diferentes experiencias, considera crear cuentas separadas.
  </Accordion>

  <Accordion title="¿Puedo cambiar entre modo directo y referral libremente?" icon="question">
    Técnicamente sí, pero **no es recomendable** cambiar frecuentemente. Consulta con tu equipo legal antes de cambiar el modo de consentimiento, ya que tiene implicaciones legales sobre el tratamiento de datos.
  </Accordion>

  <Accordion title="¿Qué pasa si no cargo un logo?" icon="question">
    El widget mostrará un placeholder con el ícono de un edificio. Recomendamos cargar siempre tu logo para una mejor experiencia de marca.
  </Accordion>

  <Accordion title="¿Puedo usar mi logo si está en otro formato?" icon="question">
    Los formatos soportados son PNG, JPG, GIF, WebP y SVG. Si tu logo está en otro formato (EPS, AI, PSD), necesitarás convertirlo primero. Recomendamos PNG con fondo transparente o SVG.
  </Accordion>
</AccordionGroup>

## Siguientes pasos

<CardGroup cols={2}>
  <Card title="Instalar el widget" href="/docs/guia-devs/crear-verificaciones/via-widget/instalar">
    Embebe el widget en tu HTML con unas pocas líneas de código.
  </Card>

  <Card title="Estados del expediente" href="/docs/guia-devs/crear-verificaciones/via-widget/estados-expediente">
    Cómo monitorear el progreso del expediente del usuario final.
  </Card>
</CardGroup>