# Configuración de Inicio del Hosted Widget

Con el Widget de Belvo, puedes configurar qué enlaces crear y la información que deseas mostrar en el widget. Esto incluye:

- tipo de enlaces a crear (`access_mode`)
- identificador adicional para el enlace (`external_id`)
- qué países mostrar (`country_codes`)
- instituciones a mostrar (`institutions`)
- tipos de instituciones a mostrar (`institution_types`)
- idioma del widget (`locale`)
- deshabilitar el diálogo de salida (`show_close_dialog`)
- deshabilitar la encuesta de salida (`show_abandon_survey`)


## Define el tipo de enlace creado

Puedes definir el tipo de enlace que deseas que el widget cree. Por defecto, creamos enlaces recurrentes. Puedes elegir crear enlaces `recurrent` o `single`.

**Instrucciones**

Para establecer qué tipo de enlace crear, simplemente agrega `single` o `recurrent` a la clave `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",
  ...
}
```

Lee más sobre nuestros diferentes tipos de enlaces aquí: diferencia entre enlace single y recurrent.

## Agregar un identificador adicional para el enlace

Puedes agregar un identificador adicional para asociarlo con el enlace en la base de datos de Belvo. Para más información, consulta nuestro artículo sobre la creación de enlaces.

El `external_id` que proporciones:

- debe ser un ID único para cada usuario en tu base de datos.
- debe tener al menos tres caracteres de longitud.
- solo puede estar compuesto por letras, números, guiones (`-`) y guiones bajos (`_`).
- no puede contener ninguna información personal identificable sobre el usuario (correo electrónico, nombre, número de teléfono, número de tarjeta de crédito, etc.).


Información personal identificable con `external_id`
Si utilizas cualquier información personal identificable en tu `external_id`, Belvo establecerá el `external_id` en `null`. Por lo tanto, no podrás filtrar tus enlaces por ese `external_id`.

**Instrucciones**

Para establecer qué tipo de enlace crear, simplemente agrega un ID único a la clave `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",
  ...
}
```

## Definir qué países mostrar

Puedes definir de qué países los usuarios pueden seleccionar instituciones. Por defecto, el widget muestra todos los países compatibles. Los países compatibles son:

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


**Instrucciones**
Para establecer qué país mostrar, simplemente agrega `BR` o `MX` (solo letras mayúsculas) a la clave `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'],
  ...
}
```

El orden en el que agregas los países en el array se refleja en el widget. Por ejemplo, `['MX', 'BR']` muestra México y luego Brasil, mientras que `['BR', 'MX']` muestra Brasil y luego México.

## Selecciona una o más instituciones para mostrar

Puedes elegir iniciar el widget ya en la página de inicio de sesión para una institución específica o mostrar solo instituciones seleccionadas. Por defecto, el widget muestra todas las instituciones compatibles.

**Instrucciones**
Para establecer una o más instituciones para mostrar en el widget, solo agrégala a la clave `institutions`.

Hosted Widget

```curl Hosted Widget
## Para mostrar solo una institución:
https://widget.belvo.io/
    ?access_token={access_code}
    &institutions=erebor_mx_retail

## Para mostrar más de una institución:
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 mostrar solo una institución:
	institutions: ['erebor_mx_retail'],
  // Para mostrar más de una institución:
  institutions: ['erebor_mx_retail','gringotts_mx_retail'],
  ...
...
```

Angular, React, Vue

```js Angular, React, Vue
const config = {
  ...
  // Para mostrar solo una institución:
institutions: ['erebor_mx_retail'],
  // Para mostrar más de una institución:
  institutions: ['erebor_mx_retail','gringotts_mx_retail'],
  ...
}
```

Si la combinación de `institutions`, `institution_types` y `locale` solo resulta en una institución disponible para el usuario, entonces el widget muestra directamente la página de inicio de sesión para esa institución

## Define qué tipos de instituciones mostrar

Puedes elegir qué tipos de instituciones mostrar en el widget. Por defecto, el widget muestra todos los tipos de instituciones compatibles.

Elige uno o más de los siguientes tipos de instituciones:

- `business` para bancos comerciales (como Bradesco Business)
- `retail` para bancos minoristas (como Santander Retail)
- `fiscal` para instituciones fiscales (como SAT)
- `employment` para instituciones de empleo (como IMSS).


Si deseas mostrar instituciones de `employment`, simplemente contacta a nuestro equipo de soporte y nos encargaremos de eso para ti.

**Instrucciones**
Para establecer qué instituciones mostrar en el widget, simplemente añade una o más al key `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'],
  ...
}
```

## Define qué instituciones mostrar basadas en los recursos de Belvo

Puedes elegir qué instituciones mostrar en el widget basándote en qué recursos de la API de Belvo soporta la institución.

Por ejemplo, si deseas mostrar solo instituciones que soporten el recurso de portafolios de inversión, necesitas usar este parámetro. Por defecto, el widget muestra todas las instituciones (excepto las instituciones de `employment` como el IMSS).

El widget evalúa los recursos que proporcionas como una expresión `AND`. Por ejemplo, si agregas `ACCOUNTS` y `OWNERS` al parámetro `resources`, entonces el widget solo mostrará instituciones que soporten tanto `ACCOUNTS` **y** `OWNERS`

**Instrucciones**
Para establecer qué instituciones mostrar en el widget basadas en los recursos soportados, simplemente agrega uno o más recursos a la clave `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"],
  ...
}
```

## Define el idioma para el widget

Puedes elegir en qué idioma se debe mostrar el widget. Por defecto, el widget se muestra en español (ES).

Elige uno de los siguientes idiomas para el widget:

- `en` para 🇬🇧 Inglés
- `es` para 🇪🇸 Español
- `pt` para 🇧🇷 Portugués Brasileño


**Instrucciones**
Para establecer el idioma del widget, simplemente agrega `es`, `en` o `pt` (solo letras minúsculas) a la clave `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',
  ...
}
```

## Desactivar el diálogo de salida

Por defecto, cuando el usuario intenta salir del widget, Belvo muestra un mensaje de "¿estás seguro de que deseas salir del proceso?". Sin embargo, puedes desactivar este mensaje.

**Instrucciones**
Para desactivar el mensaje de salida, simplemente añade `false` a la clave `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,
  ...
}
```

## Desactivar la encuesta de salida

Por defecto, cuando el usuario sale del widget, Belvo muestra una encuesta preguntando por qué el usuario decidió no continuar con la conexión de su cuenta. Sin embargo, puedes desactivar esta encuesta.

**Instrucciones**
Para desactivar la encuesta de salida, simplemente añade `false` a la clave `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,
  ...
}
```