# Hosted Widget Branding and Customization

Este artículo se refiere al widget multirregional
El contenido de este artículo se refiere al widget multirregional (aplicable para Empleos y Fiscal en México, así como Empleos en Brasil). Si deseas operar en Brasil, por favor consulta nuestro Hosted Widget para OFDA Regulada.

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

- El logo de tu empresa
- El ícono de tu empresa
- El nombre de tu empresa
- Enlace a tu política de privacidad
- Texto para resaltar los beneficios de tu producto
- Texto cuando un usuario elige cerrar el widget
- Ocultar mensajes en la pantalla de conexión de cuenta
- Agregar un color de superposición personalizado
- Habilitar el modo oscuro
- Agregar colores personalizados al widget


Agregar branding al generar access_token
Para agregar branding a tu widget, debe hacerse en la misma llamada de backend que tu solicitud para generar un `access_token`.

## 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 las siguientes pantallas:

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


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


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

Por favor, ten en cuenta que solo el nombre de la empresa es personalizable en la frase introductoria

**Instrucciones**

Para agregar el nombre de tu empresa, simplemente agrégalo a la clave `company_name`.


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


```curl
{
  "widget": {
    "branding": {
      "company_terms_url": "https://belvo.com/terms-service/",
        }
     }
}
```

## Agregar texto a la pantalla de conexión

Puedes agregar un mensaje personalizado en la pantalla inicial del widget para proporcionar información adicional a tus usuarios sobre por qué necesitan conectar su cuenta usando Belvo. Esto ayuda a impulsar la conversión y aumentar la confianza del usuario final para vincular su cuenta.

**Instrucciones**
Para agregar texto personalizado en la pantalla inicial de conexión:

1. Agrega el título del cuadro expandible a la clave `company_benefit_header`.
📝 La longitud máxima (incluyendo espacios) para el título es de 30 caracteres.
2. Agrega el contenido para el cuadro expandible a la clave `company_benefit_content`.
📝 La longitud máxima (incluyendo espacios) para el contenido es de 140 caracteres.


Debes proporcionar contenido tanto para `company_benefit_header` como para `company_benefit_content`. Si no proporcionas contenido para ambos, no aparecerá nada.


```json
{
  "widget": {
    "branding": {
      "company_benefit_header": "Aprobaciones más rápidas",
      "company_benefit_content": "Usar Belvo reduce el tiempo de aprobación de tu préstamo hasta en 15 días.",
        }
     }
}
```

## Agregar un mensaje de salida

Puedes agregar un mensaje personalizado para que se muestre cuando un usuario final elija cancelar la conexión de su cuenta. El mensaje aparece debajo de un aviso estándar "¿Estás seguro de que deseas cancelar?". Puedes resaltar los beneficios de continuar vinculando su cuenta usando el widget en comparación con los métodos tradicionales.

**Instrucciones**

Para agregar un mensaje de salida personalizado, añade el contenido a mostrar en la clave `opportunity_loss`.

📝 Tu mensaje puede tener un máximo de 120 caracteres, incluidos los espacios.


```json
{
  "widget": {
    "branding": {
      ...
      "opportunity_loss": "Puede tomar hasta 20 días evaluar tu solicitud usando métodos tradicionales.",
      ...
        }
     }
}
```

## Ocultar el mensaje en la pantalla de conexión de cuenta

Puedes elegir ocultar el mensaje "*+1m usuarios han conectado sus cuentas de forma segura usando Belvo*" que aparece cuando tu usuario llega a la pantalla de conexión de cuenta en el widget. Por defecto, este mensaje es visible en el widget (`true`).

** Instrucciones**

Para ocultar el mensaje en la pantalla de conexión de cuenta, simplemente establece el parámetro `social_proof` a `false`.


```json
{
  "widget": {
    "branding": {
      "social_proof": false,
        }
     }
}
```

## Agregar un color de superposición personalizado

Puedes agregar un color de superposición personalizado para cuando el widget se cargue 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.

Opacidad de la superposición
No importa qué color subas, Belvo establecerá automáticamente la opacidad al 90%. Esto se debe a las siguientes mejores prácticas de UX:

- Con opacidades más bajas (menos del 70%), el usuario puede experimentar dificultades para enfocarse en el flujo ya que tendrán "ruido visual" en el fondo.
- Los colores sólidos (opacidad establecida al 100%) pueden causar un cambio drástico, resultando en una experiencia discontinua o antinatural.


**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`.


```json
{
  "widget": {
    "branding": {
      "overlay_background_color": "#F0F2F4",
        }
     }
}
```

## Habilitar modo oscuro

El Connect Widget admite un tema de modo oscuro. Para habilitarlo, necesitas pasar el valor `DARK` en el parámetro `color_scheme` dentro del objeto `widget`.


```json
{
  "widget": {
    "color_scheme": "DARK",
  }
}
```

Cuando el modo oscuro está habilitado, también puedes personalizar los colores. Para aplicar un estilo personalizado específicamente para el modo oscuro, simplemente añade `-dark` a cualquiera de las variables CSS enumeradas en las secciones a continuación. Por ejemplo, para cambiar el color primario en modo oscuro, usarías `"--color-primary-base-dark"`.

Modo Oscuro Multi-Región
## Agregar colores personalizados al widget

Puedes personalizar el widget agregando los colores de tu propia marca a varias partes del widget:

- El color primario para botones, casillas de verificación y la barra de progreso
- El color de los iconos de navegación y el texto


Las posibles modificaciones se enumeran en la tabla a continuación:

| Variable CSS | Predeterminado (Claro) | Predeterminado (Oscuro) | Descripción |
|  --- | --- | --- | --- |
| `--color-primary-base` | `#0663F9` | `#0663F9` | Establece el color primario para botones, casillas de verificación y la barra de progreso. |
| `--nav-bar-title-color` | `#161A1D` | `#011432` | Establece el color del título de la barra de navegación. |
| `--nav-bar-icon-color` | `#161A1D` | `#011432` | Establece el color de los iconos de la barra de navegación. |


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


Claro

```json Ejemplo de Modo Claro
{
  "widget": {
    "color_scheme": "LIGHT",
    "branding": {}, // Tu marca personalizada
    "theme": [
      {
        "css_key": "--color-primary-base",
        "value": "#0663F9"
      },
      {
        "css_key": "--nav-bar-title-color",
        "value": "#161A1D"
      },
      {
        "css_key": "--nav-bar-icon-color",
        "value": "#161A1D"
      }
    ],
  }
}
```

Oscuro

```json Ejemplo de Modo Oscuro
{
  "widget": {
    "color_scheme": "DARK",
    "branding": {}, // Tu marca personalizada
    "theme": [
      {
        "css_key": "--color-primary-base",
        "value": "#0663F9"
      },
      {
        "css_key": "--nav-bar-title-color-dark",
        "value": "#011432"
      },
      {
        "css_key": "--nav-bar-icon-color-dark",
        "value": "#011432"
      }
    ],
  }
}
```

No tienes que incluir todas las posibles `css_keys`. Puedes simplemente establecer las claves (y valores) que deseas modificar.

## 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-title-color` | `#161a1d` | `#011432` | Establece el color del título de la barra de navegación. |
| `--nav-bar-title-align` | `center` | `center` | Especifica la alineación del título de la barra de navegación. Las posiciones posibles son: `center`, `start` y `end`. |
| `--nav-bar-icon-color` | `#161a1d` | `#011432` | Establece el color de los íconos de la barra de navegación. |
| `--nav-bar-background-color` | `#ffffff` | `#011432` | Define el color de fondo de la barra de navegación. |
| `--nav-bar-box-shadow` | `none` | `none` | Agrega un efecto de sombra a la barra de navegación. |
| `--nav-bar-border-color` | `#f0f2f4` | `#2B3D54` | Especifica el color del borde de la barra de navegació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.


Claro

```json Ejemplo de Modo Claro
{
  "widget": {
    "color_scheme": "LIGHT",
    "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í
    ]
  }
}
```

Oscuro

```json Ejemplo de Modo Oscuro
{
  "widget": {
    "color_scheme": "DARK",
    "branding": {}, // Tu marca personalizada
    "theme": [
      {
        "css_key": "--nav-bar-title-color-dark",
        "value": "#011432"
      },
      {
        "css_key": "--nav-bar-title-align",
        "value": "center"
      },
      {
        "css_key": "--nav-bar-icon-color-dark",
        "value": "#011432"
      },
      {
        "css_key": "--nav-bar-background-color-dark",
        "value": "#011432"
      },
      {
        "css_key": "--nav-bar-box-shadow",
        "value": "none"
      },
      {
        "css_key": "--nav-bar-border-color-dark",
        "value": "#2B3D54"
      }, // 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:

Estas modificaciones se aplican a todos los botones en el widget

Las posibles modificaciones se enumeran en la tabla a continuación:

| Variable CSS | Predeterminado (Claro) | Predeterminado (Oscuro) | Descripción |
|  --- | --- | --- | --- |
| `--button-font-color` | `#ffffff` | `#EEF3F8` | Establece el color de la fuente para los botones. |
| `--button-font-color-disabled` | `#ffffff` | `#EEF3F8` | 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` | `#0663F9` | 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` | `#09EE354` | `#09EE354` | Establece el color del borde para los botones deshabilitados. |


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.


Claro

```json Ejemplo de Modo Claro
{
  "widget": {
    "color_scheme": "LIGHT",
    "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": "#09EE354"
      }, // Agrega opciones de tematización adicionales aquí
    ]
  }
}
```

Oscuro

```json Ejemplo de Modo Oscuro
{
  "widget": {
    "color_scheme": "DARK",
    "branding": {}, // Tu marca personalizada
    "theme": [
      {
        "css_key": "--button-font-color-dark",
        "value": "#EEF3F8"
      },
      {
        "css_key": "--button-font-color-disabled-dark",
        "value": "#EEF3F8"
      },
      {
        "css_key": "--button-border-radius",
        "value": "2px"
      },
      {
        "css_key": "--button-background-color-disabled-dark",
        "value": "#0663F9"
      },
      {
        "css_key": "--button-opacity-disabled",
        "value": "0.2"
      },
      {
        "css_key": "--button-border-color-disabled",
        "value": "#09EE354"
      }, // 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` | `#011432` | Establece el color de fondo de los banners. |
| `--banner-border-color` | `#e2e6e9` | `#2B3D54` | Especifica el color del borde de los banners. |
| `--banner-border-color-left-error` | `#f90e06` | `#E04A39` | 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` | `#E04A39` | 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` | `#EEF3F8` | Establece el color de los títulos de los banners. |
| `--banner-body-color` | `#414d58` | `#C2CFD9` | 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 rgba(0, 0, 0, 0.05)` | Añade un efecto de sombra a los banners. |


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.


Claro

```json Ejemplo de Modo Claro
{
  "widget": {
    "color_scheme": "LIGHT",
    "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)"
      }, // Añade opciones de tematización adicionales aquí
    ]
  }
}
```

Oscuro

```json Ejemplo de Modo Oscuro
{
  "widget": {
    "color_scheme": "DARK",
    "branding": {}, // Tu marca personalizada
    "theme": [
      {
        "css_key": "--banner-border-radius",
        "value": "4px"
      },
      {
        "css_key": "--banner-background-color-dark",
        "value": "#011432"
      },
      {
        "css_key": "--banner-border-color-dark",
        "value": "#2B3D54"
      },
      {
        "css_key": "--banner-border-color-left-error-dark",
        "value": "#E04A39"
      },
      {
        "css_key": "--banner-border-color-left-success-dark",
        "value": "#59C837"
      },
      {
        "css_key": "--banner-border-color-left-info-dark",
        "value": "#0663F9"
      },
      {
        "css_key": "--banner-border-color-left-warning-dark",
        "value": "#F9C806"
      },
      {
        "css_key": "--banner-icon-color-error-dark",
        "value": "#E04A39"
      },
      {
        "css_key": "--banner-icon-color-success-dark",
        "value": "#59C837"
      },
      {
        "css_key": "--banner-icon-color-info-dark",
        "value": "#0663F9"
      },
      {
        "css_key": "--banner-icon-color-warning-dark",
        "value": "#F9C806"
      },
      {
        "css_key": "--banner-title-color-dark",
        "value": "#EEF3F8"
      },
      {
        "css_key": "--banner-body-color-dark",
        "value": "#C2CFD9"
      },
      {
        "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)"
      }, // Añade opciones de tematización adicionales aquí
    ]
  }
}
```

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

| Variable CSS | Predeterminado (Claro) | Predeterminado (Oscuro) | Descripción |
|  --- | --- | --- | --- |
| `--input-text-border-radius` | `2px` | `2px` | Define el radio del borde para los campos de entrada. |
| `--input-text-border-color` | `#161a1d` | `#2B3D54` | Especifica el color del borde para los campos de entrada. |
| `--input-text-outline-border-color` | `#c4cdd4` | `#3A4D64` | Define el color del borde de contorno para los campos de entrada. (como el efecto hover) |
| `--input-text-placeholder-color` | `#c4cdd4` | `#2B3D54` | Define el color para el texto del marcador de posición. |
| `--input-text-label-color` | `#414d58` | `#EEF3F8` | Establece el color de la etiqueta para los campos de entrada. |
| `--input-text-label-color-error` | `#f90e06` | `#E04A39` | Especifica el color de la etiqueta para los campos de entrada en estado de error. |
| `--input-text-label-variation` | `outlined` | `outlined` | Especifica la posición de la variación de la etiqueta. Las opciones posibles son: `outlined` y `top`. |
| `--input-text-icon-color` | `#000000` | `#E04A39` | Establece el color de los iconos de entrada. |


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.


Claro

```json Ejemplo de Modo Claro
{
  "widget": {
    "color_scheme": "LIGHT",
    "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í
    ]
  }
}
```

Oscuro

```json
{
  "widget": {
    "color_scheme": "DARK",
    "branding": {}, // Tu marca personalizada
    "theme": [
      {
        "css_key": "--input-text-border-radius",
        "value": "2px"
      },
      {
        "css_key": "--input-text-border-color-dark",
        "value": "#2B3D54"
      },
      {
        "css_key": "--input-text-outline-border-color-dark",
        "value": "#3A4D64"
      },
      {
        "css_key": "--input-text-placeholder-color-dark",
        "value": "#2B3D54"
      },
      {
        "css_key": "--input-text-label-color-dark",
        "value": "#EEF3F8"
      },
      {
        "css_key": "--input-text-label-color-error-dark",
        "value": "#E04A39"
      },
      {
        "css_key": "--input-text-label-variation",
        "value": "outlined"
      },
      {
        "css_key": "--input-text-icon-color-dark",
        "value": "#E04A39"
      }, // 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:

| Variable CSS | Predeterminado (Claro) | Predeterminado (Oscuro) | Descripción |
|  --- | --- | --- | --- |
| `--tab-text-color` | `#0663f9` | `#0663f9` | Define el color del texto para las pestañas. |
| `--tab-border-color` | `#0663f9` | `#0663f9` | Especifica el color del borde para la parte inferior de las pestañas. |


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.


Claro

```json Ejemplo de Modo Claro
{
  "widget": {
    "color_scheme": "LIGHT",
    "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í
    ]
  }
}
```

Oscuro

```json Ejemplo de Modo Oscuro
{
  "widget": {
    "color_scheme": "DARK",
    "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í
    ]
  }
}
```