Composite
- 인쇄
- PDF
Composite
- 인쇄
- PDF
기사 요약
이 요약이 도움이 되었나요?
의견을 보내 주셔서 감사합니다.
Classic/VPC 환경에서 이용 가능합니다.
챗봇 답변의 응답 컴포넌트 중 Composite Component에 대해 설명합니다.
Composite 컴포넌트는 다음 2가지 기본 컴포넌트로 구성됩니다.
- Template
- Carousel (Composite 컴포넌트는 Persistent Menu 컴포넌트를 포함)
위 컴포넌트는 각 특징에 맞게 챗봇의 응답을 챗봇 빌더에서 설정할 수 있으며, 챗봇 빌더를 통해 설정한 응답 결과를 JSON 형태로 반환합니다.
Template 컴포넌트
Template 컴포넌트는 커버(Cover), 콘텐츠 테이블(Content Table), 풋 테이블(Foot Table)로 구성됩니다.
Template 컴포넌트 응답 바디
Template 컴포넌트의 응답 바디는 다음과 같습니다.
필드 | 타입 | 필수 여부 | 설명 |
---|---|---|---|
type | String | Required | 컴포넌트 유형
|
title | String | Optional | 컴포넌트 제목
|
subTitle | String | Optional | 하위 컴포넌트 제목
|
data | Object | Optional | 템플릿(Template) 컴포넌트 구성 정보 |
data.cover | Object | Required | 커버(Cover) 정보 |
data.description | String | Optional | 컴포넌트 상세 설명
|
data.contentBackgroundImage | String | Optional | 콘텐츠 테이블 영역에 표시되는 배경 이미지 URL
|
data.contentTable | Array | Optional | contentTable 상세 정보
|
data.footBackgroundImage | String | Optional | 풋(Foot) 테이블 영역에 표시되는 배경 이미지 URL
|
data.footTable | Array | Optional | footTable 상세 정보
|
data.footTableShowRows | Integer | Optional | 최대 행 수
|
data.action | Action | Optional | 컴포넌트 액션(Action) 정보
|
Table
Table
에 대한 설명은 다음과 같습니다.
필드 | 타입 | 필수 여부 | 설명 |
---|---|---|---|
rowSpan | Integer | Required | 표의 셀이 차지하는(Span) 행의 수 |
colSpan | Integer | Required | 표의 셀이 차지하는(Span) 열의 수 |
data | Object | Optional | Template 컴포넌트의 data 영역 정보
|
data.type | String | Conditional | 컴포넌트 유형 |
data.title | String | Conditional | 컴포넌트 이름 |
data.subTitle | String | Conditional | 하위 컴포넌트 이름 |
data.data | Object | Conditional | 하위 컴포넌트 구성 정보 |
data.data.type | String | Conditional | 하위 컴포넌트 유형 |
data.data.iconUrl | String | Conditional | 아이콘 URL 주소 |
data.data.action | Object | Conditional | 컴포넌트 액션(Action) 정보 |
data.data.action.type | String | Conditional | 컴포넌트 액션 유형
|
data.data.action.data | Object | Conditional | 컴포넌트 액션 세부 정보
|
Template 컴포넌트 응답 예시
Template 컴포넌트의 응답 예시는 다음과 같습니다.
{
"type": "template",
"title": "optional, short bold text",
"subTitle": "optional, short gray text",
"data":{
"cover":{
"contentTableShowRows": 3,
"contentTable":
[
"colSpan": 1,
"rowSpan": 2,
"data":{}
]
}
},
"footTableShowRows":3,
"footBackgroundImage":"https://ssl.pstatic.net/CloudFunctions.png",
"footTable":[]
}
Persistent Menu 컴포넌트
고정 메뉴(Persistent Menu) 컴포넌트는 사용자가 채팅바에서 메뉴 버튼을 터치하면 표시되며, 항상 Open
응답에 포함됩니다. utils
를 변경하지 않은 다른 응답에 permanentMenu
콘텐츠가 포함됩니다.
Persistent Menu 응답 바디
Persistent Menu의 응답 바디는 다음과 같습니다.
필드 | 타입 | 필수 여부 | 설명 |
---|---|---|---|
type | String | Required | 고정 메뉴 유형
|
title | String | Optional | 고정 메뉴 이름
|
data | Object | Optional | 고정 메뉴 구성 정보
|
data.contentBackgroundImage | String | Conditional | 콘텐츠 테이블 영역에 표시되는 배경 이미지 URL
|
data.contentTable | Array | Conditional | contentTable 상세 정보
|
contentTable
data.contentTable
에 대한 설명은 다음과 같습니다.
필드 | 타입 | 필수 여부 | 설명 |
---|---|---|---|
rowSpan | Integer | Required | 표의 셀이 차지하는(Span) 행의 수 |
colSpan | Integer | Required | 표의 셀이 차지하는(Span) 열의 수 |
data | Object | Optional | 컴포넌트 구성 정보
|
data.type | String | Conditional | 컴포넌트 유형 |
data.title | String | Conditional | 컴포넌트 이름 |
data.subTitle | String | Conditional | 하위 컴포넌트 이름 |
data.data | Object | Conditional | 하위 컴포넌트 구성 정보 |
data.data.type | String | Conditional | 하위 컴포넌트 유형 |
data.data.action | Object | Conditional | 컴포넌트 액션(Action) 정보 |
data.data.action.type | String | Conditional | 컴포넌트 액션 유형
|
data.data.action.data | Object | Conditional | 컴포넌트 액션 세부 정보
|
Persistent Menu 응답 예시
Persistent Menu의 응답 예시는 다음과 같습니다.
{
"type": "template",
"title": "persistentMenu",
"data": {
"contentBackgroundImage": "url",
"contentTable": []
}
}
Carousel 컴포넌트
Carousel 컴포넌트는 동일한 형식이 반복되는 캐로셀(Carousel) 답변이 구성됩니다.
Carousel 컴포넌트 응답 바디
Carousel 컴포넌트의 응답 바디는 다음과 같습니다.
필드 | 타입 | 필수 여부 | 설명 |
---|---|---|---|
type | String | Required | 컴포넌트 유형
|
title | String | Optional | 컴포넌트 제목
|
subTitle | String | Optional | 하위 컴포넌트 제목
|
data | Object | Optional | 캐로셀(Carousel) 컴포넌트 구성 정보 |
data.cards | Array | Optional | 캐로셀을 구성하는 카드(Card) 정보
|
Carousel 컴포넌트 응답 예시
Carousel 컴포넌트의 응답 예시는 다음과 같습니다.
{
"type": "carousel",
"title": "optional, short bold text",
"subTitle": "optional, short gray text",
"data" :
{
"cards": [{}]
}
}
이 문서가 도움이 되었습니까?