Skip to content
Última actualización

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:

  1. Agrega el parámetro top_tier_institutions al objeto widget.
  2. Proporciona un array de 1 a 5 identificadores de instituciones de la lista disponible.
  3. Las instituciones se mostrarán en el orden en que las proporciones en el array.
Parámetro de Instituciones Principales
{
  "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:

  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).
{
  "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 CSSPredeterminado (claro)Predeterminado (oscuro)Descripción
--color-primary-base#0663f9#0254D9Establece el color activo para la barra de navegación 'stepper'.
--color-surface-base#FFFFFF1C1C1EEstablece el color inactivo para la barra de navegación 'stepper'.

Para modificar los colores primarios 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": "--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 CSSPredeterminado (claro)Predeterminado (oscuro)Descripción
--nav-bar-stepper-color-active#0663F9#E1ECFEEstablece el color activo para el 'stepper' de la barra de navegación.
--nav-bar-stepper-color#6C8193#FFFFFF con 90% de opacidadEstablece el color inactivo para el 'stepper' de la barra de navegación.
--nav-bar-icon-color#161A1D#FFFFFF con 90% de opacidadEstablece el color de los íconos de la barra de navegación.
--nav-bar-background-color#FFFFFF#1C1C1EDefine el color de fondo de la barra de navegación.
--nav-bar-border-color#E2E6E9#525866Especifica el color del borde de la barra de navegación.

Para modificar la barra de navegación 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": "--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 CSSPredeterminado (claro)Predeterminado (oscuro)Descripción
--button-font-color#ffffff#ffffffEstablece el color de la fuente para los botones.
--button-font-color-disabled#ffffff#ffffff con 90% de opacidadDefine el color de la fuente para los botones deshabilitados.
--button-border-radius2px2pxEspecifica el radio del borde de los botones.
--button-background-color-disabled#009EE3#2B303BDefine el color de fondo para los botones deshabilitados.
--button-opacity-disabled0.20.2Especifica la opacidad para los botones deshabilitados.
--button-border-color-disabled#CDE0FE#525866Establece el color del borde para los botones deshabilitados.

Para realizar modificaciones en los botones 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": "--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 CSSPredeterminado (claro)Predeterminado (oscuro)Descripción
--border-radius2px2pxEl radio del selector del botón.
--container-border-color-active#0663F9#0254D9El color de la selección activa.
--container-border-color-default#E2E6E9#525866El color de la selección inactiva.
--container-border-shadow-color#9CC1FC#9CC1FCLa sombra para la selección activa.

Para modificar los campos del selector 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": "--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 CSSPredeterminado (claro)Predeterminado (oscuro)Descripción
--banner-border-radius4px4pxEspecifica el radio del borde de los banners.
--banner-background-color#ffffff#22252BEstablece el color de fondo de los banners.
--banner-border-color#e2e6e9#e2e6e9Especifica el color del borde de los banners.
--banner-border-color-left-error#f90e06#f90e06Color del borde izquierdo para banners de error.
--banner-border-color-left-success#59c837#59c837Color del borde izquierdo para banners de éxito.
--banner-border-color-left-info#0663F9#0663F9Color del borde izquierdo para banners de información.
--banner-border-color-left-warning#f9c806#f9c806Color del borde izquierdo para banners de advertencia.
--banner-icon-color-error#f90e06#f90e06Color del ícono para banners de error.
--banner-icon-color-success#59c837#59c837Color del ícono para banners de éxito.
--banner-icon-color-info#0663F9#0663F9Color del ícono para banners de información.
--banner-icon-color-warning#f9c806#f9c806Color del ícono para banners de advertencia.
--banner-title-color#161a1d#FFFFFF con 95% de opacidadEstablece el color de los títulos de los banners.
--banner-body-color#414d58#FFFFFF con 90% de opacidadEspecifica el color del texto del cuerpo de los banners.
--banner-title-font-weight600600Define el peso de la fuente de los títulos de los banners.
--banner-body-font-weight600600Especifica el peso de la fuente del texto del cuerpo de los banners.
--banner-box-shadow0 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:

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