Skip to main content
La Personalización del Widget te permite personalizar completamente la experiencia visual y de consentimiento del widget de onboarding que tus clientes verán durante el proceso de verificación. Desde el logo y colores de tu marca hasta el flujo de consentimiento, todo es configurable desde una interfaz intuitiva con vista previa en tiempo real.
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.

​
Acceso a la Interfaz

Para acceder a la configuración de personalización:
  1. Navega a la web app 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 (1/3): Formulario de configuración
    • Derecha (2/3): Vista previa en tiempo real del widget

​
Campos Configurables

​
Información de la Empresa

Nombre de la empresa

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

​
Branding Visual

Logo de la empresa

Formatos soportados: PNG, JPG, GIF, WebP, SVGTamaño máximo: 20MBDimensiones recomendadas: 200x100px
Para mejor visualización, usa imágenes con fondo transparente (PNG o SVG)
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)

Colores

Color primario (requerido): Color principal de tu marca, usado en botones, acentos y elementos activos.Color secundario (opcional): Color complementario para elementos secundarios.
Los colores deben ser en formato hexadecimal. Ejemplos: #6BC33C, #000000
Puedes usar el selector de color visual o ingresar códigos hex manualmente. Se aceptan formatos cortos (#RGB) y completos (#RRGGBB).

​
URLs y Políticas

Campo requeridoURL completa de tu política de privacidad. Los usuarios deberán aceptarla antes de continuar con el onboarding.Formato: https://tuempresa.com/privacidadEste enlace aparecerá en el footer del widget con el texto “política de privacidad”.
URL a la que será redirigido el usuario al finalizar exitosamente el proceso de onboarding.Formato: https://tuempresa.com/dashboardSi no se especifica, el usuario permanecerá en la página de confirmación del widget.

​
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.

​
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]
Esta opción es ideal para empresas que tienen su propio marco legal establecido y prefieren una experiencia de marca completamente propia.

​
Comparación Visual

AspectoModo Directo (isReferral = false)Modo Referral (isReferral = true)
Branding principalTu empresaTré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 simplesTarjetas detalladas con descripciones
ConsentimientoSolo tu políticaTrébol + tu política
Número de pasos en stepper5 pasos3 pasos

​
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:
1

Previsualización instantánea

Cada cambio en nombre, logo, colores o configuración de consentimiento se refleja inmediatamente en la vista previa.
2

Representación fiel

La vista previa replica fielmente la estructura y estilos del widget real, incluyendo: - Layout de sidebar + contenido - Colores y tipografía - Textos y descripciones según el modo seleccionado
3

Tamaños responsivos

La vista previa está optimizada para mostrar una versión a escala del widget, manteniendo las proporciones y diseño originales.

​
Guardando los Cambios

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

Logo

  • 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

Colores

  • 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

URLs

  • 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

Consentimiento

  • 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 - No cambies el modo frecuentemente para mantener consistencia

​
Limitaciones y Consideraciones

  • Logo: Máximo 20MB
  • Formatos permitidos: PNG, JPG, GIF, WebP, SVG
  • Archivos muy grandes pueden causar tiempos de carga lentos en el widget
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.
Solo se aceptan colores en formato hexadecimal válido:
  • Formato corto: #RGB (ej: #F00 para rojo)
  • Formato completo: #RRGGBB (ej: #FF0000 para rojo)
Colores inválidos impedirán guardar la configuración.
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.

​
Solución de Problemas

Causa: No tienes el permiso account:customizeSolución: Contacta al administrador de tu cuenta Trébol para que te otorgue el permiso necesario.
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.
Causa: El color ingresado no está en formato hexadecimal válidoSolución:
  • Asegúrate de incluir el símbolo # al inicio
  • Usa 3 o 6 caracteres después del #
  • Solo usa caracteres válidos: 0-9, A-F
  • Ejemplos válidos: #6BC33C, #F00, #000000

​
Preguntas Frecuentes

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