# Opening a LIFF app

The LIFF app can be opened in a LIFF browser or an external browser. This section describes the operations that allow users to open the LIFF app.

Users access the LIFF URL.

The LIFF URL is issued when Adding the LIFF app to your channel.
For example, enter the URL on the LINE chat screen and tap the URL displayed in the bubble to open the LIFF app.
Users agree to grant the required permissions to the LIFF app.

The LIFF app is displayed.

Environment where the LIFF app opens

When users access the LIFF URL, the LIFF app will open in a LIFF browser on LINE, or an external browser. Which environment is used depends on the Universal Links (opens new window) or App Links (opens new window) specifications.

It's possible to open a LIFF app in native apps other than LINE. However, we don't guarantee where it will be opened, as it depends on the WebView specifications of the native app.

# Behaviors from accessing the LIFF URL to opening the LIFF app

Endpoint URL and LIFF URL specs changed

As announced on June 29, 2020, the LIFF app can now use the path (/path) and query parameter (?key=value) entered in the Endpoint URL of the LINE Developers Console.

To use the new specs, set Methods for converting additional information in the LIFF URL to Concatenate.
We recommend using the new specs in the future.

Methods for converting additional information in the LIFF URL

Note the following:

If your existing LIFF app doesn't support the new specs, set to Replace (Backward compatibility mode). In this case, the LIFF app isn't affected by the new specs.
When adding a new LIFF app, it's set to Concatenate. The setting items aren't displayed. Edit them as needed.
You must use LIFF SDK v2.3.0 or later when using Concatenate. If you use versions earlier than v2.3.0, even if Concatenate is selected, additional information will be processed according to the specifications of Replace (Backward compatibility mode).

The following describes how to set up two redirect destinations so that the LIFF app opens correctly when users access the LIFF URL, and when to execute the liff.init() method when users access the LIFF URL.

Redirect to	Description
Primary redirect URL	The first time users access the LIFF URL, they are redirected from the LIFF server to this URL. When users are redirected to this URL, execute the `liff.init()` method.
Secondary redirect URL	When executing the `liff.init()` method, users are redirected to this URL. Once users are redirected to this URL, the LIFF app page is displayed.

Redirect flow

Note the timing when you call liff.init() method

If executing the liff.init() method at the timing other than accessing the primary redirect URL, INIT_FAILED is returned and the LIFF app can't be opened.

# Create a LIFF URL

The LIFF URL is a URL that indicates the LIFF server provided by LINE. A LIFF URL is issued by adding the LIFF app to your channel.

# Create a primary redirect URL

The primary redirect URL is always the URL specified in the Endpoint URL of the LINE Developers Console.

Additional information specified in the LIFF URL

For the primary redirected URLs, regardless of the Methods for converting additional information in the LIFF URL setting, the additional information specified in the LIFF URL (for example: path_A/?key1=value1#URL-fragment) are all included in the liff.state query parameter.

For example: https://example.com/2020campaign/?key=value&liff.state=urlencoded(path_A/?key1=value1#URL-fragment)

If you don't specify any additional information in the LIFF URL, the liff.state query parameter is omitted.

# Create a secondary redirect URL

The secondary redirect URL depends on the setting of the Methods for converting additional information in the LIFF URL in LINE Developers Console and the URL that users access.

# When setting [Methods for converting additional information in the LIFF URL] to [Concatenate]

The paths and query parameters (/2020campaign/?key=value) specified in the Endpoint URL of the LINE Developers Console are included in the secondary redirect URL.

URL that users access Secondary redirect URL

LIFF URL (1)
For example: https://liff.line.me/{liffId} The URL specified in Endpoint URL of the LINE Developers Console.
For example: https://example.com/2020campaign/?key=value

URL that users access	Secondary redirect URL
LIFF URL (1) For example: `https://liff.line.me/{liffId}`	The URL specified in Endpoint URL of the LINE Developers Console. For example: `https://example.com/2020campaign/?key=value`
The LIFF URL including additional information (2) For example: `https://liff.line.me/{liffId}/path_A/?key1=value1#URL-fragment`	As shown in (2) of the below figure, the URL is a combination of 3 types of information. The domain name specified in Endpoint URL (`https://example.com`) The paths and query parameters (`/2020campaign/?key=value`) specified in Endpoint URL. The additional information specified in the LIFF URL (`/path_A/?key1=value1#URL-fragment`) For example: `https://example.com/2020campaign/path_A/?key=value&key1=value1#URL-fragment`

The LIFF URL including additional information (2)
For example: https://liff.line.me/{liffId}/path_A/?key1=value1#URL-fragment

As shown in (2) of the below figure, the URL is a combination of 3 types of information.

The domain name specified in Endpoint URL (https://example.com)
The paths and query parameters (/2020campaign/?key=value) specified in Endpoint URL.
The additional information specified in the LIFF URL (/path_A/?key1=value1#URL-fragment)

For example: https://example.com/2020campaign/path_A/?key=value&key1=value1#URL-fragment

Endpoint URL

# When setting [Methods for converting additional information in the LIFF URL] to [Replace (Backward compatibility mode)]

The paths and query parameters (for example: /2020campaign/?key=value) specified in the Endpoint URL of the LINE Developers Console may not be included in the secondary redirect URL.

URL that users access Secondary redirect URL

LIFF URL The URL specified in Endpoint URL of the LINE Developers Console.
For example: https://example.com/2020campaign/?key=value

Note: Depending on the setting of Endpoint URL, the specified paths and query parameters (/2020campaign/?key=value) may not be included in the secondary redirect URL.

The LIFF URL including additional information

URL that users access	Secondary redirect URL
LIFF URL	The URL specified in Endpoint URL of the LINE Developers Console. For example: `https://example.com/2020campaign/?key=value` Note: Depending on the setting of Endpoint URL, the specified paths and query parameters (`/2020campaign/?key=value`) may not be included in the secondary redirect URL.
The LIFF URL including additional information	The URL combines these 2 types of information. The domain name specified in Endpoint URL (`https://example.com`) The additional information specified in the LIFF URL (`/path_A/?key1=value1#URL-fragment`) For example: `https://example.com/path_A/?key1=value1#URL-fragment` Note: The paths and query parameters (`/2020campaign/?key=value`) specified in Endpoint URL aren't included in the secondary redirect URL.

The URL combines these 2 types of information.

The domain name specified in Endpoint URL (https://example.com)
The additional information specified in the LIFF URL (/path_A/?key1=value1#URL-fragment)

For example: https://example.com/path_A/?key1=value1#URL-fragment

Note: The paths and query parameters (/2020campaign/?key=value) specified in Endpoint URL aren't included in the secondary redirect URL.

Note

If the current page URL doesn't begin with the URL specified in the Endpoint URL when executing the liff.permanentLink.createUrl() method, you aren't able to get a permanent link.

Especially when setting Methods for converting additional information in the LIFF URL to Replace (Backward compatibility mode), the paths and query parameters (/2020campaign/?key=value) specified in Endpoint URL may not be included in the secondary redirect URL. In this case, you can't get a permanent link because the liff.permanentLink.createUrl() method meets the above conditions.

# Opening a LIFF app from another LIFF app

If you click the link to another LIFF app within a LIFF app whose screen is on Full display, you can display the other app while still having the LIFF browser open.
The LIFF browser doesn't close, so you can return to the original LIFF app with the return button from the LIFF browser.

Even though liff.init() executes liff.login() to perform a LINE login process when transitioning to another LIFF app, the Promise object is not resolved or rejected and remains in a pending state during the screen transition. liff.init() is resolved or rejected when the endpoint URL of the LIFF app is opened after the login process.

Conditions to moving to another LIFF app without closing the current LIFF app

LIFF SDK v2.4.1 or later and LINE 10.18.0 or later
The original LIFF app screen is set to Full display
The LIFF app to which you are moving is correctly initialized by liff.init()

URL verification function

If redirectUri is specified in the liff.login() argument, it verifies that the specified URL matches the domain name and path combination of the Endpoint URL. If the URL doesn't match, an error message will be displayed and LINE Login will fail.

if (!liff.isLoggedIn()) {
  liff.login({ redirectUri: "https://example.com/path" });
  //Verify that the domain name and path (https://example.com/path) match the endpoint URL.
}

You can verify that the Endpoint URL is set correctly by specifying redirectUri. The query parameter (?key=value) and URL fragment (#URL-fragment) aren't validated.

The criteria for URL matching will differ depending on the Method for converting additional information in the LIFF URL setting. For more information, see URL validation in the LIFF documentation.

LIFF-apps-transition

Behavior based on screen size of the LIFF app

If the screen size of the original LIFF app is set to Tall or Compact, the browser will initially close regardless of the screen size of the LIFF app to which you want to move, before the destination LIFF app is displayed.
If the screen size of the original LIFF app is set to Full, the screen size of the destination LIFF app will be displayed in Full, even if the destination LIFF app is set to Tall or Compact.

Unexpected behaviors

If you are using an older version of the LIFF SDK, you may experience the following unexpected behaviors:

Despite that you moved from a LIFF URL specified by Path (/path) to a different LIFF app, you still end up on the URL specified in the Endpoint URL of the LINE Developers Console.
If you click cancel on the Consent screen where you seek user authorization, you must close your LIFF browser once.
If the destination is a LINE MINI App, the design of the LIFF browser header does not automatically change.

When designing to enable transitions between multiple LIFF apps, it is recommended that you use the latest version of the LIFF SDK.