Hosted Widget Branding and Customization

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

Las configuraciones a continuación se envían como JSON en la misma llamada de backend que tu solicitud para generar un access_token.

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 las siguientes pantallas:

• 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 añade la URL de tu imagen SVG a la clave company_icon.

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

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 agrega la URL de tu imagen SVG a la clave company_logo.

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

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",
        }
     }
}

Puedes agregar un enlace a tu política de privacidad (o términos y condiciones) en la pantalla inicial del widget que, al ser clicado, redirigirá a tus usuarios a la página web vinculada. Esto ayuda a tus usuarios a entender mejor cuál es tu caso de uso respecto a los datos que estás solicitando. Por defecto, el widget incluirá la URL a la política de privacidad de Belvo (<https://belvo.com/terms-service/>).

Instrucciones
Para agregar un enlace a tu política de privacidad en la pantalla de conexión inicial, simplemente añade la URL de tu política al key company_terms_url.

{
  "widget": {
    "branding": {
      "company_terms_url": "https://belvo.com/terms-service/",
        }
     }
}

Al utilizar una URL personalizada para términos y condiciones (a través de company_terms_url), puedes rastrear qué versión de tus T&C aceptó el usuario durante el flujo del widget. Esto es útil para propósitos de cumplimiento y auditoría, especialmente cuando tus términos se actualizan con el tiempo.

Instrucciones
Para rastrear la versión de los T&C, agrega el identificador de la versión a la clave company_terms_version. Este parámetro es obligatorio cuando proporcionas una company_terms_url personalizada (no usando el valor predeterminado de Belvo).

{
  "widget": {
    "branding": {
      "company_terms_url": "https://yourcompany.com/terms",
      "company_terms_version": "2024-03-15",
        }
     }
}

Puedes añadir un mensaje personalizado en la pantalla inicial del widget para proporcionar información adicional a tus usuarios sobre por qué necesitan conectar su cuenta usando Belvo. Esto ayuda a impulsar la conversión y aumentar la confianza del usuario final para vincular su cuenta.

Instrucciones
Para agregar texto personalizado en la pantalla inicial de conexión:

1. Añade el título del cuadro expandible a la clave company_benefit_header.
   📝 La longitud máxima (incluyendo espacios) para el título es de 30 caracteres.

2. Añade el contenido para el cuadro expandible a la clave company_benefit_content.
   📝 La longitud máxima (incluyendo espacios) para el contenido es de 140 caracteres.

{
  "widget": {
    "branding": {
      "company_benefit_header": "Aprobaciones más rápidas",
      "company_benefit_content": "Usar Belvo reduce el tiempo de aprobación de tu préstamo hasta en 15 días.",
        }
     }
}

Puedes agregar un mensaje personalizado para mostrar cuando un usuario final elige cancelar la conexión de su cuenta. El mensaje aparece debajo de un aviso estándar "¿Estás seguro de que deseas cancelar?". Puedes resaltar los beneficios de continuar vinculando su cuenta usando el widget en comparación con los métodos tradicionales.

Instrucciones

Para agregar un mensaje de salida personalizado, añade el contenido a mostrar en la clave opportunity_loss.

📝 Tu mensaje puede tener un máximo de 120 caracteres, incluidos los espacios.

{
  "widget": {
    "branding": {
      ...
      "opportunity_loss": "Puede tomar hasta 20 días evaluar tu solicitud usando métodos tradicionales.",
      ...
        }
     }
}

Puedes optar por ocultar el mensaje "+1m usuarios han conectado sus cuentas de forma segura usando Belvo" que aparece cuando tu usuario llega a la pantalla de conexión de cuenta en el widget. Por defecto, este mensaje es visible en el widget (true).

Instrucciones

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

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

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, y luego en la sección de Widget Configuration configura lo siguiente:

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 utilizan 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, podrás acceder al panel de CSS Variables. Busca o utiliza los filtros de categoría (Font, Navbar, Button, Banner, Input Text, 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.

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.