Composite

Prev Next

Classic/VPC 환경에서 이용 가능합니다.

챗봇 답변의 응답 컴포넌트 중 Composite Component에 대해 설명합니다.

Composite 컴포넌트는 다음 2가지 기본 컴포넌트로 구성됩니다.

위 컴포넌트는 각 특징에 맞게 챗봇의 응답을 챗봇 빌더에서 설정할 수 있으며, 챗봇 빌더를 통해 설정한 응답 결과를 JSON 형태로 반환합니다.

Template 컴포넌트

Template 컴포넌트는 커버(Cover), 콘텐츠 테이블(Content Table), 풋 테이블(Foot Table)로 구성됩니다.

Template 컴포넌트 응답 바디

Template 컴포넌트의 응답 바디는 다음과 같습니다.

필드 타입 필수 여부 설명
type String Required 컴포넌트 유형
  • Template 컴포넌트일 경우 2가지 기본 컴포넌트 중 template만 사용 가능
title String Optional 컴포넌트 제목
  • 단문의 굵은 텍스트 (Short bold text)
subTitle String Optional 하위 컴포넌트 제목
  • 단문의 회색 텍스트 (Short gray text)
data Object Optional 템플릿(Template) 컴포넌트 구성 정보
data.cover Object Required 커버(Cover) 정보
data.description String Optional 컴포넌트 상세 설명
  • 장문의 텍스트
data.contentBackgroundImage String Optional 콘텐츠 테이블 영역에 표시되는 배경 이미지 URL
  • 반드시 https 형식의 URL이어야 함
data.contentTable Array Optional contentTable 상세 정보
  • 2차원 셀 배열
  • 최대 3행까지 설정 가능
  • 추가적인 내용은 Basic 컴포넌트 참조
data.footBackgroundImage String Optional 풋(Foot) 테이블 영역에 표시되는 배경 이미지 URL
  • 반드시 https 형식의 URL이어야 함
data.footTable Array Optional footTable 상세 정보
  • 구성 요소는 contentTable과 동일하지만 contentTable이 존재해야만 표시될 수 있음
data.footTableShowRows Integer Optional 최대 행 수
  • 행 수가 최대 값보다 많을 경우 최대 행을 표시하고 접어야 하며 확장 버튼을 추가해야 함
  • 미설정 시 모든 행 표시
data.action Action Optional 컴포넌트 액션(Action) 정보
  • 각 액션마다 세부 내용이 상이하므로 자세한 설명은 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 컴포넌트 액션 세부 정보
  • 각 액션마다 세부 내용이 상이하므로 자세한 설명은 Action 컴포넌트 참조

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 고정 메뉴 유형
  • Template 컴포넌트일 경우 2가지 기본 컴포넌트 중 template만 사용 가능
title String Optional 고정 메뉴 이름
  • 채팅바에 표시됨
data Object Optional 고정 메뉴 구성 정보
  • cover 사용하지 않음
data.contentBackgroundImage String Conditional 콘텐츠 테이블 영역에 표시되는 배경 이미지 URL
  • contentTable 내 image 컴포넌트가 있을 경우에만 표시
  • 반드시 https 형식의 URL이어야 함
data.contentTable Array Conditional contentTable 상세 정보
  • footTable은 사용되지 않음

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 컴포넌트 액션 세부 정보
  • 각 액션마다 세부 내용이 상이하므로 자세한 설명은 Action 컴포넌트 참조

Persistent Menu 응답 예시

Persistent Menu의 응답 예시는 다음과 같습니다.

{
    "type": "template",
    "title": "persistentMenu",
    "data": {
        "contentBackgroundImage": "url",
        "contentTable": []
    }
}

Carousel 컴포넌트

Carousel 컴포넌트는 동일한 형식이 반복되는 캐로셀(Carousel) 답변이 구성됩니다.

Carousel 컴포넌트 응답 바디

Carousel 컴포넌트의 응답 바디는 다음과 같습니다.

필드 타입 필수 여부 설명
type String Required 컴포넌트 유형
  • Carousel 컴포넌트일 경우 2가지 기본 컴포넌트 중 carousel만 사용 가능
title String Optional 컴포넌트 제목
  • 단문의 굵은 텍스트 (Short bold text)
subTitle String Optional 하위 컴포넌트 제목
  • 단문의 회색 텍스트 (Short gray text)
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": [{}]
    }
}