# Hosted Widget Startup Configuration

With Belvo's Widget, you can configure what links to create and the information you want to show in the widget. This includes:

- type of links to create (`access_mode`)
- additional identifier for the link (`external_id`)
- which countries to display (`country_codes`)
- institutions to display (`institutions`)
- institution types to display (`institution_types`)
- language of the widget (`locale`)
- disabling the exit dialog (`show_close_dialog`)
- disabling the exit survey (`show_abandon_survey`)


## Define the type of link created

You can define the type of link you want the widget to create. By default, we create recurrent links. You can choose to create either `recurrent` or `single` links.

**Instructions**

To set which link type to create, just add either `single` or `recurrent` to the `access_mode` key.

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

Read more about our different types of links here: difference between single and recurrent link.

## Add an additional identifier for the link

You can add an additional identifier to be associated with the link in the Belvo database. For more information, see our Link creation article.

The `external_id` that you provide:

- should be a unique ID for each user in your database.
- must be at least three characters long.
- can only be composed of letters, numbers, dashes (`-`), and underscores (`_`).
- cannot contain any personally identifiable information about the user (email, name, phone number, credit card number, and so on).


Personally identifiable information with `external_id`
If you use any personally identifiable information in your `external_id`, Belvo will set the `external_id` to `null`. As such, you will not be able to filter your links by that `external_id`.

**Instructions**

To set which link type to create, just add a unique ID to the `external_id` key.

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

## Define which countries to display

You can define which countries users can select institutions from. By default, the widget displays all supported countries. Supported countries are:

- `BR` for 🇧🇷 Brazil
- `MX` for 🇲🇽 Mexico


**Instructions**
To set which country to display, just add either  `BR` or `MX` (uppercase letters **only**) to the `country_codes` key.

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'],
  ...
}
```

The order in which you add the countries in the array is reflected in the widget. For example `['MX', 'BR']` displays Mexico then Brazil, while `['BR', 'MX']` displays Brazil and then Mexico

## Select one or more institutions to display

You can choose to start up the widget already at the log in page for a specific institution or to display only select institutions. By default, the widget displays all the supported institutions.

**Instructions**
To set one or more institutions to display in the widget,  just add it to the `institutions` key.

Hosted Widget

```curl Hosted Widget
## To display just one institution:
https://widget.belvo.io/
    ?access_token={access_code}
    &institutions=erebor_mx_retail

## To display more than on institution:
https://widget.belvo.io/
    ?access_token={access_code}
    &institutions=erebor_mx_retail,gringotts_mx_retail
```

Web SDK

```js Web SDK
...

belvoSDK.createWidget(access_token, {
  ...
  // To display just one institution:
	institutions: ['erebor_mx_retail'],
  // To display more than on institution:
  institutions: ['erebor_mx_retail','gringotts_mx_retail'],
  ...
...
```

Angular, React, Vue

```js Angular, React, Vue
const config = {
  ...
  // To display just one institution:
institutions: ['erebor_mx_retail'],
  // To display more than on institution:
  institutions: ['erebor_mx_retail','gringotts_mx_retail'],
  ...
}
```

If the combination of `institutions`, `institution_types`, and `locale` only results in one institution being available for the user, then the widget directly displays the log in page for that institution

## Define what institution types to display

You can choose what institution types to show in the widget. By default, the widget displays all the supported institution types.

Choose one or more of the following institution types:

- `business` for business banks (such as Bradesco Business)
- `retail` for retail banks (such as Santander Retail)
- `fiscal` for fiscal institutions (such as SAT)
- `employment` for employment institutions (such as IMSS).


If you would like to display `employment` institutions, just contact our support teamand we'll get right on that for you

**Instructions**
To set which institutions to display in the widget, just add one or more to the `institution_types` key.

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'],
  ...
}
```

## Define which institutions to display based on Belvo resources

You can choose which institutions to display in the widget based on which Belvo API resources the institution supports.

For example, if you want to only display institutions that support the Investment portfolios resource, you need to use this parameter. By default, the widget displays all institutions (except for `employment` institutions such as IMSS).

The widget evaluates the resources you provide as an `AND` expression. For example, if you add `ACCOUNTS` and `OWNERS` to the `resources` parameter, then the widget will only display institutions that support both `ACCOUNTS` **and** `OWNERS`

**Instructions**
To set which institutions to display in the widget based on the supported resources, just add one or more resources to the `resources` key.

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

## Define the language for the widget

You can choose what language the widget should display. By default, the widget is shown in Spanish (ES).

Choose one of the following languages for the widget:

- `en` for 🇬🇧 English
- `es` for 🇪🇸 Spanish
- `pt` for 🇧🇷 Brazilian Portuguese


**Instructions**
To set the language of the widget, just add either `es`, `en`, or `pt` (lowercase letters **only**) to the `locale` key.

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',
  ...
}
```

## Disable the exit dialog

By default, when the user tries to exit the widget, Belvo displays a "are you sure you want to exit the process" message. You can, however, disable this message.

**Instructions**
To disable the exit message, just add `false` to the `show_close_dialog` key:

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

## Disable the exit survey

By default, when the user exits the widget, Belvo displays a survey asking why the user decided not to continue with connecting their account.  You can, however, disable this survey.

**Instructions**
To disable the exit survey, just add `false` to the `show_abandon_survey` key:

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