# 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.



```json 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`:


```json
{
  "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).



```json
{
  "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:

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.



```json
{
  "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:

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.



```json
{
  "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:

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.



```json
{
  "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:

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.



```json
{
  "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:

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.



```json
{
  "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`.


```json
{
  "widget": {
    "branding": {
      ...
      "company_name": "ACME",
      ...
        }
     }
}
```