Overview of Common Profile Quick-fill

Available only in verified MINI Apps

To use Common Profile Quick-fill, your LINE MINI App must be verified and have completed the application process.

What is Common Profile Quick-fill

Quick-fill is a feature that automatically fills in the necessary profile information by tapping the Auto-fill button on the LINE MINI App. You can easily use the Common Profile information that a user has set in the Account Center in the LINE MINI App.

By integrating Quick-fill into your LINE MINI App, users can automatically enter an address or phone number with a single tap. For example, when making a reservation at a restaurant or ordering from an online store, users can save themselves the hassle of entering the information manually.

This page explains how to integrate Quick-fill into your LINE MINI App.

For information on how to use Quick-fill on the LINE MINI App, see Set Common Profile to use Quick-fill (only available in Japanese) in the LINE user's guide.

Languages that support Quick-fill

Quick-fill currently supports Japanese only. Therefore, the Quick-fill screen will be displayed in Japanese regardless of the language setting in the LINE app.

How to integrate Quick-fill into the LINE MINI App

To integrate Quick-fill into the LINE MINI App, follow the steps below:

  1. Apply to use Quick-fill
  2. Specify the scope of Quick-fill in the LINE Developers Console
  3. Submit a review request for your LINE MINI App
  4. Develop your LINE MINI App

1. Apply to use Quick-fill

Only available in verified MINI Apps

Common Profile Quick-fill is only available in verified MINI Apps. Before applying for use, confirm that the target app is a verified MINI App.

To use Common Profile Quick-fill, fill out the usage application form and submit it via the application form. If the same service provider is applying for multiple LINE MINI Apps at once, you can use the application form for multiple applications.

After completing the usage application form, submit your application via the following form. We'll notify you via email regarding the receipt of your application and the results of the review.

Application form (Only available in Japanese)

2. Specify the scope of Quick-fill in the LINE Developers Console

After your application has been accepted, specify the scope of the information you want to use. In the LINE Developers Console, select the target LINE MINI App channel, and in the Scope section of the Web app settings tab, check the box for the scope you want to use.

For more information about the types of scope that you can use with Quick-fill, see Types of scope that can be selected in the LINE Developers Console.

Behavior when Quick-fill and Channel consent simplification are both enabled at the same time

If you enable both Quick-fill and Channel consent simplification at the same time, users won't be able to disable the toggle button for the Common Profile on the Verification screen. We plan to make a fix for this behavior in the future. For more information about the Verification screen, see Detailed workflow of "Channel consent simplification".

3. Submit a review request for your LINE MINI App

Once you have specified the scope, request LINE MINI App review from the Review request tab on the LINE MINI App channel. Once the LINE MINI App has passed the review, you will be able to develop within the specified scope.

4. Develop your LINE MINI App

You can develop your LINE MINI App that integrates Quick-fill. For information on how to develop, see Integrate Quick-fill with the LIFF Plugin.

When developing a LINE MINI App that integrates Quick-fill, follow the instructions below:

Integrate Quick-fill with the LIFF Plugin

To develop Quick-fill, you need to use the LIFF SDK and the LIFF plugin. For information about the LIFF SDK version that the LIFF plugin works with, see LIFF SDK version.

You can integrate the LIFF SDK into your LINE MINI App in one of two ways:

Once you've integrated the LIFF SDK into your LINE MINI App, you can enable the Quick-fill LIFF plugin by passing the Quick-fill LIFF plugin to the liff.use() method as shown below:

javascript
liff.use(new LiffCommonProfilePlugin());
await liff.init({ liffId: "xxx" });

const { data, error } = await liff.$commonProfile.get();
liff.$commonProfile.fill(data);

The $commonProfile property is added to the liff object, and the following Quick-fill client API can be used:

Specify a CDN path to integrate Quick-fill

When specifying a CDN path, by loading the package with the script tag, the liffCommonProfile property is added to the window object. An instance of the LiffCommonProfilePlugin class that exists within liffCommonProfile is passed as an argument to liff.use().

html
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
    <script src="https://static.line-scdn.net/5/liff-common-profile/edge/production/1.0.0/index.umd.cjs"></script>
    <title>LIFF App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/index.js"></script>
  </body>
</html>
js
liff.use(new liffCommonProfile.LiffCommonProfilePlugin());

const { data, error } = await liff.$commonProfile.get();
liff.$commonProfile.fill(data);

For more information, see Specify the CDN path in the LIFF documentation.

Use the npm package to integrate Quick-fill

When using the npm package, import the LiffCommonProfilePlugin class from the package and pass an instance of it as an argument to liff.use().

sh
$ npm install @line/liff-common-profile-plugin
js
import liff from "@line/liff";
import { LiffCommonProfilePlugin } from "@line/liff-common-profile-plugin";
liff.use(new LiffCommonProfilePlugin());

const { data, error } = await liff.$commonProfile.get();
liff.$commonProfile.fill(data);

For more information, see Use the npm package in the LIFF documentation.

Quick-fill operating environment

Quick-fill only works when the user is using LINE for iOS or LINE for Android.

The following is the operating environment for Quick-fill on your system:

LINE MINI Apps use the LINE Front-end Framework (LIFF). For more information about the recommended environment for Quick-fill, see the Recommended operating environment section of the LIFF documentation.

Transition destinations where the LIFF app is guaranteed to work

LIFF apps will only work if the URL is exactly the same as the endpoint URL (e.g. https://example.com/path) or is at a lower level than the endpoint URL (e.g. https://example.com/path/to/lower?key1=value1#URL-fragment). If you transition the LIFF app to something other than the above, the operation of the LIFF app isn't guaranteed.

LIFF SDK version

Use LIFF SDK v2.19.0 or later, as the LIFF plugin is used in the development of Quick-fill. For more information on LIFF plugin, see LIFF plugin in the LIFF documentation.

Node.js version

When installing the LIFF SDK using npm, use Node.js version 18.15.0 or later. Note that Node.js isn't required when using the LIFF SDK with a specified CDN path.

For more information on integrating the LIFF SDK into your LIFF app, see Integrating the LIFF SDK with the LIFF app in the LIFF documentation.

Types of scope that can be selected in the LINE Developers Console

You can select the following types of Quick-fill scopes in the LINE Developers Console.

ScopeDescription
commonprofile.namePermission to obtain the name registered by the user
commonprofile.emailPermission to obtain the email address registered by the user
commonprofile.addressPermission to obtain the address registered by the user
commonprofile.genderPermission to obtain the gender registered by the user
commonprofile.birthdayPermission to obtain the birthday registered by the user
commonprofile.phonePermission to obtain the phone number registered by the user

If these scopes don't display on the LINE Developers Console, see 1. Apply to use Quick-fill.

Users cannot select and allow some scopes on the channel consent screen. They can either allow or disallow these scopes as "Management Information (Common Profile) in the Account Center" in bulk.

The scopes parameters that can be specified and its return value

The scopes parameters that can be specified for liff.$commonProfile.get() and liff.$commonProfile.getDummy() and the return values for each are as follows:

NumberscopesDescriptionData typeMax chars
(half-width)
Max chars
(Hiragana and kanji)
Explanation of the return value
1family-nameFamily namestring10050
2given-nameGiven namestring10050
3family-name-kanaPhonetic family namestring10050
4given-name-kanaPhonetic given namestring10050
5sex-enumGendernumber1 (fixed length)N/A
  • 0: Male
  • 1: Female
  • 2: Other
  • 3: No answer
6bday-dayDay of birthnumber2N/A
7bday-monthMonth of birthnumber2N/A
8bday-yearMonth of birth of yearnumber4N/A
9telPhone numberstring200N/A
10emailEmail addressstring200N/A
11postal-codePostal codestring47N/A
12address-level1Address 1string5353
13address-level2Address 2string5353
14address-level3Address 3string10069
15address-level4Address 4string10069

The Common Profile for the Account Center is created by combining the profile registered with LINE and Yahoo! JAPAN. If the user doesn't use the Account Center, the profile information from LINE will be filled in automatically.

Dummy data for Common Profile that can be obtained

You can use liff.$commonProfile.getDummy() to get dummy data for Common Profile. You can specify the dummy data to get with caseId from the 10 types provided.

caseIdfamily-namegiven-namefamily-name-kanagiven-name-kanasex-enumbday-daybday-monthbday-yeartelemailpostal-codeaddress-level1address-level2address-level3
address-level4
1見本田見本夫ダミータダミーオ0123199809001234567dummy_39@yahoo.co.jp1020094東京都千代田区紀尾井町1-2東京ガーデンテラス紀尾井町
21123199809001234567dummy_39@yahoo.co.jpN5X 1N7東京都紀尾井町1-2東京ガーデンテラス紀尾井町
3見本田ダミータ209001234567dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dummy_39dumm@yahoo.co.jp102-0094東京都千代田区東京ガーデンテラス紀尾井町
4見本夫ダミーオ312319980901234567dummy_39@yahoo.co.jp1077 AA2 15000N5X 1N7107715000X 1077 AA2 15000N5X 1N71東京都千代田区紀尾井町1-2
5DaimtaDamioダミータダミーオ01231998090012345671020094TokyoChiyoda-kuKioi-cho,1-2Tokyo Garden terrace Kioi-cho,
612344321ダミータダミーオ11998090-1234-5678dummy_39@yahoo.co.jpトウキョウトチヨダクキオイチョウ1-2トウキョウガーデンテラスキオイチョウ
7ダミータダミオダミータダミーオ2309001234567090012345670900123456709001234567090012345670900123456709001234567090012345670900123456709001234567090012345670900123456709001234567090012345670900123456709001234567090012345670900123456709dummy_39@yahoo.co.jp1020094
8ダミ!?ダミ夫@ダミータダミーオ312199809001234567dummy_39@yahoo.co.jp1020094🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀
9🐶🐶🐶ダミ💚ダミータダミーオ01231998dummy_39@yahoo.co.jp102-0094東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都東京都千代田区千代田区千代田区千代田区千代田区千代田区千代田区千代田区千代田区千代田区千代田区千代田区千代田区千紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2紀尾井町1-2東京ガーデンテラス紀尾井町東京ガーデンテラス紀尾井町東京ガーデンテラス紀尾井町東京ガーデンテラス紀尾井町東京ガーデンテラス紀尾井町東京ガーデンテラス紀尾井町東京ガーデンテラス紀尾井町
10ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー田ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミー夫ダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミータダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオダミーオ1123199809001234567dummy_39@yahoo.co.jpN5X 1N7千代田区紀尾井町1-2東京ガーデンテラス紀尾井町

Options for getting Common Profile information

When getting Common Profile information using liff.$commonProfile.get(), you can specify the following options for each scope. These options are all set to true by default, so specify false to disable them.

PropertyDefault valueDescriptionSpecifiable scope
excludeEmojistrueWhether to remove emojis from the string.
  • given-name
  • family-name
excludeNonJptrueWhether to exclude phone numbers with 12 or more digits. If true, an empty string and error information are returned when the phone number has 12 or more digits.
  • tel
digitsOnlytrueWhether to exclude postal codes that aren't numbers. If true, an empty string and error information are returned when the postal code contains characters other than numbers.
  • postal-code

API reference

For more information about the client API used for Quick-fill, see Common Profile Quick-fill in the LINE MINI App API reference.