🚧

This articles refers to the multi-region widget

The content of this article refers to the multi-region widget (applicable for Colombia and Mexico). If you wish to operate in Brazil, please see our Connect Widget for Regulated OFDA.

With Belvo's Connect 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.

...

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

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

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.

...

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

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

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
• CO for 🇨🇴 Colombia
• MX for 🇲🇽 Mexico

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

...

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

https://widget.belvo.io/
    ?access_token={access_code}
    &country_codes=MX,CO

const config = {
  ...
  country_codes: ['MX', 'CO'],
  ...
}

📘

The order in which you add the countries in the array is reflected in the widget. For example ['MX', 'CO'] displays Mexico then Colombia, while ['CO', 'MX'] displays Colombia 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, except for employment institutions (imss_mx_employment).

📘

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

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

...

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

# 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

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 a
• s Bradesco Business)
• retail for retail banks (such as Santander Retail)
• fiscal for fiscal institutions (such as SAT or DIAN)
• 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.

...

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

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

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.

belvoSDK.createWidget(access_token, {
  ...
	resources: ["ACCOUNTS", "OWNERS", "TRANSACTIONS"],
  ...
...

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

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.

...

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

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

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:

...

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

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

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:

...

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

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

const config = {
  ...
  show_abandon_survey: false,
  ...
}