Composite

Article summary

Did you find this summary helpful?

Thank you for your feedback

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	Required	Component type Only `template` is available among the 2 basic components for the Template component
`title`	String	Optional	Component title Short bold text
`subTitle`	String	Optional	Subcomponent title Short gray text
`data`	Object	Optional	Template component configuration information
`data.cover`	Object	Required	Cover information
`data.description`	String	Optional	Component detailed descriptions Long text
`data.contentBackgroundImage`	String	Optional	Background image URL displayed in the content table area Must be a URL of `https` format
`data.contentTable`	Array	Optional	contentTable details Two-dimensional cell array Up to three rows can be set For more information, see Basic component
`data.footBackgroundImage`	String	Optional	Background image URL displayed in the foot table area Must be a URL of `https` format
`data.footTable`	Array	Optional	footTable details Components are identical to `contentTable` but can only be displayed if `contentTable` exists
`data.footTableShowRows`	Integer	Optional	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	Optional	Component action information Each action type has different details, so see Action component

`Table`

The following describes Table.

Field	Type	Required	Description
`rowSpan`	Integer	Required	Number of rows occupied by cells in the table (span)
`colSpan`	Integer	Required	Number of columns occupied by cells in the table (span)
`data`	Object	Optional	`data` area information of the Template component See Basic component for more information `text`, `image`, `button`
`data.type`	String	Conditional	Component type
`data.title`	String	Conditional	Component name
`data.subTitle`	String	Conditional	Subcomponent name
`data.data`	Object	Conditional	Subcomponent configuration information
`data.data.type`	String	Conditional	Subcomponent type
`data.data.iconUrl`	String	Conditional	Icon URL address
`data.data.action`	Object	Conditional	Component action information
`data.data.action.type`	String	Conditional	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	Conditional	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	Required	Persistent menu type Only `template` is available among the 2 basic components for the Template component
`title`	String	Optional	Persistent menu name Displayed on the chatbar
`data`	Object	Optional	Persistent menu configuration information `cover` is not used
`data.contentBackgroundImage`	String	Conditional	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	Conditional	contentTable details `footTable` is not used

`contentTable`

The following describes data.contentTable.

Field	Type	Required	Description
`rowSpan`	Integer	Required	Number of rows occupied by cells in the table (span)
`colSpan`	Integer	Required	Number of columns occupied by cells in the table (span)
`data`	Object	Optional	Component configuration information See Basic component for more information
`data.type`	String	Conditional	Component type
`data.title`	String	Conditional	Component name
`data.subTitle`	String	Conditional	Subcomponent name
`data.data`	Object	Conditional	Subcomponent configuration information
`data.data.type`	String	Conditional	Subcomponent type
`data.data.action`	Object	Conditional	Component action information
`data.data.action.type`	String	Conditional	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	Conditional	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	Required	Component type Only `carousel` is available among the 2 basic components for the Carousel component
`title`	String	Optional	Component title Short bold text
`subTitle`	String	Optional	Subcomponent title Short gray text
`data`	Object	Optional	Carousel component configuration information
`data.cards`	Array	Optional	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": [{}]
    }
}

Was this article helpful?

What's Next

Flex

Table of contents

Template component
Carousel component