Card
The Card directive allows you to render data as a card component. Apart from Provider and Location cards, this directive may be used for a variety of applications. This could hold any HTML content within it.
This Card directive creates a layout that the User may use to display custom content on the Card. This Card directive, unlike the Bootstrap carousel or the Cardlist directive, has no preset parameters that regulate what is presented on the Card.
Sample
Snippet
{ "type": "card", "items": [{ "content": `<h1>main card 1<h1>`, "contentUrl": url, "detailView": { "content": `<h1> Card detail view 1</h1>`, "contentUrl": url } }, { "content": `<h1>main card 2<h1>`, "contentUrl": url, "detailView": { "content": `<h1> Card detail view 2</h1>`, "contentUrl": url } } ], "filterButton": false }
Please add the above snippet in the Chatbot Settings under the directive
object.
The Card directive can be used to display a single card. We can make a Carousel using this directive by adding more Card objects to the Array.
The Card component will render only one card item with navigation arrows, irrespective of the page screen width. User can use the buttons to navigate to other cards.
Parameters used for Carousel
Property | Description |
---|---|
| This property accepts |
| The items property holds an Array of Card data and this is displayed on the Bot. Each Card object can have the below properties.
|
| This property will hold the HTML content to render the main Card data. Sample: |
| This property is optional. This can be used to host the content in a template and we must specify the endpoint here. The card will render from that endpoint. This property take priority over the Sample:
|
| The property The properties inside this, namely the |
| The functionality for the Filter page is under development. Please have the property set to false until further change. |