Using Flex Messages

Introduction

Flex Messages are messages with a customizable layout. You can customize the layout freely based on the specification for CSS Flexible Box (CSS Flexbox).

"Flex container" corresponds to "box component" in a Flex Message. "Flex item" corresponds to "component" in a Flex Message.

Flex Message examples

Checking the behavior in Flex Message Simulator

By using Flex Message Simulator, you can check the layout without actually sending messages.

Flex Message Simulator

Flex Message Simulator Update 1 (β) for Flex Message Update 1 is also available. However, it may not work properly.

Operating environment

Flex Messages are supported on the following versions of LINE:

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

The following properties are supported only in version 9.8.0 and later on LINE for iOS and Android.

  • maxLines property of the text

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

Features

  • You can build complex message layouts based on the specification for CSS Flexible Box (CSS Flexbox).
  • In addition to a single message bubble, you can also send multiple message bubbles in a carousel. Users can scroll horizontally throught the message bubbles in the carousel.
  • You can set text directionality: left-to-right or right-to-left.

Flex Message description format

Like the other message types, Flex Messages are written in JSON format. For more information about sending Flex Messages from a bot, see the following pages:

note Limitations

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

Sending "Hello, World!"

As the first step, let's create a "Hello, World!" message.

Hello, World!

Preparing JSON data

Prepare the JSON data for a "Hello, World!" message.

{
  "type": "bubble", // ①
  "body": { // ②
    "type": "box", // ③
    "layout": "horizontal", // ④
    "contents": [ // ⑤
      {
        "type": "text", // ⑥
        "text": "Hello,"
      },
      {
        "type": "text", // ⑥
        "text": "World!"
      }
    ]
  }
}

The meaning of ①–⑥ is given below.

Create a bubble that represents a single message bubble.
Specify a body to set the contents of the bubble in 1.
The bubble in ① contains only the body for drawing Hello, World!.
You can specify only a box in the body.
Set the layout property of the box to horizontal.
The components in the box are arranged horizontally.
Specify an array of components to include in the box in the contents property of the box.
Insert the two texts, Hello, and World!.

Sending messages with the Messaging API

You can send Flex Messages as reply messages or push messages, as described in Messages. Specify the JSON data to send (Flex Message container) in the Flex Message object's contents property.

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!"
            }
          ]
        }
      }
    }
  ]
}'

{{ $t("form.question.helpful") }}

{{ $t("form.question.detail") }}

{{ $t("form.question.improve") }}

{{ $t("form.info.start") }}{{ $t("form.info.link") }}{{ $t("form.info.end") }}


{{ $t("form.result.success") }}
{{ $t("form.result.error") }}
{{ $t("form.result.errorLink") }}