Integration WhiteLabel using App2App Flow
Improve your mobile application's user experience with our App2App flow.
Using the App2App flow for WhiteLabel integration removes the jump between the app and the browser, and users only move between your app and the institution's app, providing users with a more native app experience, thereby increasing conversion rates.
Below we will walk you through the App2App flow and provide relevant implementation guidelines.
The App2App flow is basically the same as the usually flow. The main difference is that after the user completes data sharing, the WhiteLabel authorization result is displayed in different places:
- In the usually flow, the user is redirected to the browser, and the WhiteLabel authorization result is displayed in the browser.
- In the App2App flow, the user will be redirected to your App, and the WhiteLabel authorization result will be displayed in the WebView of your App.
To use the App2App flow, you need to make the following changes to your current implementation:
- Create an application link (we call it application_link) that can open your app.
- Use this application link to generate the URL address of the WhiteLabel.
- After redirecting to your app through the application link, open the WebView to display the WhiteLabel.
First, your App's needs to implement Universal Link (iOS) or App Links (Android).
If not, please follow the developer documentation below to develop:
- Allowing apps and websites to link to your content: https://developer.apple.com/documentation/xcode/allowing-apps-and-websites-to-link-to-your-content
Then create an appliction link that can open your app. After your users complete the data sharing authorization in the institution's app, redirect them to your app.
Why Custom URL Scheme is not recommended
When using a Custom URL Scheme to open your application, users will receive a pop-up message that they need to confirm before being redirected to your app, which can be a poor user experience.
By using Universal Link (iOS) or App Link (Android), users are automatically redirected to your app without needing to confirm the redirect.
There are currently two options: Basic WhiteLabel and Advanced WhiteLabel
1. Add application_link to your Basic WhiteLabel URL's parameters(For more parameter descriptions, please refer to the Basic WhiteLabel section).
Assuming that the URL of your Basic WhiteLabel is https://conecte-sandbox.klavi.ai/data/v1/basic-links/yourappid and application_link is https://your_application_app.com/link_callback, the full URL address of the WhiteLabel is as follows:
If you were a klavi customer before 22/11/2024, you may be able to use the links according to the old nomenclature, then, the URL of Basic WhiteLabel may look like: https://open-sandbox.klavi.ai/data/v1/basic-links/yourappid
URL parameter values need to be encoded
Please use encodeURIComponent to encode the parameter values of redirect_url and application_link. For more information about encodeURIComponent, please refer to encodeURIComponent() - JavaScript | MDN
2. Then open this WhiteLabel full URL in your App's WebView so that your users can perform the data sharing flow.
Call the createLink method and pass the applicationLink parameter (see the Advance WhiteLabel section for more details)
The request will return the following response, where linkURL is the URL of WhiteLabel
If you were a klavi customer before 22/11/2024, you may be able to use the links according to the old nomenclature, then, the linkURL response may look like: https://open.klavi.ai/link?v=AhbGciOiJFUzI1NiIs.CtYjAyOC1hN2ZhMWFjZGRjZjkiLCJ0.UlTqpAZHeq4P2xFD
Open the linkURL in the WebView so that your users can proceed with the data sharing flow.
After users complete data sharing authorization in their institution's App, they will be redirected to the application_link to open your application. You need to read the link_callback_url parameter and open it in the WebView to display the results of this data sharing.
1. After users complete data sharing authorization in their institution's App, they will be redirected to the application_link address with the link_callback_url parameter, as shown below:
If you were a klavi customer before 22/11/2024, you may be able to use the links according to the old nomenclature, then, the link_callback_url response may look like: https://open.klavi.ai/link?v=xxx
2. By redirecting application_link to redirect the user to your App, you need to read link_callback_url and open it in the WebView of the application. The link_callback_url address read in the example is as follows:
If you were a klavi customer before 22/11/2024, you may be able to use the links according to the old nomenclature, then, the link_callback_url response may look like: https://open.klavi.ai/link?v=xxx
Once you implement this, users will be able to seamlessly go from your app, to the organization to authorize data sharing, and then back to your app.
