| Table of Contents | |
|---|---|
|
...
|
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.
...
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.
...
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.
| Code Block |
|---|
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.
| Code Block |
|---|
msg.payload.orbita.directive= [ { "type": "bootstrapcarousel", "items": [ |
...
|
...
{ "reviews": { |
...
"rating": 2.5, |
...
"label": "Reviews label", |
...
"count": 20000 |
...
}, |
...
|
...
|
...
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.
...
"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.
| Code Block |
|---|
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/" |
...
|
...
} |
...
|
...
|
...
|
...
], |
...
|
...
}, |
...
|
...
|
...
|
...
|
...
|
...
} ] } ] |
...
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.
...
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.
|
...
value - redirect link.
...
| |
| 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.
Sample flow
| Attachments | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Related Articles
| Filter by label (Content by label) | ||||||||
|---|---|---|---|---|---|---|---|---|
|