Bubble {#bubble}
버블(bubble)은 단일 메시지 버블로 구성된 컨테이너이다. 헤더(header), 히어로(hero), 바디(body), 푸터(footer)라는 4개의 블록으로 구성되어 있다. 각 블록의 용도에 대한 자세한 내용은 Flexible Template 구성 문서의 블록을 참고한다.
버블을 정의하는 JSON 데이터의 최대 크기는 30KB로 제한된다.
Request
| 파라미터 | 타입 | 필수 여부 | 설명 |
|---|---|---|---|
| type | string | Y | bubble 로 고정 |
| size | string | N | 버블의 크기. nano, micro, kilo, mega, giga 중 하나의 값으로 지정한다.기본값은 mega 이다. |
| direction | string | N | 문자열의 방향이며, 수평 박스에서는 하위 컴포넌트들이 배치되는 방향이다. 다음 값 중 하나를 지정한다. • ltr: 문자열과 컴포넌트를 왼쪽에서 오른쪽으로 표기 및 배치• rtl: 문자열과 컴포넌트를 오른쪽에서 왼쪽으로 표기 및 배치기본값은 ltr 이다. |
| header | object | N | 헤더 블록. Box로 지정한다. |
| hero | object | N | 히어로 블록. Box 또는 Image로 지정한다. |
| body | object | N | 바디 블록. Box로 지정한다. |
| footer | object | N | 푸터 블록. Box로 지정한다. |
| styles | object | N | 블록의 스타일. 아래의 버블 스타일을 지정한다. |
| action | object | N | 버블을 탭하면 실행되는 액션. Action object를 지정한다. |
블록 스타일 객체 {#bubble-style}
버블의 블록 스타일은 다음의 두 객체를 사용하여 정의한다.
버블 스타일 {#bubble-style}
| 파라미터 | 타입 | 필수 여부 | 설명 |
|---|---|---|---|
| header | object | N | 헤더 블록. 아래의 블록 스타일을 지정한다. |
| hero | object | N | 히어로 블록. 아래의 블록 스타일을 지정한다. |
| body | object | N | 바디 블록. 아래의 블록 스타일을 지정한다. |
| footer | object | N | 푸터 블록. 아래의 블록 스타일을 지정한다. |
블록 스타일 {#block-style}
| 파라미터 | 타입 | 필수 여부 | 설명 |
|---|---|---|---|
| backgroundColor | string | N | 블록의 배경색. Hex 색상 코드로 지정한다. |
| separator | boolean | N | true 로 설정하면 블록 위에 구분선이 표시된다. 기본값은 false 이다. |
| separatorColor | string | N | 구분선의 색상. Hex 색상 코드로 지정한다. |
참고
- 가장 처음에 위치한 블록에는 구분선(separator)을 지정할 수 없다.
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" } ] }}