---
title: Integration WhiteLabel using App2App Flow
slug: connect/integration-whitelabel-using-app2app-flow
docTags: 
createdAt: 2024-06-03T08:43:57.266Z
---

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.

# App2App Flow

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:

1. In the usually flow, the user is redirected to the browser, and the WhiteLabel authorization result is displayed in the browser.
2. 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.

# How your app can supports the App2App flow

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

1. Create an application link (we call it `appink`) that can open your app.
2. Use this application link to generate the URL address of the WhiteLabel.
3. After redirecting to your app through the application link, open the WebView to display the WhiteLabel.

## 1. Create an Application Link to open your app

First, your App's needs to implement [Universal Link](https://developer.apple.com/ios/universal-links/) (iOS) or [App Links](https://developer.android.com/training/app-links) (Android). 

If not, please follow the developer documentation below to develop:

1. Allowing apps and websites to link to your content: [https://developer.apple.com/documentation/xcode/allowing-apps-and-websites-to-link-to-your-content](https://developer.apple.com/documentation/xcode/allowing-apps-and-websites-to-link-to-your-content)
2. Handling Android App Links: [https://developer.android.com/training/app-links](https://developer.android.com/training/app-links)

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.

:::hint{type="warning"}
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.
:::

## 2.  Use Application Link to generate WhiteLabel URL

There are currently two options: `Basic WhiteLabel` and `Advanced WhiteLabel`

### Basic WhiteLabel 

1\. Add app\_link to your Basic WhiteLabel URL's parameters(For more parameter descriptions, please refer to the [Basic WhiteLabel](docId\:RsCjf-q1wcsJnRd413Bd3) section).

Assuming that the URL of your Basic WhiteLabel is `https://open-sandbox.klavi.ai/data/v1/basic-links/yourappid` and appLink is `https://your_application_app.com/link_callback `and appRedirectURLKey is `weburl` ,the full URL address of the WhiteLabel is as follows:

```curl
https://open-sandbox.klavi.ai/data/v1/basic-links/yourappid  # your Basic WhiteLabel url
  ?redirect_url=https://your_application_app.com/link_result # your result URL
  &app_link=https://your_application_app.com/link_callback # your application link
  &app_redirect_url_key=weburl
```

:::hint{type="info"}
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) 
:::

2\. Then open this WhiteLabel full URL in your App's WebView so that your users can perform the data sharing flow.

### Advance WhiteLabel

Call the createLink method and pass the `appLink` parameter (see the [Advance WhiteLabel](docId\:gnx-P0vXNMSA9bfnoq0ob) section for more details)

```curl
curl --location 'https://api-sandbox.klavi.ai/data/v1/links' \
--header 'Accept: application/json' \
--header 'Content-Type: application/json' \
--data '{ 
  "personalTaxId":"string", 
  "businessTaxId":"string", 
  "email":"string", 
  "phone":"string", 
  "redirectURL":"https://your_application_app.com/link_result", 
  "appLink":"https://your_application_app.com/link_callback" 
  "appRedirectURLKey":"weburl" \
  }'
```

The request will return the following response, where `linkURL` is the URL of WhiteLabel

```json
{
    "linkId": "4437b139-8a16-11ee-b636-487b6bad036a",
    "linkURL": "https://open.klavi.ai/link?v=AhbGciOiJFUzI1NiIs.CtYjAyOC1hN2ZhMWFjZGRjZjkiLCJ0.UlTqpAZHeq4P2xFD",
    "linkToken": "AhbGciOiJFUzI1NiIs.CtYjAyOC1hN2ZhMWFjZGRjZjkiLCJ0.UlTqpAZHeq4P2xFD",
    "expireIn": 1800
}
```

Open the linkURL in the WebView so that your users can proceed with the data sharing flow.

## 3. Display data sharing results in WebView

After users complete data sharing authorization in their institution's App, they will be redirected to the appLink to open your application. You need to read the `appRedirectURLKey` 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 `appRedirectURLKey` parameter, as shown below:

```curl
https://your_application_app.com/link_callback?  # your application_link
  &weburl=https://open.klavi.ai/link?v=xxx 
```

2\. By redirecting application\_link to redirect the user to your App, you need to read the value set by appRedirectURLKey (such as `weburl` in the example) and open it in the WebView of the application. The parameter values ​​of the `weburl` read in the example are as follows:

```curl
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.