Hosted Widget Branding and Customization

Con el Connect Widget de Belvo, puedes opcionalmente agregar la siguiente personalización y branding:

• El logo de tu empresa
• El ícono de tu empresa
• El nombre de tu empresa
• Enlace a tu política de privacidad
• Texto para resaltar los beneficios de tu producto
• Texto cuando un usuario elige cerrar el widget
• Ocultar mensajes en la pantalla de conexión de cuenta
• Agregar un color de superposición personalizado
• Agregar colores personalizados al widget

Ejemplo de personalización completa y branding

curl -X POST \
  https://sandbox.belvo.com/api/token/ \
  -H 'Content-Type: application/json' \
  -H 'Host: sandbox.belvo.com' \
  -d '{
    "id": "SECRET_ID",
    "password": "SECRET_PASSWORD",
    "scopes": "read_institutions,write_links",
    "credentials_storage": "27d",
  	"fetch_resources":  ["ACCOUNTS","TRANSACTIONS","OWNERS"],
    "widget": {
        "branding": {
        	"company_icon": "https://mysite.com/icon.svg",
            "company_logo": "https://mysite.com/logo.svg",
            "company_name": "ACME",
            "social_proof": true,
            "company_terms_url": "https://belvo.com/terms-service/",
            "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.",
            "opportunity_loss": "Puede tomar hasta 20 días evaluar tu solicitud usando métodos tradicionales.",
            "overlay_background_color": "#F0F2F4"
        }
     }
  }'

Para obtener información más detallada sobre cada personalización, consulta la sección relevante a continuación.

Agregar un ícono de la 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 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 personalizado de la empresa, simplemente agrega la URL de tu imagen SVG a la clave company_icon.

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

Agregar un logo de la empresa

Puedes agregar el logo de tu empresa al widget para que esté más alineado con tu marca. Cuando agregas el logo 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 logo esté en formato SVG, tenga un fondo transparente y no contenga espacios en blanco alrededor. Para la mejor visibilidad y escalado, te sugerimos que uses un logo horizontal (ver el ejemplo en la parte superior izquierda de la imagen a continuación).

Instrucciones
Para agregar un logo 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",
        }
     }
}

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

Agrega un enlace a tu política de privacidad

Puedes agregar un enlace a tu política de privacidad (o términos y condiciones) en la pantalla inicial del widget que, al hacer clic, 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 con 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 inicial de conexión, simplemente agrega la URL de tu política a la clave company_terms_url.

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

Agregar texto a la pantalla de conexión

Puedes agregar 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. Agrega 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. Agrega 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": "Faster approvals",
      "company_benefit_content": "Using Belvo cuts down on your loan approval time by up to 15 days.",
        }
     }
}

Agregar un mensaje de salida

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 mensaje 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, agrega 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.",
      ...
        }
     }
}

Ocultar el mensaje en la pantalla de conexión de cuenta

Puedes elegir 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 a false.

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

Agregar un color de superposición personalizado

Puedes agregar un color de superposición personalizado para cuando el widget se cargue en tu aplicación de escritorio. Recomendamos elegir un color neutro relacionado con tu marca para mantener el contexto ambiental. Por defecto, esta superposición está configurada en gris.

Instrucciones

Para establecer el color de superposición, simplemente agrega el código HEX completo (## seguido de seis caracteres) a la clave overlay_background_color.

{
  "widget": {
    "branding": {
      "overlay_background_color": "#F0F2F4",
        }
     }
}

Agregar colores personalizados al widget

Puedes personalizar aún más el widget agregando los colores de tu propia marca a varias partes del widget:

• El color primario para botones, casillas de verificación y la barra de progreso
• El color de los iconos de navegación y el texto

Instrucciones

Para establecer los colores de tu marca:

1. Agrega el theme array al objeto widget.
2. Para cada elemento que desees modificar, agrega un objeto que tenga las claves css_key y value (ver el ejemplo de código a continuación). Los valores de color pueden estar en formato HEX, RGB o RGBA.

{
  "widget": {
    "branding": {}, // Tu marca personalizada
    "theme": [
      {
        "css_key": "--color-primary-base",
        "value": "#907AD6"
      },
      {
        "css_key": "--nav-bar-title-color",
        "value": "#4F518C"
      },
      {
        "css_key": "--nav-bar-icon-color",
        "value": "#4F518C"
      }
    ],
  }
}

Modificar la barra de navegación del widget

Puedes personalizar la barra de navegación del widget modificando los colores para adaptarlos a las necesidades de tu marca:

Las posibles modificaciones se enumeran en la tabla a continuación:

Para modificar la barra de navegación del widget:

1. Agrega el theme array al objeto widget.
2. Para cada elemento que desees modificar, agrega un objeto que tenga las claves css_key y value (ver el ejemplo de código a continuación). Los valores de color pueden estar en formato HEX, RGB o RGBA.

{
  "widget": {
    "branding": {}, // Tu marca personalizada
    "theme": [
      {
        "css_key": "--nav-bar-title-color",
        "value": "#161a1d"
      },
      {
        "css_key": "--nav-bar-title-align",
        "value": "center"
      },
      {
        "css_key": "--nav-bar-icon-color",
        "value": "#161a1d"
      },
      {
        "css_key": "--nav-bar-background-color",
        "value": "#ffffff"
      },
      {
        "css_key": "--nav-bar-box-shadow",
        "value": "none"
      },
      {
        "css_key": "--nav-bar-border-color",
        "value": "#f0f2f4"
      }, // Agrega opciones de tematización adicionales aquí
    ]
  }
}

Modificar los botones del widget

Puedes personalizar los botones del widget modificando los colores y los radios de los bordes para adaptarlos a las necesidades de tu marca:

Las posibles modificaciones se enumeran en la tabla a continuación:

Para realizar modificaciones en los botones del widget:

1. Agrega el theme array al objeto widget.
2. Para cada elemento que desees modificar, agrega un objeto que tenga las claves css_key y value (ver el ejemplo de código a continuación). Los valores de color pueden estar en formato HEX, RGB o RGBA.

{
  "widget": {
    "branding": {}, // Tu marca personalizada
    "theme": [
      {
        "css_key": "--button-font-color",
        "value": "#ffffff"
      },
      {
        "css_key": "--button-font-color-disabled",
        "value": "#ffffff"
      },
      {
        "css_key": "--button-border-radius",
        "value": "2px"
      },
      {
        "css_key": "--button-background-color-disabled",
        "value": "#009EE3"
      },
      {
        "css_key": "--button-opacity-disabled",
        "value": "0.2"
      },
      {
        "css_key": "--button-border-color-disabled",
        "value": "#009EE354"
      },
    ]
  }
}

Modificar los banners del widget (llamadas)

Puedes personalizar los banners del widget para adaptarlos a las necesidades de tu marca:

Las posibles modificaciones se enumeran en la tabla a continuación:

Para realizar modificaciones en los banners del widget:

1. Agrega el theme array al objeto widget.
2. Para cada elemento que desees modificar, agrega un objeto que tenga las claves css_key y value (ver el ejemplo de código a continuación). Los valores de color pueden estar en formato HEX, RGB o RGBA.

{
  "widget": {
    "branding": {}, // Tu marca personalizada
    "theme": [
      {
        "css_key": "--banner-border-radius",
        "value": "4px"
      },
      {
        "css_key": "--banner-background-color",
        "value": "#ffffff"
      },
      {
        "css_key": "--banner-border-color",
        "value": "#e2e6e9"
      },
      {
        "css_key": "--banner-border-color-left-error",
        "value": "#f90e06"
      },
      {
        "css_key": "--banner-border-color-left-success",
        "value": "#59c837"
      },
      {
        "css_key": "--banner-border-color-left-info",
        "value": "#0663F9"
      },
      {
        "css_key": "--banner-border-color-left-warning",
        "value": "#f9c806"
      },
      {
        "css_key": "--banner-icon-color-error",
        "value": "#f90e06"
      },
      {
        "css_key": "--banner-icon-color-success",
        "value": "#59c837"
      },
      {
        "css_key": "--banner-icon-color-info",
        "value": "#0663F9"
      },
      {
        "css_key": "--banner-icon-color-warning",
        "value": "#f9c806"
      },
      {
        "css_key": "--banner-title-color",
        "value": "#161a1d"
      },
      {
        "css_key": "--banner-body-color",
        "value": "#414d58"
      },
      {
        "css_key": "--banner-title-font-weight",
        "value": "600"
      },
      {
        "css_key": "--banner-body-font-weight",
        "value": "600"
      },
      {
        "css_key": "--banner-box-shadow",
        "value": "0 2px 4px 0 rgba(0, 0, 0, 0.05)"
      },
    ]
  }
}

Modificar los campos de entrada del widget

Puedes personalizar los campos de entrada del widget para adaptarlos a las necesidades de tu marca:

Las posibles modificaciones se enumeran en la tabla a continuación:

Para modificar los campos de entrada del widget:

1. Agrega el theme array al objeto widget.
2. Para cada elemento que desees modificar, agrega un objeto que tenga las claves css_key y value (ver el ejemplo de código a continuación). Los valores de color pueden estar en formato HEX, RGB o RGBA.

{
  "widget": {
    "branding": {}, // Tu marca personalizada
    "theme": [
      {
        "css_key": "--input-text-border-radius",
        "value": "2px"
      },
      {
        "css_key": "--input-text-border-color",
        "value": "#161a1d"
      },
      {
        "css_key": "--input-text-outline-border-color",
        "value": "#c4cdd4"
      },
      {
        "css_key": "--input-text-placeholder-color",
        "value": "#c4cdd4"
      },
      {
        "css_key": "--input-text-label-color",
        "value": "#414d58"
      },
      {
        "css_key": "--input-text-label-color-error",
        "value": "#f90e06"
      },
      {
        "css_key": "--input-text-label-variation",
        "value": "outlined"
      },
      {
        "css_key": "--input-text-icon-color",
        "value": "#000000"
      }, // Agrega opciones de tematización adicionales aquí
    ]
  }
}

Modificar Componentes de Pestañas del Widget

Puedes personalizar las pestañas del widget para adaptarlas a las necesidades de tu marca:

Las posibles modificaciones se enumeran en la tabla a continuación:

Para modificar las pestañas del widget:

1. Agrega el array theme al objeto widget.
2. Para cada elemento que desees modificar, agrega un objeto que tenga las claves css_key y value (ver el ejemplo de código a continuación). Los valores de color pueden estar en formato HEX, RGB o RGBA.

{
  "widget": {
    "branding": {}, // Tu marca personalizada
    "theme": [
      {
        "css_key": "--tab-text-color",
        "value": "#0663f9"
      },
      {
        "css_key": "--tab-border-color",
        "value": "#0663f9"
      }, // Agrega opciones de tematización adicionales aquí
    ]
  }
}