Bubble {#bubble}

A bubble is a container that contains a single message bubble. It consists of four blocks: header , hero , body , and footer . For more information about the blocks, see Block in Flexible Template Elements.

The maximum size of JSON data defining a bubble is limited to 30 KB.

Request

Parameter	Type	Required	Description
type	string	Y	Set this parameter to `bubble`.
size	string	N	Bubble size. Specify one of the following values: `nano`, `micro`, `kilo`, `mega`, and `giga` . The default value is `mega` .
direction	string	N	The direction of the string. In a horizontal box, it is the direction in which child components are positioned. Specify one of the following values: • `ltr`: Displays the text string and components from left to right. • `rtl`: Displays the text string and components from right to left. The default value is `ltr`.
header	object	N	Header block. Set this parameter to Box.
hero	object	N	Hero block. Set this parameter to Box or Image.
body	object	N	Body block. Set this parameter to Box.
footer	object	N	Footer block. Set this parameter to Box.
styles	object	N	Block style. Specify a bubble style described below.
action	object	N	The action that occurs when the bubble is tapped. Specify an action object .

Block style object {#bubble-style}

You can define the block style of a bubble using the following two objects:

Bubble style {#bubble-style}

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

Block style {#block-style}

Parameter	Type	Required	Description
backgroundColor	string	N	Background color of the block. Set a hex color code.
separator	boolean	N	If it is set to `true`, a separator is displayed over the block. The default value is `false`.
separatorColor	string	N	Separator color. Set a hex color code.

Note
A separator cannot be specified for the block located at the very beginning.

Request example {#bubble-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://developers.worksmobile.com/image/en/bot/message_type/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://developers.worksmobile.com/image/en/bot/message_type/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://developers.worksmobile.com/image/en/bot/message_type/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": "https://works.do/"        },        "height": "sm",        "style": "link"      }    ]  }}