Personalización y Branding del Hosted Widget (OFDA)

Copiar

• Copiar para LLM

  Copiar página como Markdown para LLMs
• Ver como Markdown

  Abrir esta página como Markdown
• Abrir en ChatGPT

  Obtener información de ChatGPT
• Abrir en Claude

  Obtener información de Claude
• Conectar a Cursor

  Instalar servidor MCP en Cursor
• Conectar a VS Code

  Instalar servidor MCP en VS Code

Con el Hosted Widget de Belvo, puedes personalizar y darle tu marca al widget de dos maneras: a través de tu solicitud de token de acceso y mediante la herramienta del panel de control de Custom Widget.

Configurar a través de tu solicitud de token de acceso

Las configuraciones a continuación se envían como JSON en la misma llamada de backend que tu solicitud para generar un access_token. Para un ejemplo completo de cómo se ve esto, consulta el ejemplo de código a continuación.

Agregar un ícono de empresa

Puedes agregar el ícono de tu empresa al widget para que esté más alineado con tu marca. Cuando agregas el ícono de tu empresa, aparece en la siguiente pantalla:

• inicio inicial del widget

Asegúrate de que tu ícono tenga dimensiones cuadradas, esté en formato SVG, tenga un fondo transparente y no contenga espacios en blanco alrededor. Si tu ícono no sigue estas especificaciones, el widget de Belvo mostrará el siguiente ícono:

Instrucciones
Para agregar un ícono de empresa personalizado, simplemente agrega la URL de tu imagen SVG a la clave company_icon.

{
  "widget": {
    "branding": {
      ...
      "company_icon": "https://mysite.com/icon.svg",
      ...
        }
     }
}

Agregar el logotipo de la empresa

Puedes agregar el logotipo de tu empresa al widget para que esté más alineado con tu marca. Cuando agregas el logotipo de tu empresa, aparece en las siguientes pantallas:

• mientras se está vinculando la cuenta
• una vez que una cuenta se ha vinculado exitosamente
• cuando un usuario elige cancelar el proceso de vinculación

Asegúrate de que tu logotipo esté en formato SVG, tenga un fondo transparente y no contenga espacios en blanco alrededor. Para una mejor visibilidad y escalado, te sugerimos que uses un logotipo horizontal (ver el ejemplo en la parte superior izquierda de la imagen a continuación).

Instrucciones
Para agregar un logotipo personalizado de la empresa, simplemente añade la URL de tu imagen SVG a la clave company_logo.

{
  "widget": {
    "branding": {
      ...
      "company_logo": "https://mysite.com/logo.svg",
      ...
        }
     }
}

Agrega el nombre de tu empresa

Puedes agregar el nombre de tu empresa para que se muestre cuando el widget se inicie por primera vez. Por defecto, solo mostrará "Vincula tu cuenta". Cuando agregas el nombre de tu empresa, el mensaje seguirá el formato "[company_name] usa Belvo para conectar tu cuenta".

Instrucciones

Para agregar el nombre de tu empresa, simplemente agrégalo a la clave company_name.

{
  "widget": {
    "branding": {
      ...
      "company_name": "ACME",
      ...
        }
     }
}

Mostrar el logo de Belvo en el medio

Puedes optar por mostrar el logo de Belvo entre el logo de tu empresa y el logo de la institución en la pantalla inicial de conexión. Esto ayuda a reforzar que Belvo está facilitando la conexión segura. Por defecto, esta opción está configurada como false, y solo se muestran el logo de tu empresa y el logo de la institución.

Cuando está habilitado, el diseño del logo cambia a: [Logo de tu Empresa] → [Logo de Belvo] → [Logo de la Institución]

Instrucciones

Para mostrar el logo de Belvo en el medio de la pantalla inicial de conexión, configura el parámetro show_belvo_middle_logo a true.

{
  "widget": {
    "branding": {
      ...
      "show_belvo_middle_logo": true,
      ...
    }
  }
}

Mensajería personalizada para el propósito de consentimiento

Puedes modificar el texto que describe el propósito de solicitar los datos de tu usuario (Propósito del compartimiento) para describir mejor tu caso de uso.

Por defecto, el texto mostrado es: Soluções financeiras personalizadas oferecidas por meio de recomendações sob medida, visando melhores ofertas de produtos financeiros e de crédito.

Instrucciones

Para personalizar el texto que describe el propósito de solicitar acceso a los datos de tu usuario, simplemente añade tu texto (máximo 600 caracteres) a la clave purpose.

{
  "widget": {
    "consent": {
       "purpose": "Tu texto personalizado aquí. Máximo 600 caracteres",
       ...
    }
  }   
}

Establecer la duración predeterminada del consentimiento

Puedes especificar la duración predeterminada del consentimiento (en días) que se preseleccionará en el menú desplegable de la pantalla de consentimiento. Esto ayuda a optimizar la experiencia del usuario al presentar tu período de consentimiento preferido como la opción predeterminada.

El backend admite los siguientes valores de duración del consentimiento:

Cómo funciona:

• Si proporcionas uno de los valores válidos (366, 275, 183 o 92), esa opción se preseleccionará en el menú desplegable de duración del consentimiento.
• Si no proporcionas un valor o proporcionas un valor diferente, "Indeterminado" será la opción preseleccionada.
• El orden de la lista desplegable permanece sin cambios; solo cambia la opción preseleccionada.
• El widget acepta cualquier número entero positivo, pero solo los valores listados anteriormente corresponden a las opciones disponibles de duración del consentimiento.

Instrucciones

Para establecer la duración predeterminada del consentimiento, agrega el número de días a la clave default_consent_duration_days dentro del objeto consent.

{
  "widget": {
    "consent": {
       "default_consent_duration_days": 183
    }
  }
}

Ocultar mensaje en la pantalla de selección de institución

Puedes optar por ocultar el mensaje "Mais de 5 milhões de usuários já conectaram com segurança suas contas." que aparece cuando tu usuario selecciona su institución en el widget. Por defecto, este mensaje es visible en el widget (true).

Instrucciones

Para ocultar el mensaje en la pantalla de selección de institución, simplemente establece el parámetro social_proof en false.

{
  "widget": {
    "branding": {
      ...
      "social_proof": false,
      ...
        }
     }
}

Configurar a través de la herramienta de panel de control del Custom Widget

Las variables CSS se configuran visualmente a través de la herramienta Custom Widget en tu panel de control de Belvo.

Instrucciones

En tu panel de control de Belvo, ve a Developer Tools > Custom Widget.

Si tu organización ya tiene una personalización guardada, haz clic en Load current customization en la esquina superior derecha de la página para cargarla directamente en el editor y en la Widget Preview, en lugar de comenzar desde cero. Si tu organización tiene más de una personalización guardada, se te pedirá que elijas cuál cargar.

Para configurar una nueva personalización, en la sección Widget Configuration establece:

1. Locale: el idioma de visualización del widget: en (Inglés), es (Español) o pt-BR (Portugués).
2. Integration Type: Open Finance para el widget de Open Finance Brasil (OFDA), o Credentials para el widget multirregional.
3. Color scheme: Claro u Oscuro. Las variables CSS específicas para el modo oscuro usan un sufijo -dark, por ejemplo, --color-primary-base-dark establece el color primario específicamente para el modo oscuro.
4. Country Codes: qué países aparecen en la vista previa del widget.
5. Institution Types: qué tipos de instituciones aparecen en la vista previa: Fiscal (conexiones con autoridades fiscales), Retail (banca personal), Business (banca corporativa) o Employment (sistemas de empleador/nómina).

Una vez que hayas hecho clic en Load Widget, o cargado una personalización existente, podrás acceder al panel de CSS Variables. Busca o utiliza los filtros de categoría (Fuente, Navbar, Botón, Banner, Texto de Entrada, y más) para encontrar una variable, luego ingresa un valor. La Widget Preview a la derecha se actualiza en vivo mientras escribes, para que puedas verificar cada cambio antes de finalizarlo.

Haz clic en Export Configuration. Esto crea automáticamente un ticket de soporte en Zendesk con tu JSON de personalización adjunto, que el equipo de Belvo utiliza para aplicarlo a tu cuenta. Usa Import para cargar una configuración previamente exportada de nuevo en la herramienta si deseas seguir editándola.

Colores Primarios

Tipografía

Enlaces

Texto a Nivel de Página

Barra de Navegación

Botones

Banners

Campos de Entrada

Checkbox

Diálogo

Pestañas

Desplegable

Lista de Ítems

Acordeón

Superposición, Superficie, Divisor, Imagen y Diseño

Puedes agregar un color de superposición personalizado cuando el widget se carga en tu aplicación de escritorio. Recomendamos elegir un color neutro relacionado con tu marca para mantener el contexto ambiental.

Detalles del Consentimiento

Resumen de Consentimiento

Pantalla de Consentimiento en Proceso

La pantalla de carga que se muestra mientras se procesa el consentimiento.

Pantalla de Redirección