# Branding e Personalização do Hosted Widget

Este artigo refere-se ao hosted widget multi-região
O conteúdo deste artigo refere-se ao hosted widget multi-região (aplicável para Empregos e Fiscal no México, bem como Empregos no Brasil). Se você deseja operar no Brasil, consulte nosso Hosted Widget para OFDA Regulamentado.

Com o Connect Widget da Belvo, você pode opcionalmente adicionar a seguinte personalização e branding:

- O logotipo da sua empresa
- O ícone da sua empresa
- O nome da sua empresa
- Link para a sua política de privacidade
- Texto para destacar os benefícios do seu produto
- Texto quando um usuário opta por fechar o widget
- Ocultar mensagens na tela de conexão da conta
- Adicionar uma cor de sobreposição personalizada
- Habilitar modo escuro
- Adicionar cores personalizadas ao widget


Adicione branding ao gerar access_token
Para adicionar branding ao seu widget, isso deve ser feito na mesma chamada de backend que sua solicitação para gerar um `access_token`.

## Adicionar um ícone da empresa

Você pode adicionar o ícone da sua empresa ao widget para que ele fique mais alinhado com a sua marca.
Quando você adiciona o ícone da sua empresa, ele aparece nas seguintes telas:

- início inicial do widget


Certifique-se de que seu ícone tenha dimensões quadradas, esteja no formato SVG, tenha um fundo transparente e não contenha espaços em branco ao redor. Se o seu ícone não seguir essas especificações, o widget da Belvo exibirá o seguinte ícone:

**Instruções**
Para adicionar um ícone personalizado da empresa, basta adicionar a URL para sua imagem SVG na chave `company_icon`.

```json Exemplo de Ícone da Empresa
{
  "widget": {
    "branding": {
      "company_icon": "https://mysite.com/icon.svg",
        }
     }
}
```

## Adicionar o logotipo da empresa

Você pode adicionar o logotipo da sua empresa ao widget para que ele fique mais alinhado com a sua marca. Quando você adiciona o logotipo da sua empresa, ele aparece nas seguintes telas:

- enquanto a conta está sendo vinculada
- uma vez que uma conta é vinculada com sucesso
- quando um usuário opta por cancelar o processo de vinculação


Certifique-se de que seu logotipo esteja no formato SVG, tenha um fundo transparente e não contenha espaços em branco ao redor. Para melhor visibilidade e escalabilidade, sugerimos que você use um logotipo horizontal (veja o exemplo no canto superior esquerdo da imagem abaixo).

**Instruções**
Para adicionar um logotipo personalizado da empresa, basta adicionar a URL da sua imagem SVG à chave `company_logo`.

```json Exemplo de Logotipo da Empresa
{
  "widget": {
    "branding": {
      "company_logo": "https://mysite.com/logo.svg",
        }
     }
}
```

## Adicione o nome da sua empresa

Você pode adicionar o nome da sua empresa para ser exibido quando o widget iniciar pela primeira vez. Por padrão, será exibido apenas "Conecte sua conta". Quando você adiciona o nome da sua empresa, a mensagem seguirá o formato "[company_name] usa Belvo para conectar sua conta".

Por favor, note que apenas o nome da empresa é personalizável na frase introdutória

**Instruções**

Para adicionar o nome da sua empresa, basta adicioná-lo à chave `company_name`.

```json Company Name
{
  "widget": {
    "branding": {
      "company_name": "ACME",
        }
     }
}
```

## Adicione um link para sua política de privacidade

Você pode adicionar um link para sua política de privacidade (ou termos e condições) na tela inicial do widget que, ao ser clicado, redirecionará seus usuários para a página web vinculada. Isso ajuda seus usuários a entenderem melhor qual é o seu caso de uso em relação aos dados que você está solicitando. Por padrão, o widget incluirá a URL para a política de privacidade da Belvo (`<https://belvo.com/terms-service/`>).

**Instruções**
Para adicionar um link para sua política de privacidade na tela inicial de conexão, basta adicionar a URL da sua política à chave `company_terms_url`.

```json Show Belvo Middle Logo
{
  "widget": {
    "branding": {
      "company_terms_url": "https://belvo.com/terms-service/",
        }
     }
}
```

## Acompanhe a versão dos seus termos e condições

Ao usar uma URL personalizada para os termos e condições (via `company_terms_url`), você pode acompanhar qual versão dos seus T&C o usuário aceitou durante o fluxo do widget. Isso é útil para fins de conformidade e auditoria, especialmente quando seus termos são atualizados ao longo do tempo.

**Instruções**
Para acompanhar a versão dos T&C, adicione o identificador de versão à chave `company_terms_version`. Este parâmetro é obrigatório quando você fornece um `company_terms_url` personalizado (não usando o padrão da Belvo).

Formato recomendado
Recomendamos usar um formato de data (por exemplo, `2024-03-15` ou `20240315`) para indicar claramente quando seus termos foram atualizados pela última vez. Isso facilita o acompanhamento das mudanças ao longo do tempo em comparação com números de versão.

```json Company Terms and Conditions
{
  "widget": {
    "branding": {
      "company_terms_url": "https://yourcompany.com/terms",
      "company_terms_version": "2024-03-15",
        }
     }
}
```

## Adicionar texto à tela de conexão

Você pode adicionar uma mensagem personalizada na tela inicial do widget para fornecer informações adicionais aos seus usuários sobre por que eles precisam conectar sua conta usando Belvo. Isso ajuda a aumentar a conversão e a confiança do usuário final para vincular sua conta.

**Instruções**
Para adicionar texto personalizado na tela inicial de conexão:

1. Adicione o título da caixa expansível à chave `company_benefit_header`.
📝 O comprimento máximo (incluindo espaços) para o título é de 30 caracteres.
2. Adicione o conteúdo para a caixa expansível à chave `company_benefit_content`.
📝 O comprimento máximo (incluindo espaços) para o conteúdo é de 140 caracteres.


Você deve fornecer conteúdo para ambos `company_benefit_header` e `company_benefit_content`. Se você não fornecer conteúdo para ambos, nada aparecerá.

```json Benefits
{
  "widget": {
    "branding": {
      "company_benefit_header": "Aprovações mais rápidas",
      "company_benefit_content": "Usar Belvo reduz o tempo de aprovação do seu empréstimo em até 15 dias.",
        }
     }
}
```

## Adicionar uma mensagem de saída

Você pode adicionar uma mensagem personalizada para ser exibida quando um usuário final optar por cancelar a conexão de sua conta. A mensagem aparece abaixo de um aviso padrão "Tem certeza de que deseja cancelar?". Você pode destacar os benefícios de continuar a vincular a conta usando o widget em comparação com métodos tradicionais.

**Instruções**

Para adicionar uma mensagem de saída personalizada, adicione o conteúdo a ser exibido na chave `opportunity_loss`.

📝 Sua mensagem pode ter no máximo 120 caracteres, incluindo espaços.

```json Mensagem de Saída
{
  "widget": {
    "branding": {
      ...
      "opportunity_loss": "Pode levar até 20 dias para avaliar sua solicitação usando métodos tradicionais.",
      ...
        }
     }
}
```

## Ocultar mensagem na tela de conexão de conta

Você pode optar por ocultar a mensagem "*+1m usuários conectaram suas contas com segurança usando Belvo*" que aparece quando o usuário chega à tela de conexão de conta no widget. Por padrão, essa mensagem é visível no widget (`true`).

** Instruções**

Para ocultar a mensagem na tela de conexão de conta, basta definir o parâmetro `social_proof` como `false`.

```json Ocultar Mensagem Social
{
  "widget": {
    "branding": {
      "social_proof": false,
        }
     }
}
```

## Adicionar uma cor de sobreposição personalizada

Você pode adicionar uma cor de sobreposição personalizada para quando o widget carregar em sua aplicação desktop. Recomendamos escolher uma cor neutra relacionada à sua marca para manter o contexto ambiental. Por padrão, essa sobreposição é definida como cinza.

Opacidade da sobreposição
Independentemente da cor que você enviar, a Belvo definirá automaticamente a opacidade para 90%. Isso se deve às seguintes práticas recomendadas de UX:

- Com opacidades mais baixas (menos de 70%), o usuário pode ter dificuldades para se concentrar no fluxo, pois terá "ruído visual" no fundo.
- Cores sólidas (opacidade definida em 100%) podem causar uma mudança drástica, resultando em uma experiência desconexa ou não natural.


**Instruções**

Para definir a cor da sobreposição, basta adicionar o código HEX completo (## seguido de seis caracteres) à chave `overlay_background_color`.

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

## Ativar modo escuro

O Connect Widget suporta um tema de modo escuro. Para ativá-lo, você precisa passar o valor `DARK` no parâmetro `color_scheme` dentro do objeto `widget`.

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

Quando o modo escuro está ativado, você também pode personalizar as cores. Para aplicar um estilo personalizado especificamente para o modo escuro, basta adicionar `-dark` a qualquer uma das variáveis CSS listadas nas seções abaixo. Por exemplo, para alterar a cor primária no modo escuro, você usaria `"--color-primary-base-dark"`.

Modo Escuro Multi-Região
## Adicionar cores personalizadas ao widget

Você pode personalizar o widget adicionando as cores da sua marca a várias partes do widget:

- A cor primária para botões, caixas de seleção e a barra de progresso
- A cor dos ícones de navegação e do texto


As possíveis modificações estão listadas na tabela abaixo:

| Variável CSS | Padrão (Claro) | Padrão (Escuro) | Descrição |
|  --- | --- | --- | --- |
| `--color-primary-base` | `#0663F9` | `#0663F9` | Define a cor primária para botões, caixas de seleção e a barra de progresso. |
| `--nav-bar-title-color` | `#161A1D` | `#011432` | Define a cor do título da barra de navegação. |
| `--nav-bar-icon-color` | `#161A1D` | `#011432` | Define a cor dos ícones da barra de navegação. |


**Instruções**

Para definir as cores da sua marca:

1. Adicione o array `theme` ao objeto `widget`.
2. Para cada item que você deseja modificar, adicione um objeto que tenha as chaves `css_key` e `value` (veja o exemplo de código abaixo). Os valores das cores podem estar nos formatos HEX, RGB ou RGBA.


Claro
```json Exemplo de Modo Claro
{
  "widget": {
    "color_scheme": "LIGHT",
    "branding": {}, // Sua 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"
      }
    ],
  }
}
```

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

Você não precisa incluir todas as possíveis `css_keys`. Você pode apenas definir as chaves (e valores) que deseja modificar.

## Modificar a barra de navegação do widget

Você pode personalizar a barra de navegação do widget modificando as cores para atender às necessidades da sua marca:

As possíveis modificações estão listadas na tabela abaixo:

| Variável CSS | Padrão (Claro) | Padrão (Escuro) | Descrição |
|  --- | --- | --- | --- |
| `--nav-bar-title-color` | `#161a1d` | `#011432` | Define a cor do título da barra de navegação. |
| `--nav-bar-title-align` | `center` | `center` | Especifica o alinhamento do título da barra de navegação. As posições possíveis são: `center`, `start` e `end`. |
| `--nav-bar-icon-color` | `#161a1d` | `#011432` | Define a cor dos ícones da barra de navegação. |
| `--nav-bar-icon-size` | `24px` | `24px` | Define o tamanho dos ícones da barra de navegação (por exemplo, `40px`). |
| `--nav-bar-background-color` | `#ffffff` | `#011432` | Define a cor de fundo da barra de navegação. |
| `--nav-bar-box-shadow` | `none` | `none` | Adiciona um efeito de sombra à barra de navegação. |
| `--nav-bar-border-color` | `#f0f2f4` | `#2B3D54` | Especifica a cor da borda da barra de navegação. |


Recursos de ícones específicos para o tema
Use `--nav-bar-left-icon-dark` e `--nav-bar-right-icon-dark` quando quiser diferentes recursos de ícones para o modo escuro. Se você só precisar de cores de ícones diferentes por tema, use `--nav-bar-icon-color-dark`.

Para modificar a barra de navegação do widget:

1. Adicione o array `theme` ao objeto `widget`.
2. Para cada item que você deseja modificar, adicione um objeto que tenha as chaves `css_key` e `value` (veja o exemplo de código abaixo). Os valores de cor podem estar nos formatos HEX, RGB ou RGBA.


Claro
```json Exemplo de Modo Claro
{
  "widget": {
    "color_scheme": "LIGHT",
    "branding": {}, // Sua 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-left-icon",
        "value": "arrow_left"
      },
      {
        "css_key": "--nav-bar-right-icon",
        "value": "help_outlined"
      },
      {
        "css_key": "--nav-bar-icon-size",
        "value": "24px"
      },
      {
        "css_key": "--nav-bar-background-color",
        "value": "#ffffff"
      },
      {
        "css_key": "--nav-bar-box-shadow",
        "value": "none"
      },
      {
        "css_key": "--nav-bar-border-color",
        "value": "#f0f2f4"
      }, // Adicione opções de tema adicionais aqui
    ]
  }
}
```

Escuro
```json Exemplo de Modo Escuro
{
  "widget": {
    "color_scheme": "DARK",
    "branding": {}, // Sua 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-left-icon-dark",
        "value": "arrow_left_dark"
      },
      {
        "css_key": "--nav-bar-right-icon-dark",
        "value": "help_outlined_dark"
      },
      {
        "css_key": "--nav-bar-icon-size",
        "value": "24px"
      },
      {
        "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"
      }, // Adicione opções de tema adicionais aqui
    ]
  }
}
```

## Modificar os botões do widget

Você pode personalizar os botões do widget modificando as cores e os raios das bordas para atender às necessidades da sua marca:

Essas modificações se aplicam a todos os botões no widget

As possíveis modificações estão listadas na tabela abaixo:

| Variável CSS | Padrão (Claro) | Padrão (Escuro) | Descrição |
|  --- | --- | --- | --- |
| `--button-font-color` | `#ffffff` | `#EEF3F8` | Define a cor da fonte para os botões. |
| `--button-font-color-disabled` | `#ffffff` | `#EEF3F8` | Define a cor da fonte para botões desabilitados. |
| `--button-border-radius` | `2px` | `2px` | Especifica o raio da borda dos botões. |
| `--button-background-color-disabled` | `#009EE3` | `#0663F9` | Define a cor de fundo para botões desabilitados. |
| `--button-opacity-disabled` | `0.2` | `0.2` | Especifica a opacidade para botões desabilitados. |
| `--button-border-color-disabled` | `#09EE354` | `#09EE354` | Define a cor da borda para botões desabilitados. |


Para fazer modificações nos botões do widget:

1. Adicione o `theme` array ao objeto `widget`.
2. Para cada item que você deseja modificar, adicione um objeto que tenha as chaves `css_key` e `value` (veja o exemplo de código abaixo). Os valores de cor podem estar no formato HEX, RGB ou RGBA.


Claro
```json Exemplo de Modo Claro
{
  "widget": {
    "color_scheme": "LIGHT",
    "branding": {}, // Sua 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"
      }, // Adicione opções de tema adicionais aqui
    ]
  }
}
```

Escuro
```json Exemplo de Modo Escuro
{
  "widget": {
    "color_scheme": "DARK",
    "branding": {}, // Sua 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"
      }, // Adicione opções de tema adicionais aqui
    ]
  }
}
```

## Modificar os banners do widget (chamadas)

Você pode personalizar os banners do widget para atender às necessidades da sua marca:

As possíveis modificações estão listadas na tabela abaixo:

| Variável CSS | Padrão (Claro) | Padrão (Escuro) | Descrição |
|  --- | --- | --- | --- |
| `--banner-border-radius` | `4px` | `4px` | Especifica o raio da borda dos banners. |
| `--banner-background-color` | `#ffffff` | `#011432` | Define a cor de fundo dos banners. |
| `--banner-background-color-error` | `#FFFFFF` | `#011432` | Define a cor de fundo para banners de erro. |
| `--banner-background-color-info` | `#FFFFFF` | `#011432` | Define a cor de fundo para banners de informação. |
| `--banner-background-color-success` | `#FFFFFF` | `#011432` | Define a cor de fundo para banners de sucesso. |
| `--banner-background-color-warning` | `#FFFFFF` | `#011432` | Define a cor de fundo para banners de aviso. |
| `--banner-border-left-width` | `4px` | `4px` | Controla a espessura da borda esquerda para variantes de banner. Defina como `0` (por exemplo, `0px`) para remover a borda esquerda e confiar apenas na cor de fundo. |
| `--banner-border-color` | `#e2e6e9` | `#2B3D54` | Especifica a cor da borda dos banners. |
| `--banner-border-color-left-error` | `#f90e06` | `#E04A39` | Cor da borda esquerda para banners de erro. |
| `--banner-border-color-left-success` | `#59c837` | `#59C837` | Cor da borda esquerda para banners de sucesso. |
| `--banner-border-color-left-info` | `#0663F9` | `#0663F9` | Cor da borda esquerda para banners de informação. |
| `--banner-border-color-left-warning` | `#f9c806` | `#F9C806` | Cor da borda esquerda para banners de aviso. |
| `--banner-icon-color-error` | `#f90e06` | `#E04A39` | Cor do ícone para banners de erro. |
| `--banner-icon-color-success` | `#59c837` | `#59C837` | Cor do ícone para banners de sucesso. |
| `--banner-icon-color-info` | `#0663F9` | `#0663F9` | Cor do ícone para banners de informação. |
| `--banner-icon-color-warning` | `#f9c806` | `#F9C806` | Cor do ícone para banners de aviso. |
| `--banner-title-color` | `#161a1d` | `#EEF3F8` | Define a cor dos títulos dos banners. |
| `--banner-body-color` | `#414d58` | `#C2CFD9` | Especifica a cor do texto do corpo dos banners. |
| `--banner-title-font-weight` | `600` | `600` | Define o peso da fonte dos títulos dos banners. |
| `--banner-body-font-weight` | `600` | `600` | Especifica o peso da fonte do texto do corpo dos banners. |
| `--banner-box-shadow` | `0 2px 4px 0 rgba(0, 0, 0, 0.05)` | `0 2px 4px 0 rgba(0, 0, 0, 0.05)` | Adiciona um efeito de sombra aos banners. |


Variantes de banner e borda esquerda
O banner suporta fundos específicos para variantes (`error`, `info`, `success` e `warning`) para temas claros e escuros. Você também pode remover a borda esquerda definindo `--banner-border-left-width` como `0`.

Para fazer modificações nos banners do widget:

1. Adicione o array `theme` ao objeto `widget`.
2. Para cada item que você deseja modificar, adicione um objeto que tenha as chaves `css_key` e `value` (veja o exemplo de código abaixo). Os valores de cor podem estar nos formatos HEX, RGB ou RGBA.


Claro
```json Exemplo de Modo Claro
{
  "widget": {
    "color_scheme": "LIGHT",
    "branding": {}, // Sua marca personalizada
    "theme": [
      {
        "css_key": "--banner-border-radius",
        "value": "4px"
      },
      {
        "css_key": "--banner-background-color",
        "value": "#ffffff"
      },
      {
        "css_key": "--banner-background-color-error",
        "value": "#FFE5E9"
      },
      {
        "css_key": "--banner-background-color-info",
        "value": "#E9F1FF"
      },
      {
        "css_key": "--banner-background-color-success",
        "value": "#DEFADE"
      },
      {
        "css_key": "--banner-background-color-warning",
        "value": "#FFEDC7"
      },
      {
        "css_key": "--banner-border-color",
        "value": "#e2e6e9"
      },
      {
        "css_key": "--banner-border-left-width",
        "value": "0px"
      },
      {
        "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)"
      }, // Adicione opções de tema adicionais aqui
    ]
  }
}
```

Escuro
```json Exemplo de Modo Escuro
{
  "widget": {
    "color_scheme": "DARK",
    "branding": {}, // Sua marca personalizada
    "theme": [
      {
        "css_key": "--banner-border-radius",
        "value": "4px"
      },
      {
        "css_key": "--banner-background-color-dark",
        "value": "#011432"
      },
      {
        "css_key": "--banner-background-color-error-dark",
        "value": "#2B171D"
      },
      {
        "css_key": "--banner-background-color-info-dark",
        "value": "#1E1F34"
      },
      {
        "css_key": "--banner-background-color-success-dark",
        "value": "#17211B"
      },
      {
        "css_key": "--banner-background-color-warning-dark",
        "value": "#281A15"
      },
      {
        "css_key": "--banner-border-color-dark",
        "value": "#2B3D54"
      },
      {
        "css_key": "--banner-border-left-width",
        "value": "0px"
      },
      {
        "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)"
      }, // Adicione opções de tema adicionais aqui
    ]
  }
}
```

## Modificar a tela de credenciais do widget

Você pode personalizar os elementos da tela de credenciais para melhor corresponder à sua marca:

| Variável CSS | Padrão (Claro) | Padrão (Escuro) | Descrição |
|  --- | --- | --- | --- |
| `--credentials-screen-institution-logo-border-radius` | `8px` | `8px` | Define o raio da borda do logotipo da instituição na tela de credenciais. |
| `--credentials-screen-header-logo-reversed` | `false` | `false` | Inverte a ordem do logotipo da instituição e do cabeçalho (título/informações extras) quando definido como `true`. |
| `--credentials-screen-help-link-align` | `center` | `center` | Define o alinhamento do link de ajuda na tela de credenciais. Valores possíveis são: `start`, `center` e `end`. |
| `--credentials-screen-help-link-font-size` | `14px` | `14px` | Define o tamanho da fonte do link de ajuda na tela de credenciais. |
| `--credentials-screen-counter-border-radius` | `8px` | `8px` | Define o raio da borda para o contador da tela de credenciais. |
| `--credentials-screen-counter-font-size` | `14px` | `14px` | Define o tamanho da fonte para o contador da tela de credenciais. |


Para modificar a tela de credenciais do widget:

1. Adicione o array `theme` ao objeto `widget`.
2. Para cada item que você deseja modificar, adicione um objeto que tenha as chaves `css_key` e `value`.


```json Exemplo de Tela de Credenciais
{
  "widget": {
    "branding": {}, // Sua personalização de marca
    "theme": [
      {
        "css_key": "--credentials-screen-institution-logo-border-radius",
        "value": "100px"
      },
      {
        "css_key": "--credentials-screen-header-logo-reversed",
        "value": "true"
      },
      {
        "css_key": "--credentials-screen-help-link-align",
        "value": "start"
      },
      {
        "css_key": "--credentials-screen-help-link-font-size",
        "value": "12px"
      },
      {
        "css_key": "--credentials-screen-counter-border-radius",
        "value": "20px"
      },
      {
        "css_key": "--credentials-screen-counter-font-size",
        "value": "12px"
      }
    ]
  }
}
```

## Modificar os campos de entrada do widget

Você pode personalizar os campos de entrada do widget para atender às necessidades da sua marca:

As possíveis modificações estão listadas na tabela abaixo:

| Variável CSS | Padrão (Claro) | Padrão (Escuro) | Descrição |
|  --- | --- | --- | --- |
| `--input-text-border-radius` | `2px` | `2px` | Define o raio da borda para os campos de entrada. |
| `--input-text-border-color` | `#161a1d` | `#2B3D54` | Especifica a cor da borda para os campos de entrada. |
| `--input-text-outline-border-color` | `#c4cdd4` | `#3A4D64` | Define a cor da borda de contorno para os campos de entrada. (como efeito de hover) |
| `--input-text-placeholder-color` | `#c4cdd4` | `#2B3D54` | Define a cor para o texto do placeholder. |
| `--input-text-label-color` | `#414d58` | `#EEF3F8` | Define a cor do rótulo para os campos de entrada. |
| `--input-text-label-color-error` | `#f90e06` | `#E04A39` | Especifica a cor do rótulo para os campos de entrada em estado de erro. |
| `--input-text-label-variation` | `outlined` | `outlined` | Especifica a posição da variação do rótulo. As opções possíveis são: `outlined` e `top`. |
| `--input-text-icon-color` | `#000000` | `#E04A39` | Define a cor dos ícones de entrada. |


Para modificar os campos de entrada do widget:

1. Adicione o `theme` array ao objeto `widget`.
2. Para cada item que você deseja modificar, adicione um objeto que tenha as chaves `css_key` e `value` (veja o exemplo de código abaixo). Os valores de cor podem estar no formato HEX, RGB ou RGBA.


Claro
```json Exemplo de Modo Claro
{
  "widget": {
    "color_scheme": "LIGHT",
    "branding": {}, // Sua 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"
      }, // Adicione opções de tema adicionais aqui
    ]
  }
}
```

Escuro
```json
{
  "widget": {
    "color_scheme": "DARK",
    "branding": {}, // Sua 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"
      }, // Adicione opções de tema adicionais aqui
    ]
  }
}
```

## Modificar Componentes de Abas do Widget

Você pode personalizar as abas do widget para atender às necessidades da sua marca:

As possíveis modificações estão listadas na tabela abaixo:

| Variável CSS | Padrão (Claro) | Padrão (Escuro) | Descrição |
|  --- | --- | --- | --- |
| `--tab-text-color` | `#0663f9` | `#0663f9` | Define a cor do texto para as abas. |
| `--tab-border-color` | `#0663f9` | `#0663f9` | Especifica a cor da borda para a parte inferior das abas. |


Para modificar as abas do widget:

1. Adicione o `array` `theme` ao objeto `widget`.
2. Para cada item que você deseja modificar, adicione um objeto que tenha as chaves `css_key` e `value` (veja o exemplo de código abaixo). Os valores de cor podem estar no formato HEX, RGB ou RGBA.


Claro
```json Exemplo de Modo Claro
{
  "widget": {
    "color_scheme": "LIGHT",
    "branding": {}, // Sua marca personalizada
    "theme": [
      {
        "css_key": "--tab-text-color",
        "value": "#0663f9"
      },
      {
        "css_key": "--tab-border-color",
        "value": "#0663f9"
      }, // Adicione opções de tema adicionais aqui
    ]
  }
}
```

Escuro
```json Exemplo de Modo Escuro
{
  "widget": {
    "color_scheme": "DARK",
    "branding": {}, // Sua marca personalizada
    "theme": [
      {
        "css_key": "--tab-text-color",
        "value": "#0663f9"
      },
      {
        "css_key": "--tab-border-color",
        "value": "#0663f9"
      }, // Adicione opções de tema adicionais aqui
    ]
  }
}
```