Prerequisites
URL 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",
"filterButton": false,
"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://orbita.ai/request-a-demo/"
}
]
},
}
]
}
]
return msg;
Parameters used for Carousel
Type
The type property should be set “carousel”
filterButton
The filterButtons property should be set to false.
items
The items property is used to fill the carousel options. Each carousel option can have the below properties.
reviews
This is an optional property. You can show the rating on the carousel options.
rating - This rating is the calculated rating value. The rating stars will get filled based on the number given here. (hardcoded to 2.5 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.
title
The Title of the carousel option.
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.
