Composite

Available in Classic and VPC

This document describes the Composite component of the response components of a chatbot answer.

The Composite component consists of the following two basic components.

Template:
Carousel (The Carousel component includes the Persistent Menu component.)

These components allow you to set the chatbot's response to each feature in Chatbot Builder, and return the response results in JSON format.

Template component

The Template component consists of cover, content table, and foot table.

Template component response body

The following is the response body of the Template component.

Field	Type	Required	Description
`type`	String	-	Component type Only `template` is available among the 2 basic components for the Template component
`title`	String	-	Component title Short bold text
`subTitle`	String	-	Subcomponent title Short gray text
`data`	Object	-	Template component configuration information
`data.cover`	Object	-	Cover information
`data.description`	String	-	Component detailed descriptions Long text
`data.contentBackgroundImage`	String	-	Background image URL displayed in the content table area Must be a URL of `https` format
`data.contentTable`	Array	-	contentTable details Two-dimensional cell array Up to three rows can be set For more information, see Basic component
`data.footBackgroundImage`	String	-	Background image URL displayed in the foot table area Must be a URL of `https` format
`data.footTable`	Array	-	footTable details Components are identical to `contentTable` but can only be displayed if `contentTable` exists
`data.footTableShowRows`	Integer	-	Maximum number of rows If the number of rows is greater than the maximum, the maximum rows should be displayed and collapsed, and an expand button should be added Display all rows when not set
`data.action`	Action	-	Component action information Each action type has different details, so see Action component

`Table`

The following describes Table.

Field	Type	Required	Description
`rowSpan`	Integer	-	Number of rows occupied by cells in the table (span)
`colSpan`	Integer	-	Number of columns occupied by cells in the table (span)
`data`	Object	-	`data` area information of the Template component See Basic component for more information `text`, `image`, `button`
`data.type`	String	-	Component type
`data.title`	String	-	Component name
`data.subTitle`	String	-	Subcomponent name
`data.data`	Object	-	Subcomponent configuration information
`data.data.type`	String	-	Subcomponent type
`data.data.iconUrl`	String	-	Icon URL address
`data.data.action`	Object	-	Component action information
`data.data.action.type`	String	-	Component action type `postback` \| `utterance` \| `link` \| `phone` \| `welcome` `postback`: See Postback component `utterance`: See Utterance component `link`: See Link component `phone`: See Phone component `welcome`: See Welcome component
`data.data.action.data`	Object	-	Component action details Each action type has different details, so see Action component

Template component response example

The following is a sample response of the Template component.

{
    "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 component

The Persistent Menu component is displayed when the user taps the menu button in the chatbar, and is always included in the Open response. Other responses that don't change utils contain the permanentMenu content.

Persistent Menu response body

The following is the response body of Persistent Menu.

Field	Type	Required	Description
`type`	String	-	Persistent menu type Only `template` is available among the 2 basic components for the Template component
`title`	String	-	Persistent menu name Displayed on the chatbar
`data`	Object	-	Persistent menu configuration information `cover` is not used
`data.contentBackgroundImage`	String	-	Background image URL displayed in the content table area Displayed only if the `image` component exists in `contentTable` Must be a URL of `https` format
`data.contentTable`	Array	-	contentTable details `footTable` is not used

`contentTable`

The following describes data.contentTable.

Field	Type	Required	Description
`rowSpan`	Integer	-	Number of rows occupied by cells in the table (span)
`colSpan`	Integer	-	Number of columns occupied by cells in the table (span)
`data`	Object	-	Component configuration information See Basic component for more information
`data.type`	String	-	Component type
`data.title`	String	-	Component name
`data.subTitle`	String	-	Subcomponent name
`data.data`	Object	-	Subcomponent configuration information
`data.data.type`	String	-	Subcomponent type
`data.data.action`	Object	-	Component action information
`data.data.action.type`	String	-	Component action type `postback` \| `utterance` \| `link` \| `phone` \| `welcome` `postback`: See Postback component `utterance`: See Utterance component `link`: See Link component `phone`: See Phone component `welcome`: See Welcome component
`data.data.action.data`	Object	-	Component action details Each action type has different details, so see Action component

Persistent Menu response example

The following is a sample response of Persistent Menu.

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

Carousel component

The Carousel component consists of a carousel of answers that repeat the same format.

Carousel component response body

The following is the response body of the Carousel component.

Field	Type	Required	Description
`type`	String	-	Component type Only `carousel` is available among the 2 basic components for the Carousel component
`title`	String	-	Component title Short bold text
`subTitle`	String	-	Subcomponent title Short gray text
`data`	Object	-	Carousel component configuration information
`data.cards`	Array	-	Information about the cards that make up the carousel Each card has different details, so see Basic component, Composite component, and Flex component for more information

Carousel component response example

The following is a sample response of the Carousel component.

{
    "type": "carousel",
    "title": "optional, short bold text",
    "subTitle": "optional, short gray text",
    "data" : 
    {
        "cards": [{}]
    }
}