Overview

Remove some headaches and speed up your integration by using our Connect Widget to quickly and painlessly connect your users' accounts.

Belvo offers a plug-and-play Connect Widget solution, both for web and mobile applications, that provides a secure and optimized authentication process for each institution. The Connect Widget is the smoothest way for users to connect their bank account within your application. It is compatible with our aggregation products: Banking, Employment, and Fiscal.

If you'd like to test out how it works, check out our Widget Demo.

Here is a preview of the Connect widget on a demo website:

Flow - Multi Region

The end-to-end integration involves your frontend and backend. Below is an overview of how you can create links with the Connect widget.

As you can see, your client-side and server-side will both be involved in the Connect Widget flow.
Here is an end-to-end example to illustrate each side's responsibility:

  1. Your user clicks a Add a bank account button within your application.
  2. Your frontend calls your backend to request an access_token from Belvo.
  3. Your backend calls Belvo to get an access_token.
  4. Belvo returns a valid access_token to your backend.
  5. Your server returns the access_token to your frontend.
  6. Your frontend starts the widget using the access_token.
  7. The user navigates through the Connect widget and creates a valid link to their institution.
  8. Belvo returns the newly created linkid via callback to your frontend. Belvo will then start asynchronously retrieving the historical data for the link.
  9. Belvo sends a webhook to your backend once data is available for each resource.
  10. Your backend retrieves the data using a GET call, passing the link id as a query parameter.
  11. Belvo returns the info to your backend and forwards it to your frontend.
  12. Your user sees their financial data within your service.

❗️

Server-side calls

Our API cannot be used directly from the frontend. The access token and any other API request you need should be handled from your backend (server-side).

Flow - Open Finance Brazil

With OFDA Brazil, the widget flow is slightly modified as the user needs to be redirected to their institution in order to confirm their consent.

1182

High-level flow of the OFDA consent journey using Belvo's webview widget

As you can see, with OFDA there are slight changes to the the way you set up the widget and in the user's flow.

  1. Your user signs up to your platform.
  2. Your user clicks a Add a bank account button within your application.
  3. Your backend calls Belvo to get an access_token.

📘

Here, you will need to add additional scope, consent, and open finance information. For more information, see our OFDA widget configuration article.

Belvo will return a valid access_token that you can then pass to start the widget.

  1. Your user follows through the Connect Widget journey. At this stage, they will be able to indicate how long they want to provide consent to their data for. The user will be redirected to their institution in order to log in and provide consent to access their information.
  2. Once consent is granted, the user is redirected back to the Belvo Connect Widget where they can see a summary of the data that is shared. The user can now safely close the widget.
  3. Belvo returns the newly created linkid via callback to your frontend. Belvo will then start asynchronously retrieving the historical data for the link.
  4. Belvo sends a webhook to your backend once data is available for each resource.
  5. Your backend retrieves the data using a GET call, passing the link id as a query parameter.
  6. Belvo returns the info to your backend and forwards it to your frontend.
  7. Your user sees their financial data within your service.

Next up

Ready to implement our widget? Then check out:

  • Widget for web 🖥, for instructions on how to integrate our widget for desktop web applications.
  • Widget for webviews 📱, for instructions on how to integrate our widget for mobile applications.