Branding y Personalización (Biometrix Pix Widget)
Con el Biometric Pix Widget de Belvo, puedes opcionalmente agregar el siguiente branding y personalización:
Configurar las instituciones a mostrar
Puedes especificar qué instituciones se muestran inicialmente en el widget proporcionando una lista de hasta 5 instituciones preferidas. Los usuarios aún podrán buscar otras instituciones más allá de las que especifiques.
Instrucciones
Para configurar las instituciones a mostrar:
- Agrega el parámetro
top_tier_institutions
al objetowidget
. - Proporciona un array de 1 a 5 identificadores de instituciones de la lista disponible.
- Las instituciones se mostrarán en el orden en que las proporciones en el array.
{
"use_cases": ["ENROLLMENT", "PAYMENT_INTENT"],
"widget": {
// Otros parámetros...
"top_tier_institutions": [ "nubank_retail", "picpay_retail", "mercadopago_retail", "itau_retail"]
}
}
Si no pasas este parámetro, el widget mostrará todas las instituciones disponibles.
Para obtener una lista de instituciones disponibles, consulta el parámetro top_tier_institutions en nuestra Referencia de API.
Establecer esquema de color
Una vez que configures el color_scheme
, puedes agregar personalizaciones adicionales a elementos individuales del widget (consulta las secciones detalladas a continuación). No tienes que incluir todas las posibles css_keys
. Solo puedes establecer las claves (y valores) que deseas modificar.
Puedes establecer si el widget debe mostrarse en un esquema de color claro u oscuro. Por defecto, el widget comenzará en el esquema de color LIGHT
. El esquema de color del widget no cambia automáticamente según la configuración del sistema del usuario.

Instrucciones
Para agregar y establecer el tema que deseas, simplemente agrega LIGHT
o DARK
a la clave color_scheme
en el objeto branding
:
{
"widget": {
"branding": {
...
"color_scheme": "LIGHT",
...
}
}
}
Animación personalizada
Puedes agregar una animación personalizada para mostrar cuando el widget se inicia. El tipo de archivo es una animación Lottie de 144px x 144px (puedes encontrar más detalles en la especificación aquí o ver algunos ejemplos aquí). Primero necesitarás compartir el archivo con Belvo para que podamos asegurarnos de que se cargue correctamente en el widget.

Para modificar los colores primarios del widget:
- Agrega el
theme
array al objetowidget
. - Para cada elemento que desees modificar, agrega un objeto que tenga las claves
css_key
yvalue
(ver el ejemplo de código a continuación).
{
"widget": {
"branding": {}, // Tu personalización de marca
"theme": [
{
"css_key": "--animation-file-name",
"value": "name_of_file_shared_with_belvo"
}, // Agrega opciones de tematización adicionales aquí
]
}
}
Modificar los colores primarios
Puedes personalizar el esquema de colores modificando los colores primarios activos y de fondo

Variable CSS | Predeterminado (claro) | Predeterminado (oscuro) | Descripción |
---|---|---|---|
--color-primary-base | #0663f9 | #0254D9 | Establece el color activo para la barra de navegación 'stepper'. |
--color-surface-base | #FFFFFF | 1C1C1E | Establece el color inactivo para la barra de navegación 'stepper'. |
Para modificar los colores primarios del widget:
- Agrega el
theme
array al objetowidget
. - Para cada elemento que desees modificar, agrega un objeto que tenga las claves
css_key
yvalue
(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": "#0663f9"
},
{
"css_key": "--color-surface-base",
"value": "#FFFFFF"
}, // Agrega opciones de tematización adicionales aquí
]
}
}
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:
Variable CSS | Predeterminado (claro) | Predeterminado (oscuro) | Descripción |
---|---|---|---|
--nav-bar-stepper-color-active | #0663F9 | #E1ECFE | Establece el color activo para el 'stepper' de la barra de navegación. |
--nav-bar-stepper-color | #6C8193 | #FFFFFF con 90% de opacidad | Establece el color inactivo para el 'stepper' de la barra de navegación. |
--nav-bar-icon-color | #161A1D | #FFFFFF con 90% de opacidad | Establece el color de los íconos de la barra de navegación. |
--nav-bar-background-color | #FFFFFF | #1C1C1E | Define el color de fondo de la barra de navegación. |
--nav-bar-border-color | #E2E6E9 | #525866 | Especifica el color del borde de la barra de navegación. |
Para modificar la barra de navegación del widget:
- Agrega el array
theme
al objetowidget
. - Para cada elemento que desees modificar, agrega un objeto que tenga las claves
css_key
yvalue
(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-stepper-color-active",
"value": "#0663F9"
},
{
"css_key": "--nav-bar-stepper-color",
"value": "#6C8193"
},
{
"css_key": "--nav-bar-icon-color",
"value": "#161A1D"
},
{
"css_key": "--nav-bar-background-color",
"value": "#FFFFFF"
},
{
"css_key": "--nav-bar-border-color",
"value": "#E2E6E9"
}, // 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:
Variable CSS | Predeterminado (claro) | Predeterminado (oscuro) | Descripción |
---|---|---|---|
--button-font-color | #ffffff | #ffffff | Establece el color de la fuente para los botones. |
--button-font-color-disabled | #ffffff | #ffffff con 90% de opacidad | Define el color de la fuente para los botones deshabilitados. |
--button-border-radius | 2px | 2px | Especifica el radio del borde de los botones. |
--button-background-color-disabled | #009EE3 | #2B303B | Define el color de fondo para los botones deshabilitados. |
--button-opacity-disabled | 0.2 | 0.2 | Especifica la opacidad para los botones deshabilitados. |
--button-border-color-disabled | #CDE0FE | #525866 | Establece el color del borde para los botones deshabilitados. |
Para realizar modificaciones en los botones del widget:
- Agrega el array
theme
al objetowidget
. - Para cada elemento que desees modificar, agrega un objeto que tenga las claves
css_key
yvalue
(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": "#CDE0FE"
},
]
}
}
Modificar los campos del selector del widget
Puedes personalizar los campos del selector del widget para adaptarlos a las necesidades de tu marca:

Las posibles modificaciones se enumeran en la tabla a continuación:
Variable CSS | Predeterminado (claro) | Predeterminado (oscuro) | Descripción |
---|---|---|---|
--border-radius | 2px | 2px | El radio del selector del botón. |
--container-border-color-active | #0663F9 | #0254D9 | El color de la selección activa. |
--container-border-color-default | #E2E6E9 | #525866 | El color de la selección inactiva. |
--container-border-shadow-color | #9CC1FC | #9CC1FC | La sombra para la selección activa. |
Para modificar los campos del selector del widget:
- Agrega el
theme
array al objetowidget
. - Para cada elemento que desees modificar, agrega un objeto que tenga las claves
css_key
yvalue
(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": "--border-radius",
"value": "2px"
},
{
"css_key": "--container-border-color-active",
"value": "#0663F9"
},
{
"css_key": "--container-border-color-default",
"value": "#E2E6E9"
},
{
"css_key": "--container-border-shadow-color",
"value": "#9CC1FC"
}
}, // Agrega opciones de tematización adicionales aquí
]
}
}
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:
Variable CSS | Predeterminado (claro) | Predeterminado (oscuro) | Descripción |
---|---|---|---|
--banner-border-radius | 4px | 4px | Especifica el radio del borde de los banners. |
--banner-background-color | #ffffff | #22252B | Establece el color de fondo de los banners. |
--banner-border-color | #e2e6e9 | #e2e6e9 | Especifica el color del borde de los banners. |
--banner-border-color-left-error | #f90e06 | #f90e06 | Color del borde izquierdo para banners de error. |
--banner-border-color-left-success | #59c837 | #59c837 | Color del borde izquierdo para banners de éxito. |
--banner-border-color-left-info | #0663F9 | #0663F9 | Color del borde izquierdo para banners de información. |
--banner-border-color-left-warning | #f9c806 | #f9c806 | Color del borde izquierdo para banners de advertencia. |
--banner-icon-color-error | #f90e06 | #f90e06 | Color del ícono para banners de error. |
--banner-icon-color-success | #59c837 | #59c837 | Color del ícono para banners de éxito. |
--banner-icon-color-info | #0663F9 | #0663F9 | Color del ícono para banners de información. |
--banner-icon-color-warning | #f9c806 | #f9c806 | Color del ícono para banners de advertencia. |
--banner-title-color | #161a1d | #FFFFFF con 95% de opacidad | Establece el color de los títulos de los banners. |
--banner-body-color | #414d58 | #FFFFFF con 90% de opacidad | Especifica el color del texto del cuerpo de los banners. |
--banner-title-font-weight | 600 | 600 | Define el peso de la fuente de los títulos de los banners. |
--banner-body-font-weight | 600 | 600 | Especifica el peso de la fuente del texto del cuerpo de los banners. |
--banner-box-shadow | 0 2px 4px 0 rgba(0, 0, 0, 0.05) | #0 2px 4px 0 rgb(82,88,102) | Añade un efecto de sombra a los banners. |
Para realizar modificaciones en los banners del widget:
- Agrega el array
theme
al objetowidget
. - Para cada elemento que desees modificar, agrega un objeto que tenga las claves
css_key
yvalue
(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)"
},
]
}
}
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.
Instrucciones
Para agregar el nombre de tu empresa, simplemente agrégalo a la clave company_name
en el objeto branding
.
{
"widget": {
"branding": {
...
"company_name": "ACME",
...
}
}
}