Flexible Template Elements

    A Flexible Template consists of three nested data structures: a container, blocks (header, hero, body, footer), and components. This page explains elements constituting a Flexible Template.

    Container

    A container is the top-level structure of a Flexible Template. Here are the types of containers available:

    Type Description
    Bubble A container that displays a single message bubble.
    Carousel A container that displays multiple message bubbles arranged side by side.

    Bubble

    A bubble is a container that contains one message bubble.

    For more information about the JSON schema, see Bubble in the API reference.

    A carousel is a container that contains multiple bubble elements. The bubbles in the carousel can be browsed by scrolling horizontally.

    For more information about the JSON schema, see Carousel in the API reference.

    Block

    Blocks make up a bubble. 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.

    The order of display from top to bottom is: header, hero, body, footer. Each type of block can be specified only once in a bubble (or omitted).

    For more information about the JSON schema, see header property, hero property, body property, and footer property in Bubble in the API reference.

    Component

    Components are elements that make up a block. Here are the types of components available:

    Type Description
    Box This component defines the layout of the other components.
    Button Component that renders a button. When the user taps a button, a specified action is performed.
    Image Component that renders an image.
    Icon Component that renders an icon.
    Text This component renders a text string in a single row. You can specify font color, size, and weight.
    Span This component renders multiple text strings with different designs in one row. You can specify font color, size, weight, and decoration.
    Separator Component that renders a separating line.
    Filler Component that adds empty space.
    Spacer Invisible component that places a fixed-size space at the beginning or end of the box.

    Box

    This component is used to define the layout of the message.

    It can include other components (such as boxes, buttons, or images). The components (child elements) included in the box are laid out according to the properties of the box and the properties of the child elements. For more information about the layout, see How to Place Components and Adjust Child Components.

    For more information about the JSON schema, see Box in the API reference.

    Button

    This component renders a button.

    When the user taps a button, an action is performed. For more information about available actions, see Actions.

    There are three styles for the button and you can change the color of the button with any of the styles.

    For more information about the JSON schema, see Button in the API reference.

    Image

    This component renders an image.

    For more information about the JSON schema, see Image in the API reference.

    Icon

    This component renders an icon for decorating the adjacent text.

    This component can be used only in a baseline box.

    For more information about the JSON schema, see Icon in the API reference.

    Text

    This component renders a text string in one row. You can specify font color, size, and weight.

    Wrapping text

    By default, text overflowing beyond the width of the text is replaced by an ellipsis.

    The Flexible Template above can be created by the JSON data below.

    
    {
      "type": "bubble",
      "body": {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "The work site begins to move; the work site is coming in sight; the work is going on. Expand business communications with us!"
          }
        ]
      }
    }
    

    You can wrap long text around a line by setting the wrap property to true. Also, you can use a new line character (\n) to begin on a new line.

    Note

    • How \n is rendered at the end of a text string may depend on the device environment.

    The Flexible Template above can be created by the JSON data below.

    
    {
      "type": "bubble",
      "body": {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "The work site begins to move; the work site is coming in sight; the work is going on. Expand business communications with us!",
            "wrap": true
          }
        ]
      }
    }
    

    For more information about the JSON schema, see Text in the API reference.

    Span

    This component renders multiple text strings with different designs in one row. You can specify font color, size, weight, and decoration. Span is set to contents property in Text.

    For more information about the JSON schema, see Span in the API reference.

    Separator

    This component renders a separating line within a box. A vertical line will be drawn if included in a horizontal box and a horizontal line will be drawn if included in a vertical box.

    For more information about the separator, see Separator in the API reference.

    Filler

    This component is used to create a space. You can put a space between, before, or after components by inserting a filler anywhere within a box.

    The example below uses a filler to create a space between the images.

    For more information about the separator, see Filler in the API reference.

    Note

    • The spacer will be removed in a future release. We recommend adjusting the position of components without using spacer.

    This is an invisible component that places a fixed-size space at the beginning or end of the box. This component is used to expand a space at the beginning or end of a block.

    The example below uses a spacer to expand the space between the body and footer.

    For more information about the spacer, see Spacer (not recommended) in the API reference.