Personalización y Marca del Hosted Widget (OFDA)

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

• El logo de tu empresa
• El ícono de tu empresa
• El nombre de tu empresa
• Enlace a tu política de privacidad
• Mensaje personalizado para el propósito de consentimiento
• Agregar un color de superposición personalizado
• Ocultar mensajes en la pantalla de selección de la institución
• Agregar colores personalizados al widget

Ejemplo de personalización completa y branding

{
  "id": "SECRET_ID",
  "password": "SECRET_PASSWORD",
  "scopes": "read_institutions,write_links",
  "credentials_storage": "365d",
  "stale_in": "300d",
  "fetch_resources": ["ACCOUNTS", "TRANSACTIONS", "OWNERS"],
  "widget": {
    "branding": {
      "company_icon": "https://mysite.com/icon.svg",
      "company_logo": "https://mysite.com/logo.svg",
      "company_name": "ACME",
      "company_terms_url": "https://belvo.com/terms-service/",
      "overlay_background_color": "#F0F2F4",
      "social_proof": true,
    },
    "purpose": "Soluções financeiras personalizadas oferecidas por meio de recomendações sob medida, visando melhores ofertas de produtos financeiros e de crédito.",
    "theme": [
      {
        "css_key": "--color-primary-base",
        "value": "#907AD6"
      },
      {
        "css_key": "--nav-bar-title-color",
        "value": "#4F518C"
      },
      {
        "css_key": "--nav-bar-icon-color",
        "value": "#4F518C"
      }
    ]
  }
}

Para obtener información más detallada sobre cada personalización, consulta las secciones relevantes 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 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 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 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 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á "Conecta 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/",
      ...
        }
     }
}

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 do compartilhamento) 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 agrega tu texto (máximo 600 caracteres) a la clave purpose.

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

Agregar un color de superposición personalizado

Puedes agregar un color de superposición personalizado para 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. Por defecto, esta superposición está configurada en gris.

Instrucciones

Para establecer el color de la 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",
      ...
        }
     }
}

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

Puedes elegir 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,
      ...
        }
     }
}

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 principal 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 las 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í
    ]
  }
}