# Configuração de Inicialização do Hosted Widget

Com o Widget da Belvo, você pode configurar quais links criar e as informações que deseja mostrar no widget. Isso inclui:

- tipo de links a serem criados (`access_mode`)
- identificador adicional para o link (`external_id`)
- quais países exibir (`country_codes`)
- instituições a serem exibidas (`institutions`)
- tipos de instituições a serem exibidos (`institution_types`)
- idioma do widget (`locale`)
- desativar o diálogo de saída (`show_close_dialog`)
- desativar a pesquisa de saída (`show_abandon_survey`)


## Defina o tipo de link criado

Você pode definir o tipo de link que deseja que o widget crie. Por padrão, criamos links recorrentes. Você pode escolher criar links `recurrent` ou `single`.

**Instruções**

Para definir qual tipo de link criar, basta adicionar `single` ou `recurrent` à chave `access_mode`.

Hosted Widget

```curl Hosted Widget
https://widget.belvo.io/
    ?access_token={access_code}
    &access_mode=single
```

Web SDK

```js Web SDK
...

belvoSDK.createWidget(access_token, {
  ...
	access_mode: "single",
  ...
...
```

Angular, React, Vue

```javascript Angular, React, Vue
const config = {
  ...
  access_mode: "single",
  ...
}
```

Leia mais sobre nossos diferentes tipos de links aqui: diferença entre link single e recurrent.

## Adicionar um identificador adicional para o link

Você pode adicionar um identificador adicional para ser associado ao link no banco de dados da Belvo. Para mais informações, veja nosso artigo sobre criação de Link.

O `external_id` que você fornecer:

- deve ser um ID único para cada usuário no seu banco de dados.
- deve ter pelo menos três caracteres.
- pode ser composto apenas por letras, números, hífens (`-`) e underscores (`_`).
- não pode conter nenhuma informação pessoalmente identificável sobre o usuário (email, nome, número de telefone, número de cartão de crédito, etc.).


Informações pessoalmente identificáveis com `external_id`
Se você usar qualquer informação pessoalmente identificável no seu `external_id`, a Belvo definirá o `external_id` como `null`. Assim, você não poderá filtrar seus links por esse `external_id`.

**Instruções**

Para definir qual tipo de link criar, basta adicionar um ID único à chave `external_id`.

Hosted Widget

```curl Hosted Widget
https://widget.belvo.io/
	?access_token={access_code}
    &external_id=HJLSI-897809
```

Web SDK

```js Web SDK
...

belvoSDK.createWidget(access_token, {
  ...
	external_id: "HJLSI-897809",
  ...
...
```

Angular, React, Vue

```js Angular, React, Vue
const config = {
  ...
  external_id: "HJLSI-897809",
  ...
}
```

## Defina quais países exibir

Você pode definir de quais países os usuários podem selecionar instituições. Por padrão, o hosted widget exibe todos os países suportados. Os países suportados são:

- `BR` para 🇧🇷 Brasil
- `MX` para 🇲🇽 México


**Instruções**
Para definir qual país exibir, basta adicionar `BR` ou `MX` (apenas letras maiúsculas) à chave `country_codes`.

Hosted Widget

```curl Hosted Widget
https://widget.belvo.io/
    ?access_token={access_code}
    &country_codes=MX
```

Web SDK

```js Web SDK
...

belvoSDK.createWidget(access_token, {
  ...
	country_codes: ['MX'],
  ...
...
```

Angular, React, Vue

```js Angular, React, Vue
const config = {
  ...
  country_codes: ['MX'],
  ...
}
```

A ordem em que você adiciona os países no array é refletida no widget. Por exemplo, `['MX', 'BR']` exibe México e depois Brasil, enquanto `['BR', 'MX']` exibe Brasil e depois México.

## Selecione uma ou mais instituições para exibir

Você pode optar por iniciar o widget já na página de login de uma instituição específica ou exibir apenas instituições selecionadas. Por padrão, o widget exibe todas as instituições suportadas.

**Instruções**
Para definir uma ou mais instituições para exibir no widget, basta adicioná-las à chave `institutions`.

Hosted Widget

```curl Hosted Widget
## Para exibir apenas uma instituição:
https://widget.belvo.io/
    ?access_token={access_code}
    &institutions=erebor_mx_retail

## Para exibir mais de uma instituição:
https://widget.belvo.io/
    ?access_token={access_code}
    &institutions=erebor_mx_retail,gringotts_mx_retail
```

Web SDK

```js Web SDK
...

belvoSDK.createWidget(access_token, {
  ...
  // Para exibir apenas uma instituição:
	institutions: ['erebor_mx_retail'],
  // Para exibir mais de uma instituição:
  institutions: ['erebor_mx_retail','gringotts_mx_retail'],
  ...
...
```

Angular, React, Vue

```js Angular, React, Vue
const config = {
  ...
  // Para exibir apenas uma instituição:
institutions: ['erebor_mx_retail'],
  // Para exibir mais de uma instituição:
  institutions: ['erebor_mx_retail','gringotts_mx_retail'],
  ...
}
```

Se a combinação de `institutions`, `institution_types` e `locale` resultar em apenas uma instituição disponível para o usuário, então o widget exibe diretamente a página de login para essa instituição.

## Defina quais tipos de instituições exibir

Você pode escolher quais tipos de instituições mostrar no widget. Por padrão, o widget exibe todos os tipos de instituições suportados.

Escolha um ou mais dos seguintes tipos de instituições:

- `business` para bancos empresariais (como Bradesco Business)
- `retail` para bancos de varejo (como Santander Retail)
- `fiscal` para instituições fiscais (como SAT)
- `employment` para instituições de emprego (como IMSS).


Se você gostaria de exibir instituições de `employment`, apenas contate nossa equipe de suporte e nós cuidaremos disso para você

**Instruções**
Para definir quais instituições exibir no widget, basta adicionar uma ou mais ao chave `institution_types`.

Hosted Widget

```curl Hosted Widget
https://widget.belvo.io/
    ?access_token={access_code}
    &institution_types=retail,business
```

Web SDK

```js Web SDK
...

belvoSDK.createWidget(access_token, {
  ...
	institution_types: ['retail', 'business'],
  ...
...
```

Angular, React, Vue

```js Angular, React, Vue
const config = {
  ...
  institution_types: ['retail', 'business'],
  ...
}
```

## Defina quais instituições exibir com base nos recursos do Belvo

Você pode escolher quais instituições exibir no widget com base em quais recursos da API do Belvo a instituição suporta.

Por exemplo, se você deseja exibir apenas instituições que suportam o recurso de portfólios de Investimento, você precisa usar este parâmetro. Por padrão, o widget exibe todas as instituições (exceto instituições de `employment` como o IMSS).

O widget avalia os recursos que você fornece como uma expressão `AND`. Por exemplo, se você adicionar `ACCOUNTS` e `OWNERS` ao parâmetro `resources`, então o widget exibirá apenas instituições que suportam tanto `ACCOUNTS` **e** `OWNERS`

**Instruções**
Para definir quais instituições exibir no widget com base nos recursos suportados, basta adicionar um ou mais recursos à chave `resources`.

Hosted Widget

```curl Hosted Widget
https://widget.belvo.io/
    ?access_token={access_code}
    &resources=ACCOUNTS,OWNERS,TRANSACTIONS
```

Web SDK

```js Web SDK
belvoSDK.createWidget(access_token, {
  ...
	resources: ["ACCOUNTS", "OWNERS", "TRANSACTIONS"],
  ...
...
```

Angular, React, Vue

```js Angular, React, Vue
const config = {
  ...
  resources: ["ACCOUNTS", "OWNERS", "TRANSACTIONS"],
  ...
}
```

## Defina o idioma para o widget

Você pode escolher qual idioma o widget deve exibir. Por padrão, o widget é mostrado em Espanhol (ES).

Escolha um dos seguintes idiomas para o widget:

- `en` para 🇬🇧 Inglês
- `es` para 🇪🇸 Espanhol
- `pt` para 🇧🇷 Português Brasileiro


**Instruções**
Para definir o idioma do widget, basta adicionar `es`, `en` ou `pt` (somente letras minúsculas) à chave `locale`.

Hosted Widget

```curl Hosted Widget
https://widget.belvo.io/
    ?access_token={access_code}
    &locale=pt
```

Web SDK

```js Web SDK
...

belvoSDK.createWidget(access_token, {
  ...
	locale: 'pt',
  ...
...
```

Angular, React, Vue

```js Angular, React, Vue
const config = {
  ...
  locale: 'pt',
  ...
}
```

## Desativar o diálogo de saída

Por padrão, quando o usuário tenta sair do widget, o Belvo exibe uma mensagem "tem certeza de que deseja sair do processo". No entanto, você pode desativar essa mensagem.

**Instruções**
Para desativar a mensagem de saída, basta adicionar `false` à chave `show_close_dialog`:

Hosted Widget

```curl Hosted Widget
https://widget.belvo.io/
    ?access_token={access_code}
    &show_close_dialog=false
```

Web SDK

```js Web SDK
...

belvoSDK.createWidget(access_token, {
  ...
	show_close_dialog: false,
  ...
...
```

Angular, React, Vue

```js Angular, React, Vue
const config = {
  ...
  show_close_dialog: false,
  ...
}
```

## Desativar a pesquisa de saída

Por padrão, quando o usuário sai do widget, o Belvo exibe uma pesquisa perguntando por que o usuário decidiu não continuar conectando sua conta. No entanto, você pode desativar essa pesquisa.

**Instruções**
Para desativar a pesquisa de saída, basta adicionar `false` à chave `show_abandon_survey`:

Hosted Widget

```curl Hosted Widget
https://widget.belvo.io/
    ?access_token={access_code}
    &show_abandon_survey=false
```

Web SDK

```js Web SDK
...

belvoSDK.createWidget(access_token, {
  ...
	show_abandon_survey: false,
  ...
...
```

Angular, React, Vue

```js Angular, React, Vue
const config = {
  ...
  show_abandon_survey: false,
  ...
}
```