# Personalização e Branding do Hosted Widget (OFDA)

Com o Connect Widget da Belvo, você pode opcionalmente adicionar as seguintes personalizações e elementos de branding:

- Logo da sua empresa
- Ícone da sua empresa
- Nome da sua empresa
- Link para a sua política de privacidade
- Mostrar o logo do meio da Belvo na tela inicial
- Mensagens personalizadas para fins de consentimento
- Duração padrão do consentimento
- Adicionar uma cor de sobreposição personalizada
- Ocultar mensagens na tela de seleção de instituição
- Habilitar modo escuro
- Adicionar cores personalizadas ao widget


Adicione branding ao gerar o access_token
Para adicionar branding ao seu widget, isso deve ser feito na mesma chamada de backend que a sua solicitação para gerar um `access_token`. Para um exemplo completo de como isso se parece, veja o exemplo de código abaixo.

## 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 na seguinte tela:

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

Exemplo de ícone da empresa
**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 for iniciado pela primeira vez. Por padrão, ele exibirá 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",
      ...
        }
     }
}
```

## Exibir logo do Belvo no meio

Você pode optar por exibir o logo do Belvo entre o logo da sua empresa e o logo da instituição na tela inicial de conexão. Isso ajuda a reforçar que o Belvo está facilitando a conexão segura. Por padrão, essa opção está configurada como `false`, e apenas o logo da sua empresa e o logo da instituição são exibidos.

Quando ativado, o layout dos logos muda para: **[Logo da Sua Empresa]** → **[Logo do Belvo]** → **[Logo da Instituição]**

**Instruções**

Para exibir o logo do Belvo no meio da tela inicial de conexão, defina o parâmetro `show_belvo_middle_logo` como `true`.

```json Exibir Logo do Belvo no Meio
{
  "widget": {
    "branding": {
      ...
      "show_belvo_middle_logo": true,
      ...
    }
  }
}
```

## Mensagens personalizadas para propósito de consentimento

Você pode modificar o texto que descreve o propósito de solicitação dos dados do seu usuário (*Propósito do compartilhamento*) para melhor descrever seu caso de uso.

Por padrão, o texto exibido é: *Soluções financeiras personalizadas oferecidas por meio de recomendações sob medida, visando melhores ofertas de produtos financeiros e de crédito.*

**Instruções**

Para personalizar o texto que descreve o propósito de solicitar acesso aos dados do seu usuário, basta adicionar seu texto (máximo de 600 caracteres) à chave `purpose`.

```json Consent Purpose
{
  "widget": {
    "consent": {
       "purpose": "Seu texto personalizado aqui. Máximo de 600 caracteres",
       ...
    }
  }   
}
```

## Definir duração padrão do consentimento

Você pode especificar a duração padrão do consentimento (em dias) que será pré-selecionada no menu suspenso da tela de consentimento. Isso ajuda a otimizar a experiência do usuário ao apresentar o período de consentimento preferido como a opção padrão.

O backend suporta os seguintes valores de duração de consentimento:

| Rótulo | Valor (dias) |
|  --- | --- |
| Indeterminado | `null` |
| 12 meses | `366` |
| 9 meses | `275` |
| 6 meses | `183` |
| 3 meses | `92` |


**Como funciona:**

- Se você fornecer um dos valores válidos (`366`, `275`, `183` ou `92`), essa opção será pré-selecionada no menu suspenso de duração do consentimento.
- Se você não fornecer um valor ou fornecer um valor diferente, "Indeterminado" será a opção pré-selecionada.
- A ordem da lista suspensa permanece inalterada; apenas a opção pré-selecionada muda.
- O widget aceita qualquer número inteiro positivo, mas apenas os valores listados acima correspondem às opções disponíveis de duração do consentimento.


**Instruções**

Para definir a duração padrão do consentimento, adicione o número de dias à chave `default_consent_duration_days` dentro do objeto `consent`.

```json Default Consent Duration
{
  "widget": {
    "consent": {
       "default_consent_duration_days": 183
    }
  }
}
```

Opcional e Independente
O parâmetro `default_consent_duration_days` é opcional e independente do parâmetro `purpose`. Você pode usá-los juntos ou separadamente, conforme suas necessidades.

Valores Suportados
Para que a duração do consentimento seja corretamente pré-selecionada, use um destes valores: `366` (12 meses), `275` (9 meses), `183` (6 meses) ou `92` (3 meses). Qualquer outro valor resultará na pré-seleção de "Indeterminado".

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

## Ocultar mensagem na tela de seleção de instituição

Você pode optar por ocultar a mensagem "*Mais de 5 milhões de usuários já conectaram com segurança suas contas.*" que aparece quando o usuário seleciona sua instituição no widget. Por padrão, essa mensagem é visível no widget (`true`).

**Instruções**

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

```json Social Proof
{
  "widget": {
    "branding": {
      ...
      "social_proof": false,
      ...
        }
     }
}
```

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

OFDA Dark Mode
## Adicionar cores personalizadas ao widget

Você pode personalizar ainda mais 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 definir apenas 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 do 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` | `8px` | `8px` | 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. |


Para fazer modificações nos botões 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": "--button-font-color",
        "value": "#ffffff"
      },
      {
        "css_key": "--button-font-color-disabled",
        "value": "#ffffff"
      },
      {
        "css_key": "--button-border-radius",
        "value": "8px"
      },
      {
        "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": "8px"
      },
      {
        "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` | `8px` | `8px` | 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 `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 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": "8px"
      },
      {
        "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": "8px"
      },
      {
        "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 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` | `8px` | `8px` | 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 do 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 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": "--input-text-border-radius",
        "value": "8px"
      },
      {
        "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": "8px"
      },
      {
        "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 das abas. |
| `--tab-border-color` | `#0663f9` | `#0663f9` | Especifica a cor da borda na 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 nos formatos HEX, RGB ou RGBA.


Claro
```json Exemplo de Modo Claro
{
  "widget": {
    "color_scheme": "LIGHT",
    "branding": {}, // Sua personalização de marca
    "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 personalização de marca
    "theme": [
      {
        "css_key": "--tab-text-color",
        "value": "#0663f9"
      },
      {
        "css_key": "--tab-border-color",
        "value": "#0663f9"
      }, // Adicione opções de tema adicionais aqui
    ]
  }
}
```