Sending Flex Messages

# Sending Flex Messages

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

"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

# Operating environment

Flex Messages are supported on the following versions of LINE:

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

These features are only supported on specific versions of LINE.

Feature LINE for iOS and Android LINE for macOS and Windows
All versions 6.2.0 or later
  • maxWidth property of box
  • maxHeight property of the box
  • lineSpacingproperty of the text
  • video *
 11.22.0 or later 7.7.0 or later

* If the version of LINE is lower than the version that supports the video, the component specified as the value of the altContent property will be displayed.

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) (opens new window).
  • In addition to a single message bubble, you can also send multiple message bubbles in a carousel. Users can scroll horizontally throughout 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:

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.

dummy dummy
① 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 using the methods in Sending 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!"
            }
          ]
        }
      }
    }
  ]
}'