Este artigo se refere ao hosted widget multi-região
O conteúdo deste artigo refere-se ao hosted widget multi-região (aplicável para o México). Se você deseja operar no Brasil, por favor veja nosso Connect Widget para OFDA Regulamentado.

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

- 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
- Adicionar cores personalizadas ao widget


br
br

# Exemplo de personalização e branding completo

> 🚧 Adicionar branding ao gerar o 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`. Para um exemplo completo de como isso se parece, veja os exemplos de código abaixo.



```curl
curl -X POST \
  https://sandbox.belvo.com/api/token/ \
  -H 'Content-Type: application/json' \
  -H 'Host: sandbox.belvo.com' \
  -d '{
    "id": "SECRET_ID",
    "password": "SECRET_PASSWORD",
    "scopes": "read_institutions,write_links",
    "credentials_storage": "27d",
  	"fetch_resources":  ["ACCOUNTS","TRANSACTIONS","OWNERS"],
    "widget": {
        "branding": {
        	"company_icon": "https://mysite.com/icon.svg",
            "company_logo": "https://mysite.com/logo.svg",
            "company_name": "ACME",
            "social_proof": true,
            "company_terms_url": "https://belvo.com/terms-service/",
            "company_benefit_header": "Aprovações mais rápidas",
            "company_benefit_content": "Usar o Belvo reduz o tempo de aprovação do seu empréstimo em até 15 dias.",
            "opportunity_loss": "Pode levar até 20 dias para avaliar sua solicitação usando métodos tradicionais.",
            "overlay_background_color": "#F0F2F4"
        }
     }
  }'
```

Para informações mais detalhadas sobre cada personalização, veja a seção relevante abaixo.

# Adicionar um ícone da empresa

Você pode adicionar o ícone da sua empresa ao widget para torná-lo mais alinhado com 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 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`.


```curl
{
  "widget": {
    "branding": {
      ...
      "company_icon": "https://mysite.com/icon.svg",
      ...
        }
     }
}
```

# Adicionar um logotipo da empresa

Você pode adicionar o logotipo da sua empresa ao widget para torná-lo mais alinhado com 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 escalonamento, 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 para sua imagem SVG à chave `company_logo`.


```json
{
  "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, 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
{
  "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, quando 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 para sua política na chave `company_terms_url`.


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

# 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 a 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
{
  "widget": {
    "branding": {
      ...
      "company_benefit_header": "Aprovações mais rápidas",
      "company_benefit_content": "Usar a 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 à chave `opportunity_loss`.

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


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

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

![](/assets/web-widget-social_proof.7ff3e8bfe5f1f4df36588aea2b7f91f01f17e2db19058432d816732f38697cc2.f1a41317.png)

** Instruções**

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


```json
{
  "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 seu aplicativo 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
Não importa qual cor você carregue, a Belvo definirá automaticamente a opacidade para 90%. Isso se deve às seguintes melhores práticas 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 por seis caracteres) à chave `overlay_background_color`.


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

# Adicionar cores personalizadas ao widget

Você pode personalizar ainda mais o widget adicionando as cores da sua própria 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


**Instruções**

Para definir as cores da sua marca:

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.



```json
{
  "widget": {
    "branding": {}, // Sua marca personalizada
    "theme": [
      {
        "css_key": "--color-primary-base",
        "value": "#907AD6"
      },
      {
        "css_key": "--nav-bar-title-color",
        "value": "#4F518C"
      },
      {
        "css_key": "--nav-bar-icon-color",
        "value": "#4F518C"
      }
    ],
  }
}
```

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


br

# 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 | Descrição |
|  --- | --- | --- |
| `--nav-bar-title-color` | `#161a1d` | Define a cor do título da barra de navegação. |
| `--nav-bar-title-align` | `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` | Define a cor dos ícones da barra de navegação. |
| `--nav-bar-background-color` | `#ffffff` | Define a cor de fundo da barra de navegação. |
| `--nav-bar-box-shadow` | `none` | Adiciona um efeito de sombra à barra de navegação. |
| `--nav-bar-border-color` | `#f0f2f4` | Especifica a cor da borda da barra de navegação. |


Para modificar a barra de navegação 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` (consulte o exemplo de código abaixo). Os valores de cor podem estar no formato HEX, RGB ou RGBA.



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

# 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 | Descrição |
|  --- | --- | --- |
| `--button-font-color` | `#ffffff` | Define a cor da fonte para os botões. |
| `--button-font-color-disabled` | `#ffffff` | Define a cor da fonte para botões desativados. |
| `--button-border-radius` | `2px` | Especifica o raio da borda dos botões. |
| `--button-background-color-disabled` | `#009EE3` | Define a cor de fundo para botões desativados. |
| `--button-opacity-disabled` | `0.2` | Especifica a opacidade para botões desativados. |
| `--button-border-color-disabled` | `#09EE354` | Define a cor da borda para botões desativados. |


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` (consulte o exemplo de código abaixo). Os valores de cor podem estar nos formatos HEX, RGB ou RGBA.



```json
{
  "widget": {
    "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"
      },
    ]
  }
}
```

# Modificar os banners do widget (callouts)

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:

br
| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--banner-border-radius` | `4px` | Especifica o raio da borda dos banners. |
| `--banner-background-color` | `#ffffff` | Define a cor de fundo dos banners. |
| `--banner-border-color` | `#e2e6e9` | Especifica a cor da borda dos banners. |
| `--banner-border-color-left-error` | `#f90e06` | Cor da borda esquerda para banners de erro. |
| `--banner-border-color-left-success` | `#59c837` | Cor da borda esquerda para banners de sucesso. |
| `--banner-border-color-left-info` | `#0663F9` | Cor da borda esquerda para banners de informação. |
| `--banner-border-color-left-warning` | `#f9c806` | Cor da borda esquerda para banners de aviso. |
| `--banner-icon-color-error` | `#f90e06` | Cor do ícone para banners de erro. |
| `--banner-icon-color-success` | `#59c837` | Cor do ícone para banners de sucesso. |
| `--banner-icon-color-info` | `#0663F9` | Cor do ícone para banners de informação. |
| `--banner-icon-color-warning` | `#f9c806` | Cor do ícone para banners de aviso. |
| `--banner-title-color` | `#161a1d` | Define a cor dos títulos dos banners. |
| `--banner-body-color` | `#414d58` | Especifica a cor do texto do corpo dos banners. |
| `--banner-title-font-weight` | `600` | Define o peso da fonte dos títulos dos banners. |
| `--banner-body-font-weight` | `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)` | Adiciona um efeito de sombra aos banners. |


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 no formato HEX, RGB ou RGBA.



```json
{
  "widget": {
    "branding": {}, // Sua personalização de marca
    "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)"
      },
    ]
  }
}
```

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

br
| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--input-text-border-radius` | `2px` | Define o raio da borda para os campos de entrada. |
| `--input-text-border-color` | `#161a1d` | Especifica a cor da borda para os campos de entrada. |
| `--input-text-outline-border-color` | `#c4cdd4` | Define a cor da borda de contorno para os campos de entrada. (como efeito de hover) |
| `--input-text-placeholder-color` | `#c4cdd4` | Define a cor para o texto do placeholder. |
| `--input-text-label-color` | `#414d58` | Define a cor do rótulo para os campos de entrada. |
| `--input-text-label-color-error` | `#f90e06` | Especifica a cor do rótulo para os campos de entrada em estado de erro. |
| `--input-text-label-variation` | `outlined` | Especifica a posição de variação do rótulo. As opções possíveis são: `outlined` e `top`. |
| `--input-text-icon-color` | `#000000` | 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` (consulte o exemplo de código abaixo). Os valores de cor podem estar no formato HEX, RGB ou RGBA.



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