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.

{
  "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

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

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:

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:

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:

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:

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