Prerequisites
URLs of the images from Orbita backend.
To render the carousel and card list, you should switch to chatbot version - v2 in Bot view template node.
Upload an image to Orbita
To upload an image to Orbita,
Login to Orbita and navigate to Experience Designer.
You can use any available say node on the canvas. If needed, drop a say node from the canvas and double click to open node properties.
Go to the Text tab and click on the Image upload button.
Go to the Upload tab and click on the Choose file.
Click on Send it to the Server to get the URL of the uploaded image.
Note the URL. You have to use this URL in the Function nodes.
Click on the Browse Server button to browse the images that are already uploaded to the backend.
Choose an image from the asset browser and click on OK.
The URL of the selected Image can be taken from the Image Property dialog box.
Click on OK to upload the image successfully to the backend.
Carousel
The Carousel directive lets you render the data in the form of a 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;
Parameters used for Carousel
Type
The type property should be set “carousel”
items
The items property is used to fill the carousel options. Each carousel option can have the below properties.
title
The Title of the carousel option.
reviews
This is an optional property. You can show the rating on the carousel options and in the detailed view using this property.
rating - This is the calculated rating value. The rating stars will get filled based on the number given here. (hardcoded in the sample code).
label - You can set a custom name to the rating icon. (Can only be seen in Detailed view)
count - The total number of ratings received. (Can only be seen in Detailed view)
image
Paste the appropriate image URL that you uploaded to Orbita. Recommended size is 225px width and 135px height.
description
The description of the carousel option.
detailedView
Clicking on the Carousel option will open the detailed view window. The below mentioned are the properties it contains.
title - Title of the detailed view page.
description - Description of the detailed view page.
image - Recommended size is 620px width and 290px height.
buttons -You can set an optional floating button at the end of the detailed view using this property.
text - Button display name.
type - Button type (for example, “link”)
value - redirect link.
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
Type
The type property should be set “cardlist”
items
The items property is used to fill the cards in the card list. Each card option can have the below properties.
title
The Title of the card option.
image
Paste the appropriate image URL that you uploaded to Orbita. Recommended size is 72px width and 92px height.
appointmentDetails
dateHeader - The description of the card option.
lineItems - You can have a sectioned view in the detailed view screen using this property.
title - Title of the line item
description - Description of the line item.
detailedView
Clicking on the Carousel option will open the detailed view window. The below mentioned are the properties it contains.
title - Title of the detailed view page.
description - Description of the detailed view page.
image - Recommended size is 620px width and 290px height.
buttons - You can set an optional floating button at the end of the detailed view using this property.
text - Button display name.
type - Button type (for example, “link”)
value - redirect link.
reviews
This is an optional property. For the card list, you can show the rating only on the detailed view.
rating - This is the calculated rating value. The rating stars will get filled based on the number given here. (hardcoded in the sample code).
label - You can set a custom name to the rating icon.
count - The total number of ratings received.
