# 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).

"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: All versions
  • LINE for Android: All versions
  • LINE for macOS: 5.17.0 or later
  • LINE for Windows: 5.17.0 or later

The following properties are supported only on version 9.8.0 or later on both LINE for iOS and LINE for 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 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 as reply messages or push messages, as described 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!"
            }
          ]
        }
      }
    }
  ]
}'