> ## 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

> Ajusta logo, colores, políticas, consentimiento y el dominio de las ligas de onboarding desde el aplicativo web de Trébol.

Personaliza la apariencia y el flujo de consentimiento del widget para que refleje tu marca. Configuras logo, colores, políticas, correos y el modelo de consentimiento desde una interfaz con vista previa. La personalización es **a nivel de cuenta**: se aplica a todas las nuevas verificaciones.

<Note>
  La personalización **no tiene endpoint público**. Se configura solo desde el aplicativo web, no vía API. Necesitas el permiso `account:customize`. Si no ves "Personalización" en tu menú de configuración, contacta a tu administrador de cuenta.
</Note>

## Acceso a la interfaz

<Steps>
  <Step title="Inicia sesión">
    Entra al [Aplicativo Web de Trébol](https://app.gotrebol.com/) con tu cuenta.
  </Step>

  <Step title="Abre Ajustes">
    Haz clic en tu foto de perfil, arriba a la derecha, y elige **Ajustes**.
  </Step>

  <Step title="Selecciona Personalización">
    En el menú lateral, abre **Personalización**.
  </Step>

  <Step title="Trabaja con la vista previa">
    Verás dos columnas: a la izquierda el formulario y a la derecha una vista previa de la primera pantalla del widget.
  </Step>
</Steps>

## Campos configurables

El formulario muestra los campos en este orden: nombre, logo, color primario, color secundario, política de privacidad, redirección, términos, correo de contacto, remitente de los correos, RFC obligatorio, checkbox de consentimiento y configuración de consentimiento.

Solo el **nombre de la empresa**, el **color primario** y la **URL de política de privacidad** son requeridos. Los demás campos son opcionales.

### Información de la empresa

<Card title="Nombre de la empresa" icon="building">
  Label en la interfaz: **Nombre de la empresa**. Campo requerido.

  Aparece en el encabezado del sidebar, en los textos de consentimiento y en varios títulos del widget.
</Card>

### Branding visual

<CardGroup cols={2}>
  <Card title="Logo de la empresa" icon="image">
    Label: **Logo de la empresa**. Opcional.

    **Formatos:** PNG, JPG, GIF, WebP, SVG. **Tamaño máximo:** 20 MB. **Dimensiones recomendadas:** 200x100px.

    <Tip>
      Usa imágenes con fondo transparente (PNG o SVG) para que se vea bien sobre cualquier color.
    </Tip>

    El logo aparece en cinco superficies del widget:

    * Sidebar (en **todos** los pasos del flujo, no solo al inicio).
    * Banner principal de la landing.
    * Sección "¿Cómo funciona?".
    * Modal de confirmación (modo referral).
    * Modal de verificación duplicada.
  </Card>

  <Card title="Colores" icon="palette">
    Labels: **Color primario** (requerido) y **Color secundario** (opcional).

    El color primario se usa en botones, acentos y elementos activos. El secundario aplica a elementos secundarios, como el título de la pantalla de registro pendiente.

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

### URLs, correos y políticas

<AccordionGroup>
  <Accordion title="URL de política de privacidad" icon="shield-check">
    Label: **URL de política de privacidad**. Requerido.

    URL completa de tu política de privacidad. El prospecto la acepta antes de continuar. Aparece en el footer del widget.

    **Formato:** `https://tuempresa.com/privacidad`
  </Accordion>

  <Accordion title="URL de redirección (opcional)" icon="arrow-right-to-bracket">
    Label: **URL de redirección (opcional)**. Opcional.

    Si la configuras, la pantalla de éxito muestra un botón **"Finalizar"** que lleva a esa URL. El botón aparece **solo cuando el registro quedó completo**.

    Si la dejas vacía, la pantalla de éxito no tiene botón de salida.

    **Formato:** `https://tuempresa.com/dashboard`
  </Accordion>

  <Accordion title="URL de términos y condiciones (opcional)" icon="file-contract">
    Label: **URL de términos y condiciones (opcional)**. Opcional.

    Solo acepta URLs `http:` o `https:`. Se muestra junto a la política de privacidad. Inserta "los términos y condiciones y" en el texto de consentimiento y agrega el enlace de términos en la columna Legal del footer.

    **Formato:** `https://tuempresa.com/terminos`
  </Accordion>

  <Accordion title="Correo de contacto (opcional)" icon="envelope">
    Label: **Correo de contacto (opcional)**. Opcional.

    Reemplaza el correo de soporte de Trébol en el footer del widget. También es el correo de contacto de respaldo en la pantalla de verificación bloqueada.

    **Formato:** `soporte@tuempresa.com`
  </Accordion>

  <Accordion title="Remitente de los correos (opcional)" icon="paper-plane">
    Label: **Remitente de los correos (opcional)**. Opcional. Máximo 100 caracteres.

    Es el **único campo que no afecta al widget, sino a los correos**. Define el nombre visible del remitente en los correos automáticos de onboarding a tus prospectos.

    Si lo dejas vacío, el remitente es "Sofía de" seguido del nombre de tu empresa.
  </Accordion>
</AccordionGroup>

### Campo fiscal obligatorio

<Card title="Hacer el identificador fiscal (RFC/NIT) obligatorio" icon="id-card">
  Label: **Hacer el identificador fiscal (RFC/NIT) obligatorio**. Opcional (checkbox).

  Vuelve requerido el campo fiscal del primer paso del widget. Su efecto depende del país del flujo. Revisa [El primer formulario depende del país](#el-primer-formulario-depende-del-pais) para el detalle por país.
</Card>

## Configuración de consentimiento

El consentimiento del prospecto se controla con **dos ejes independientes** que se combinan. No es una sola elección entre dos modos.

### Eje 1 — quién obtiene el consentimiento

Lo controla el radio group **Configuración de consentimiento**. Tiene dos opciones:

<Tabs>
  <Tab title="Trébol refiere leads">
    Label: **Trébol refiere leads**.

    Trébol obtiene el consentimiento del lead para compartir sus datos con tu institución. Úsalo cuando necesitas que Trébol te refiera leads con autorización explícita.

    La landing muestra el co-branding completo de Trébol:

    * Se muestra "Powered By Trébol" en el sidebar.
    * Banner con el nombre de tu empresa y el texto "usa Trébol para validar documentos".
    * Sección "¿Cómo funciona?" con el flujo de dos pasos.
    * Tarjetas de beneficios (Seguro, Rápido, Confidencial, Aprobado).
    * Sección "Lo que dicen nuestros clientes" con **tres testimonios fijos** y no configurables.
    * Footer con los términos de Trébol y tu política de privacidad.
    * Un **modal de confirmación** antes de enviar el primer formulario (ver más abajo).
  </Tab>

  <Tab title="El cliente acepta directamente tus términos">
    Label: **El cliente acepta directamente tus términos**.

    El lead acepta directamente tus términos dentro del widget. Úsalo cuando tú eres el responsable principal del tratamiento de datos frente al cliente.

    La experiencia es más directa:

    * **No** se muestra "Powered By Trébol".
    * El widget abre en el formulario de captura, sin landing ni "¿Cómo funciona?".
    * Footer con tu política de privacidad (y tus términos, si los configuras).
    * El formulario se envía sin el modal de confirmación.
  </Tab>
</Tabs>

<Warning>
  Por defecto, si no configuras este control, el prospecto ve el co-branding completo de Trébol (equivale a **Trébol refiere leads**).
</Warning>

### Eje 2 — cómo se acepta

Lo controla el checkbox **Requerir aceptación explícita con checkbox**, opcional e independiente del eje 1:

* **Sin marcar:** consentimiento implícito. El prospecto acepta al hacer clic en "Comenzar".
* **Marcado:** aparece un checkbox de aceptación. El botón "Comenzar" queda deshabilitado hasta que el prospecto lo marca.

### Las cuatro combinaciones

Los dos ejes producen cuatro combinaciones efectivas:

| Eje 1 (quién)                  | Eje 2 (cómo) | Resultado                                                  |
| :----------------------------- | :----------- | :--------------------------------------------------------- |
| Trébol refiere leads           | Implícito    | Landing con co-branding; se acepta al hacer clic.          |
| Trébol refiere leads           | Checkbox     | Landing con co-branding; el botón se bloquea hasta marcar. |
| El cliente acepta directamente | Implícito    | Formulario directo; se acepta al hacer clic.               |
| El cliente acepta directamente | Checkbox     | Formulario directo; el botón se bloquea hasta marcar.      |

<Info>
  Consulta a tu equipo legal antes de elegir. El eje 1 define quién es el responsable del tratamiento de datos y tiene implicaciones legales.
</Info>

### El modal de confirmación (solo modo referral)

En modo **Trébol refiere leads**, antes de enviar el primer formulario aparece un modal "Compartir Información". Pregunta si autorizas a Trébol a compartir tu información con la empresa y ofrece los botones **Cancelar** y **Aceptar**. En modo directo el formulario se envía sin ese paso.

<h2 id="el-primer-formulario-depende-del-pais">
  El primer formulario depende del país
</h2>

El primer paso del widget captura correo, identificador fiscal y página web. La etiqueta y la obligatoriedad del campo fiscal cambian según el país del flujo. El checkbox **Hacer el identificador fiscal (RFC/NIT) obligatorio** actúa sobre este mismo campo:

<Tabs>
  <Tab title="México (mx)">
    El campo se etiqueta **RFC**. Es opcional, salvo que actives el checkbox de identificador fiscal obligatorio.
  </Tab>

  <Tab title="Colombia (co)">
    El campo se etiqueta **NIT (Sin dígito de verificación)** y es **siempre obligatorio**. El checkbox de identificador fiscal obligatorio no cambia nada.
  </Tab>

  <Tab title="Sin país definido">
    El campo se etiqueta **Número de identificación**. Es opcional, salvo que actives el checkbox de identificador fiscal obligatorio.
  </Tab>
</Tabs>

<Note>
  El país es una propiedad del **flujo** (`country`), no de la personalización. Lo defines al [crear el flujo](/docs/guia-devs/crear-verificaciones/via-widget/crear-flujo).
</Note>

## Vista previa

La columna derecha muestra una **miniatura estática de la primera pantalla** del widget. Se actualiza conforme editas nombre, logo, colores y consentimiento.

No es una réplica fiel del widget real. Ten en cuenta que:

* Solo muestra la primera pantalla, no el flujo completo.
* El listado de pasos del sidebar es de ejemplo y no refleja tu flujo real.
* No tiene vista móvil ni navegación entre pasos.

## Guardar los cambios

<Warning>
  El botón **"Guardar cambios"** solo se habilita si hiciste al menos un cambio. Los cambios se aplican a las **nuevas** verificaciones creadas con tu cuenta.
</Warning>

Al guardar, Trébol valida los campos, guarda la configuración y la aplica a las nuevas verificaciones.

## Dominio personalizado de onboarding

Las ligas de onboarding usan el dominio de Trébol (`onboarding.gotrebol.com`) salvo que configures tu **propio dominio** (por ejemplo `verificacion.tuempresa.com`) para que el prospecto vea tu marca en la URL durante todo el flujo.

Con el dominio verificado, todas las ligas nuevas usan tu dominio:

* Las ligas de **inicio de onboarding** quedan limpias, sin identificadores de cuenta: `https://verificacion.tuempresa.com/<id_slug>`, donde `id_slug` es el identificador legible del flujo que definiste en [Crear el flujo](/docs/guia-devs/crear-verificaciones/via-widget/crear-flujo). Por ejemplo: `https://verificacion.tuempresa.com/onboarding-mx-minimo`. Trébol genera estas ligas (el aplicativo web al crear una verificación, los correos de invitación automáticamente), y también puedes construirlas tú: el formato `https://<tu-dominio>/<id_slug>` es un contrato estable. Si el prospecto navega directo a `https://verificacion.tuempresa.com/`, entra al [flujo por defecto de tu cuenta](/docs/guia-devs/crear-verificaciones/via-widget/crear-flujo).

- El campo [`onboarding_url`](https://docs.gotrebol.com/api-reference/creacion-de-verificacion/crear-una-nueva-verificación) que devuelve el API conserva su formato actual (liga directa a la verificación, con su token de acceso). El API ya devuelve la liga con tu dominio; no necesitas reescribir el host. Aplica desde el momento en que el dominio queda verificado, también al consultar verificaciones creadas antes; las ligas ya entregadas sobre el dominio de Trébol siguen funcionando.

  | Escenario              | Ejemplo                                                                                                                      |
  | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
  | Sin dominio            | `https://onboarding.gotrebol.com/verification/c8dc41fc-c477-404e-aff7-b9074f86d6d1/docs-v2?accessToken=abc123&country=mx`    |
  | Con dominio verificado | `https://verificacion.tuempresa.com/verification/c8dc41fc-c477-404e-aff7-b9074f86d6d1/docs-v2?accessToken=abc123&country=mx` |

<Note>
  El dominio aplica a las ligas de onboarding. El **widget embebido** (`<trebol-widget>`) sigue cargando desde el dominio por defecto de Trébol.
</Note>

<Note>
  Como el resto de la personalización, el dominio **no tiene endpoint público**: se configura solo desde el aplicativo web, en la misma pantalla de **Personalización** y con el mismo permiso `account:customize`. Es independiente del botón "Guardar cambios": cada acción (agregar, verificar, eliminar) aplica de inmediato.
</Note>

### Configurar el dominio

<Steps>
  <Step title="Agrega tu dominio">
    Escribe el dominio (por ejemplo `verificacion.tuempresa.com`) y confírmalo. Queda en estado **Pendiente** y la interfaz te muestra el registro DNS que debes crear.
  </Step>

  <Step title="Crea el registro DNS">
    En el panel de tu proveedor de DNS, crea el registro que indica la interfaz. La interfaz es la fuente de verdad: muestra el registro exacto para tu dominio. Los valores típicos son:

    <Tabs>
      <Tab title="Subdominio (recomendado)">
        Registro **CNAME** apuntando a `cname.vercel-dns.com`. Para `verificacion.tuempresa.com`, la fila queda así:

        | Host           | Tipo    | Valor                  |
        | -------------- | ------- | ---------------------- |
        | `verificacion` | `CNAME` | `cname.vercel-dns.com` |
      </Tab>

      <Tab title="Dominio raíz">
        Registro **A** apuntando a `76.76.21.21`. Para `tuempresa.com`, la fila queda así:

        | Host | Tipo | Valor         |
        | ---- | ---- | ------------- |
        | `@`  | `A`  | `76.76.21.21` |
      </Tab>
    </Tabs>
  </Step>

  <Step title="Verifica">
    Haz clic en **Verificar**. Trébol confirma dos cosas: que el dominio te pertenece y que el DNS ya rutea correctamente. La propagación del DNS puede tardar desde minutos hasta horas según tu proveedor.
  </Step>
</Steps>

### Mientras el dominio está pendiente

Nada se rompe: las ligas siguen usando el dominio por defecto de Trébol hasta que tu dominio queda **Verificado**. Lo mismo aplica si nunca configuras un dominio.

Si la verificación no pasa, la interfaz te dice por qué. Puede ser que el DNS aún no apunte (espera la propagación y reintenta) o que el dominio requiera una validación extra de propiedad (sigue las instrucciones en pantalla).

La verificación es siempre manual: no hay reintento automático ni límite de tiempo — un dominio puede quedar en Pendiente indefinidamente sin afectar nada. El certificado TLS se emite de forma automática al verificar; no necesitas gestionarlo. Si una liga usa un `id_slug` que no existe o cuyo flujo fue eliminado, el prospecto ve la misma pantalla de error que hoy muestra una liga de flujo inválida en el dominio de Trébol.

### Eliminar o cambiar el dominio

<Warning>
  Al eliminar un dominio verificado, toda liga sobre ese dominio **deja de resolver de inmediato** — tanto las ya enviadas a prospectos como cualquier `onboarding_url` que hayas persistido en tu sistema. Las nuevas vuelven al dominio por defecto de Trébol. El aplicativo pide confirmación antes de aplicar.
</Warning>

Si guardaste ligas en tu sistema, vuelve a consultar la verificación en el API después de eliminar o cambiar el dominio: `onboarding_url` se calcula al momento de la consulta y devuelve la liga vigente.

Para cambiar de dominio, agrega el nuevo: Trébol libera el anterior automáticamente y el nuevo inicia su propio ciclo de verificación.

## Mejores prácticas

<CardGroup cols={2}>
  <Card title="Logo" icon="image">
    * Usa PNG o SVG con fondo transparente.
    * Mantén el ratio 2:1 (por ejemplo 200x100px).
    * Verifica que sea legible en tamaños pequeños.
    * Cárgalo siempre: el widget real no tiene imagen de reemplazo.
  </Card>

  <Card title="Colores" icon="palette">
    * Usa un primario con buen contraste sobre blanco.
    * Prueba tu paleta en la vista previa antes de guardar.
    * Toma los valores de tu guía de marca.
  </Card>

  <Card title="URLs" icon="link">
    * Publica tu política de privacidad y verifica que sea accesible.
    * Usa HTTPS en todas las URLs.
    * Apunta la redirección a un recurso válido.
  </Card>

  <Card title="Consentimiento" icon="shield-check">
    * Define el eje 1 con tu equipo legal.
    * Activa el checkbox si necesitas aceptación explícita.
    * Evita cambiar el modo con frecuencia.
  </Card>
</CardGroup>

## Preguntas frecuentes

<AccordionGroup>
  <Accordion title="¿Puedo tener configuraciones distintas por flujo?" icon="question">
    La personalización (logo, colores, políticas, consentimiento) es a nivel de **cuenta** y se aplica a todos los flujos.

    Aun así, algunas cosas **sí** varían por flujo: el país (`country`) y los pasos de la pantalla de éxito (`next_steps_checkout`). Configúralos en [Crear el flujo](/docs/guia-devs/crear-verificaciones/via-widget/crear-flujo).
  </Accordion>

  <Accordion title="¿Puedo cambiar entre los modos de consentimiento?" icon="question">
    Técnicamente sí, pero no es recomendable cambiarlo con frecuencia. Consulta a tu equipo legal antes, porque el eje 1 tiene implicaciones sobre el tratamiento de datos.
  </Accordion>

  <Accordion title="¿Qué pasa si no cargo un logo?" icon="question">
    El logo es opcional en el formulario. La vista previa del aplicativo web muestra un placeholder con el ícono de un edificio, pero **el widget real no tiene imagen de reemplazo**: el prospecto ve una imagen rota. En la práctica, carga siempre tu logo.
  </Accordion>

  <Accordion title="¿Puedo quitar un logo que ya guardé?" icon="question">
    El botón de eliminar solo limpia la vista previa local. El logo guardado se conserva. Para cambiar tu marca, sube un logo diferente y guarda.
  </Accordion>

  <Accordion title="¿Puedo usar mi logo 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), conviértelo 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>