Table of Contents | ||
---|---|---|
|
Card
The Card directive lets allows you to render the data in the form of as a card component. This directive can be used for various purposes, besides Provider or Location cardsApart 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 renders creates a layout primarily for that the User may use to render their display custom content on the Card. Unlike This Card directive, unlike the Bootstrap carousel or the Cardlist directive, this Card directive does not have predefined properties that control what is rendered has no preset parameters that regulate what is presented on the Card.
Sample
...
Snippet
Code Block | ||
---|---|---|
| ||
{ "type": "card", "items": [{ "title": "Card Detail title", "imageURL": "example.com/hospitalone", //optional "body": "A sample description of the Hospital and its services", "button": "Check more details", //optional "contenthtml": `<h1>main card 1<h1>`,"<p>provide the full HTML data</p>", // optional "detailDisplay": [{ "contentUrltype": url"Accordion", "detailViewitems": [{ "title": "Accordion One", "content "body": `<p> `<h1>Lorem Ipsum Cardis detailsimply viewdummy 1</h1>`,text</p>` }, { "title": "Accordion Two", "contentUrlbody": url `<p> Lorem Ipsum is simply dummy text</p>` }] }] } }, { { "title": "Card Detail title", "contentimageURL": `<h1>main card 2<h1>` "", //optional "body": "", "button": "", //optional "contentUrlhtml": url, "", // optional "detailDisplay": [{ "type": "Accordion", "detailViewitems": [{ "title": "Accordion three", "contentbody": `<p> `<h1>Lorem Ipsum Cardis detailsimply viewdummy 2</h1>`,text</p>` }, { "contentUrltitle": url "Accordion four", "body": `<p> Lorem Ipsum is simply dummy text</p>` } }] }], } }], "filterButton": false } |
Please add the above snippet in the Chatbot Settings under the directive
object or use the Function node in the Experience Designer to construct the msg.payload.orbita.directive
to prepare the Directive data. The latter takes priority over the former method.
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. The properties . content contentUrl detailView content are tied to default CSS styles.
|
| 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. |
Accordion
...
This property will hold the HTML content to render the main Card data.
Sample: "content": `<h1> Card ${i+1} </h1> <img src='https://ucarecdn.com/05f649bf-b70b-4cf8-90f7-2588ce404a08/' class='d-block w-100' alt='image'>`
...
"contentUrl": {}
...
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 content
property. This is to render the main card.
Sample:
"contentUrl": "http://localhost:3030/oeapi/html"
...
The Accordion component can be added as part of the Card’s detailed view. This is optional and will help render the accordion content.
The snippet used to explain the Card has the sample for the Accordion also.
...
Snippet
The below snippet is to highlight the Accordion component alone.
Code Block |
---|
"detailDisplay": [{
"type": "Accordion",
"method" : "flush",
"items": [{
"title": "Accordion three",
"body": `<p> Lorem Ipsum is simply dummy text</p>`
},
{
"title": "Accordion four",
"body": `<p> Lorem Ipsum is simply dummy text</p>`
}
]
}] |
Please add the above snippet in the Chatbot Settings under the card directive object or use the Function node in the Experience Designer to construct the msg.payload.orbita.directive
to prepare the Directive data. The latter takes priority over the former method. We can add an array of Accordion content inside the items
object as required.
Parameters used for Carousel
Property | Description |
---|---|
| This property accepts |
| This property accepts values |
|
|
| The |
detailView
defines the content for the Detail view of the Card. The properties inside this, namely the content
and contentUrl
works like the same defined for the main card.
"filterButton": false
items property holds an Array of Accordion data and this is displayed on the detailed page. The
|
Tabs
The Tabs component can be added as part of the Card directive’s detailed view. This component is optional and will help render the Tabs content. The component is tightly coupled with the Card directive detail page.
...
Snippet
The below snippet is to highlight the Tab component along with the Accordion component.
Code Block |
---|
{
"type": "card",
"items": [{
"content": `<h1>Card component Two<h1>`,
"detailView": {
"title": "Card Detail title",
"content": `<h1> Card detail view ${i+1} </h1>`,
"detailDisplay": [{
type: "Tab",
items: [{
title: "Tab one",
content: "<p>sample tab one</p>",
},
{
title: "Tab two",
content: "<p>sample tab two</p>"
}]
},{
"type": "Accordion",
"items": [{
"title": "Accordion three",
"body": `<p> Lorem Ipsum is simply dummy text</p>`
}]
}
]
}
}],
"filterButton": false
} |
Please add the above snippet in the Chatbot Settings under the card directive object or use the Function node in the Experience Designer to construct the msg.payload.orbita.directive
to prepare the Directive data. The latter takes priority over the former method. We can add an array of Tab content inside the items
object as required.
Parameters used for Carousel
Property | Description |
---|---|
| This property accepts |
| The items property holds an Array of Tab data and this is displayed on the detailed page. The
|
Related Articles
Filter by label (Content by label) | ||||||||
---|---|---|---|---|---|---|---|---|
|