Using Flex Messages

Introduction

Flex Messages are messages with a customizable layout. You can customize the layout freely by combining multiple elements.

Structure of a Flex Message

Operating environment

Flex Message is supported on the following versions of LINE.

  • LINE for iOS: All versions
  • LINE for Android: All versions
  • LINE for macOS: 5.9.0 and later
  • LINE for Windows: 5.9.0 and later

As for LINE for iOS and Android, the following properties are supported only on version 8.11.0 and later:

For more information, see Flex Message in the Messaging API reference documentation.

Features

  • You can build complex layouts by combining horizontal and vertical layouts with the box-layout system.
  • Messages can be displayed in a carousel. Users can cycle through multiple message bubbles.
  • You can set text directionality: left-to-right or right-to-left.
  • Before starting actual development, you can test the display with the Simulator.

JSON schema

Like the other message types, Flex Messages are written in JSON format. To develop a bot that uses the Flex Message feature, refer to the Flex Message reference documentation in conjunction with this guide.

Elements

A Flex Message consists of three nested data structures: a container, blocks, and components.

Structure of a Flex Message

This section outlines the data structure and its elements. For more information about each element, see Flex Message elements.

Container

A container is the top-level structure of a Flex Message. Here are the types of containers available.

Type Description
Bubble A single message bubble
Carousel Multiple message bubbles

Block

Blocks make up a container. Here are the types of blocks available.

Type Description
Header Block that displays the message subject or header
Hero Block that displays main image content
Body Block that displays main message content
Footer Block that displays buttons and supplementary information

Component

Components make up a block. There are eight types of components.

Components for constructing message content
Type Description
Button Component that draws a button. When the user taps a button, a specified action is performed.
Icon Component that draws an icon
Image Component that draws an image
Text Component that draws text. You can format the text.
Components for adjusting message layout
Type Description
Box Component that defines the layout of child components
Filler Invisible component that has a width or height only
Separator Component that draws a separator
Spacer Invisible component that places a fixed-size space at the beginning or end of the box

Limitations

  • The same Flex Message may be rendered differently depending on the environment of the receiving device. Elements that may affect drawing include the device OS, LINE version, device resolution, language setting, and font.

Sending "Hello, World!"

As the first step, let's create a message of "Hello, World!" Here is an example of JSON data.

{
  "type": "bubble", // ①
  "body": { // ②
    "type": "box", // ③
    "layout": "horizontal", // ④
    "contents": [ // ⑤
      {
        "type": "text", // ⑥
        "text": "Hello,"
      },
      {
        "type": "text", // ⑥
        "text": "World!"
      }
    ]
  }
}
  1. Create a bubble container that represents a single message bubble.
  2. Specify a block that sets the content of the bubble. This container contains only the body block that draws the text "Hello, World!"
  3. Only box components can be specified inside the body block.
  4. Set the layout property of the box to horizontal. This value places components in the box horizontally.
  5. Specify an array of components to include in the box in the contents property of the box.
  6. Insert two text components, "Hello," and "World!"

Checking messages with the Simulator

With the Simulator, you can check drawing results without sending messages.

The sample JSON data above will be drawn with the simulator as below.

Hello, World!

Sending messages with the Messaging API

You can send Flex Messages as a push message or a reply message of the Messaging API.

Specify the container of the content to send in the contents property of a Flex Message object.

The following cURL command sends the sample JSON data in the previous section as a push message.

curl -v -X POST https://api.line.me/v2/bot/message/push \
-H 'Content-Type:application/json' \
-H 'Authorization: Bearer {channel access token}' \
-d '{
  "to": "U4af4980629...",
  "messages": [
    {
      "type": "flex",
      "altText": "This is a Flex Message",
      "contents": {
        "type": "bubble",
        "body": {
          "type": "box",
          "layout": "horizontal",
          "contents": [
            {
              "type": "text",
              "text": "Hello,"
            },
            {
              "type": "text",
              "text": "World!"
            }
          ]
        }
      }
    }
  ]
}'