Bubble

    This is a container that contains one message bubble. It can contain four blocks: header, hero, body, and footer. For more information about using each block, see Block in the API documentation.

    The maximum size of JSON data that defines a bubble is 15 KB.

    API Type

    Server API

    Request URL

    https://apis.worksmobile.com/r/{API ID}/message/v1/bot/{botNo}/message/push

    HTTP Method

    POST(Content-Type: application/json; charset=UTF-8)

    Request

    Parameter Type Required Description
    type string Y Set this parameter to bubble.
    size string N The size of the bubble. You can specify one of the following values: nano, micro, kilo, mega, or giga.

    The default value is mega.
    direction string N Text directionality and the direction of placement of components in horizontal boxes. Specify one of the following values:

    ltr: The text is left-to-right horizontal writing, and the components are placed from left to right
    rtl: The text is right-to-left horizontal writing, and the components are placed from right to left

    The default value is ltr.
    header object N Header block. Specify a box.
    hero object N Hero block. Specify a box or an image.
    body object N Body block. Specify a box.
    footer object N Footer block. Specify a box.
    styles object N Style of each block. Specify a bubble style below.
    action object N Action performed when this image is tapped. Specify an action object.

    Objects for the block style

    Use the following two objects to define the style of blocks in a bubble.

    Bubble style

    Parameter Type Required Description
    header object N Header block. Specify a block style below.
    hero object N Hero block. Specify a block style below.
    body object N Body block. Specify a block style below.
    footer object N Footer block. Specify a block style below.

    Block style

    Parameter Type Required Description
    backgroundColor string N Background color of the block. Use a hexadecimal color code.
    separator boolean N true to place a separator above the block. The default value is false.
    separatorColor string N Color of the separator. Use a hexadecimal color code.

    Note

    • You cannot place a separator above the first block.

    Request Example

    
    {
      "type": "bubble",
      "header": {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "Text Component",
            "weight": "bold"
          }
        ],
        "paddingAll": "10px",
        "paddingStart": "15px"
      },
      "hero": {
        "type": "image",
        "url": "https://i.ibb.co/RbvxLhg/Image-Component.png",
        "size": "full",
        "aspectMode": "cover",
        "aspectRatio": "2:1"
      },
      "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "box",
            "layout": "horizontal",
            "contents": [
              {
                "type": "box",
                "layout": "vertical",
                "contents": [
                  {
                    "type": "image",
                    "url": "https://i.ibb.co/4dTjScT/Image.png",
                    "size": "lg"
                  }
                ],
                "borderWidth": "2px",
                "borderColor": "#90909050",
                "width": "93px",
                "height": "93px"
              },
              {
                "type": "box",
                "layout": "vertical",
                "contents": [
                  {
                    "type": "separator",
                    "color": "#909090"
                  },
                  {
                    "type": "text",
                    "text": "Text Component 01"
                  },
                  {
                    "type": "separator",
                    "color": "#909090"
                  },
                  {
                    "type": "text",
                    "text": "Text Component 02"
                  },
                  {
                    "type": "separator",
                    "color": "#909090"
                  }
                ],
                "height": "100px",
                "margin": "md",
                "spacing": "lg"
              }
            ]
          },
          {
            "type": "box",
            "layout": "horizontal",
            "contents": [
              {
                "type": "box",
                "layout": "vertical",
                "contents": [
                  {
                    "type": "image",
                    "url": "https://i.ibb.co/4dTjScT/Image.png",
                    "size": "lg"
                  }
                ],
                "borderWidth": "2px",
                "borderColor": "#90909050",
                "width": "93px",
                "height": "93px"
              },
              {
                "type": "box",
                "layout": "vertical",
                "contents": [
                  {
                    "type": "separator",
                    "color": "#909090"
                  },
                  {
                    "type": "text",
                    "text": "Text Component 03"
                  },
                  {
                    "type": "separator",
                    "color": "#909090"
                  },
                  {
                    "type": "text",
                    "text": "Text Component 04"
                  },
                  {
                    "type": "separator",
                    "color": "#909090"
                  }
                ],
                "height": "100px",
                "margin": "md",
                "spacing": "lg"
              }
            ],
            "margin": "md"
          }
        ]
      },
      "footer": {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "button",
            "action": {
              "type": "uri",
              "label": "Button Component",
              "uri": "http://linecorp.com/"
            },
            "height": "sm",
            "style": "link"
          }
        ]
      }
    }
    

    Response

    It returns HTTP status 200 with no response if successful.

    Error Code

    If the API call fails, it returns an error code and message.
    For error codes, refer to Message Bot REST API Error Codes.