Carousel and Card list Directive
- Rajkiran Alla (Deactivated)
Prerequisites
URLs of the images from Orbita backend. see How do I upload an image? for more information.
To render the carousel and card list, you should switch to chatbot version - v2 in Bot view template node.
Carousel
The Carousel directive lets you render the data in the form of a carousel. There are 2 types of carousels available.
Carousel
Sample flow
Copy the following code into a function node to enable the Carousel in the chatbot.
msg.payload.orbita.directive= [
{
"type": "carousel",
"items": [
{
"reviews": {
"rating": 2.5,
"label": "Reviews label",
"count": 20000
},
"title": "Title for Carousel Option 1",
"description": "Description for Carousel Option 1",
"image": {
"alternateText": "OE",
"url": "https://orbita.ai/wp-content/uploads/2017/08/vxhero_bg_v2.jpg"
},
"detailView": {
"title": "Title of detailed view",
"description": "Description of detailed view",
"image": {
"url": "https://orbita.ai/wp-content/uploads/2017/08/vxhero_bg_v2.jpg",
"alternateText": "OE"
},
"buttons": [
{
"text": "Button Text",
"type": "link",
"value": "https://yourdomain/buttonlink/"
}
]
},
}
]
}
]
return msg;Sample Image
Bootstrap Carousel
Sample flow
Copy the following code into a function node to enable the Bootstrap Carousel in the chatbot.
msg.payload.orbita.directive= [
{
"type": "bootstrapcarousel",
"items": [
{
"reviews": {
"rating": 2.5,
"label": "Reviews label",
"count": 20000
},
"title": "Title for Carousel Option 1",
"description": "Description for Carousel Option 1",
"image": {
"alternateText": "OE",
"url": "https://orbita.ai/wp-content/uploads/2017/08/vxhero_bg_v2.jpg"
},
"detailView": {
"title": "Title of detailed view",
"description": "Description of detailed view",
"image": {
"url": "https://orbita.ai/wp-content/uploads/2017/08/vxhero_bg_v2.jpg",
"alternateText": "OE"
},
"buttons": [
{
"text": "Button Text",
"type": "link",
"value": "https://yourdomain/buttonlink/"
}
]
},
}
]
}
]
return msg;Sample Image
The bootstrap carousel will render only one carousel item, with design changes with navigation arrows, irrespective of the page width.
Parameters used for Carousel
Property | Description |
|---|---|
| This property accepts |
| The items property is used to fill the carousel options. Each carousel option can have the below properties.
|
| The Title of the carousel option. |
| This is an optional property. You can show the rating on the carousel options and in the detailed view using this property.
|
| The description of the Carousel Option. |
| Paste the appropriate image URL that you uploaded to Orbita. Recommended size is 225px width and 135px height. |
| Clicking on the Carousel option will open the detailed view window. The below mentioned are the properties it contains.
|
Carousel options
The below image shows where each property would be rendered on a carousel.
detailedView of the carousel
The below image shows where each property would be rendered on the detailedView of the carousel.
Card
The Card directive lets you render the data in the form of a list.
Sample flow
Copy the following code into a function node to enable the Card in the chatbot.
if(!msg.payload.orbita) {
msg.payload.orbita = {}
}
msg.payload.orbita.directive= [
{
"type": "cardlist",
"items": [
{
"title": "Title for Card Option 1",
"reviews": {
"rating": 1.5,
"label": "Reviews label 1",
"count": 20000
},
"appointmentDetails": {
"dateHeader": "Small description for your card option",
"lineItems": [
{
"title": "Line item 1",
"description": "Line item desc 1"
},
{
"title": "Line item 1",
"description": "Line item desc 2"
}
]
},
"image": {
"alternateText": "OE",
"url": "https://s3.amazonaws.com/orbitahealth/clients/sandbox5/assets/dynamic/images/smallimage192c03a10-384d-11ea-9e3c-4750e1188599.jpg"
},
"detailView": {
"title": "Title of detailed view 1",
"description": "Description of detailed view 1",
"image": {
"url": "https://orbita.ai/wp-content/uploads/2017/08/vxhero_bg_v2.jpg",
"alternateText": "OE"
},
"buttons": [
{
"text": "Button Text 1",
"type": "link",
"value": "https://yourdomain/buttonlink/"
}
],
},
}
]
}
]
return msg;Parameters used for Card
Property | Description |
|---|---|
| The type property should be set “cardlist” |
| The items property is used to fill the cards in the card list. Each card option can have the below properties.
|
| The Title of the card option. |
| Paste the appropriate image URL that you uploaded to Orbita. Recommended size is 72px width and 92px height. |
| Under the appointment details object, you can give the following:
|
| Clicking on the Carousel option will open the detailed view window. The below mentioned are the properties it contains.
|
| This is an optional property. For the card list, you can show the rating only on the detailed view.
|
Card option
The below image shows where each property would be rendered on a card.
Detailed View of Card
The below image shows where each property would be rendered on a detailed view of the card.