With our App2App flow, you can offer your clients a more native app experience using Belvo’s Hosted Widget, enhancing their user experience and reducing friction. On this page, we’ll guide you through the new flow and provide guidelines on how to implement it.

User flow

With the App2App flow, the key difference for the user is that after they grant their consent to share data:

1. They are redirected to a secure browser to complete the request.
2. They are redirected directly to your app.
3. The Belvo widget opens in a webview within your app.

📘

How does this differ from the usual flow?

In the usual flow, when you implement the Hosted Widget using deep links, the user completes the entire connection process in the browser and is then prompted to be redirected to your application, which leads to friction and a suboptimal user experience. With this new flow, the user is seamlessly transferred through the different redirections.

Implementation

To use the App2App flow, you will need to make the following changes to your current implementation:

1. Create a link to your application.
2. Use the link when generating the access token.
3. Open the Webview Widget upon being redirected to your application.

1. Link to your application

Before setting up the native app experience, you need to prepare a universal link (iOS) or an app link (Android). This link is used to redirect your user back to your application after they have granted their consent in their institution.

📘

Why not use a deep link?

When using a deep link to your application, users receive a pop-up message that they need to confirm before being redirected to your app, which can lead to a poor user experience and friction.

By using the application_link, users are automatically redirected to your application without needing to confirm the redirect.

2. Generating your access_token

When generating your access_token, you need to provide the following parameters in the callback_urls object:

• application_link : The link to your application that users will be redirected to after granting consent in their institution.
• success: The URL users are redirected to when they have successfully completed the widget flow.
• exit: The URL users are redirected to when they exit the widget before completing the flow.
• event: The URL users are redirected to when an error occurs.

{
  ...
  "callback_urls": {
    "application_link": "https://your.company_name.br/belvo-widget",
    "success": "https://your.company_name.br/success",
    "exit": "https://your.company_name.br/exit",
    "event": "https://your.company_name.br/error"
  }
  ...
}

For complete instructions how how to generate the access_token, please see our dedicated Hosted Widget (OFDA) guide.

3. Open Webview on redirect

Once users grant consent in their institution, they are redirected to your application using the application_link, along with a query string that you’ll need to use to open the Belvo widget as a webview inside your application.

https://mobile.mobils.br/belvo-widget/ # Your application_link
	?access_token={someAccessToken}&consent_id={someConsentId}&locale=pt... # Query string with details to open the Belvo widget

As soon as users are redirected to your application, you need to open a webview within your application and launch Belvo’s widget:

https://widget.belvo.io/ # The Belvo Hosted Widget URL
	?access_token={someAccessToken}&consent_id={someConsentId}&locale=pt... # The query string you received

✅ Done! With these few tweaks to your implementation, users will seamlessly move from your application to the widget, grant their consent, and then return to the widget within your application.