# Developing a LIFF app (v1)

This topic explains the LIFF-specific tasks required to deploy a web app as a LIFF app.

Note

The steps for adding a LIFF app to a channel and opening a LIFF app are the same as LIFF v2.

# Setting the title of the LIFF app

Specify the name of the LIFF app in the <title> element of the HTML source of the web app. This name appears in the title bar of the LIFF app.

<title>My LIFF app</title>

# Integrating the LIFF SDK

The LIFF SDK provides the following features.

  • Initialization of the LIFF app.
  • Interface with LINE. With the client API incorporated in the SDK, you can open any URLs with the LIFF browser or with an external browser and close the LIFF app.

For more information, see Calling the LIFF API.

Specify the URL of the LIFF SDK, https://d.line-scdn.net/liff/1.0/sdk.js, in the <script> element.

<script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>

You don't need to add a Promise polyfill to your app manually. The LIFF SDK automatically adds the core-js Promise polyfill (opens new window) to an environment that doesn't support Promise.

# Calling the LIFF API

With the LIFF app, you can perform the following operations via the LIFF SDK.

# Initializing the LIFF app

The liff.init() method gets the information necessary to make various API calls with the LIFF app.

liff.init(
  data => {
    // Now you can call LIFF API
    const userId = data.context.userId;
  },
  err => {
    // LIFF initialization failed
  }
);

For more information, see liff.init() in the LIFF v1 API reference.

# Opening a URL

The liff.openWindow() method opens the specified URL in LINE's in-app browser or an external browser.

The following code opens https://example.com in an external browser.

liff.openWindow({
  url:'https://example.com',
  external:true
});

For more information, see liff.openWindow() in the LIFF v1 API reference.

To open a PDF

In the HTML source of the web app, in the <a href=""> attribute, specify the path of the target PDF:

<a href="/path/to/your.pdf">Open a PDF</a>

Clicking this link opens the PDF in LINE's in-app browser or an external browser.

To make the PDF open in a new tab, add target="_blank":

<a href="/path/to/your.pdf" target="_blank">Open a PDF in another tab</a>

# Getting the user's profile

There are two ways to get a user's profile in the LIFF app.

Choose the most appropriate method for your intended use case.

# Getting data to send to a server

Your LIFF app should obtain an access token as described below and send it to your server in lieu of actual user information.

To learn more about how to process user information on your server, see Send access token to get user information.

Call the liff.getAccessToken() method to get an access token for the current user.

const accessToken = liff.getAccessToken();

For more information, see liff.getAccessToken() in the LIFF v1 API reference.

# Getting data to use in a LIFF app

Call the liff.getProfile() method to get the current user's profile.

Don't send user information to your server

Don't send the user information that you get from liff.getProfile() to a server.

Send an access token obtained with liff.getAccessToken() instead.

liff.getProfile()
.then(profile => {
  const name = profile.displayName
})
.catch((err) => {
  console.log('error', err);
});

For more information, see liff.getProfile() in the LIFF v1 API reference.

# Sending messages to the current chat screen

The liff.sendMessages() method sends messages on behalf of the user to the chat screen where the LIFF app is opened. You can send up to 5 message objects in a single request. If you open the LIFF app in other than the chat screen, you will not be able to send messages.

From the LIFF app, you can send the following types of Messaging API messages:

For more information about message types, see Message objects in the Messaging API reference.

When messages are sent to a chat that includes a bot LINE Official Account, the LINE Platform sends webhook events to the bot server. When image, video, and audio messages are sent using the liff.sendMessages() method, resulting webhook events contain the contentProvider.type property whose value is external. For more information, see Message event in the Messaging API reference.

This code sends "Hello, World!" as the user's message to the chat screen where the LIFF app is displayed.

liff.sendMessages([
  {
    type:'text',
    text:'Hello, World!'
  }
])
.then(() => {
  console.log('message sent');
})
.catch((err) => {
  console.log('error', err);
});

For more information, see liff.sendMessages() in the LIFF v1 API reference.

# Closing the LIFF app

The liff.closeWindow() method closes the opened LIFF app.

liff.closeWindow();

For more information, see liff.closeWindow() in the LIFF v1 API reference.