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.
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. 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 }, "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 |
---|
The type property should be set “carousel”
filterButton
The filterButtons property should be set to false.
...
| 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/" } ], }, } ] } ] 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 |
...
description
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.
Sample flow
Attachments | ||||||||
---|---|---|---|---|---|---|---|---|
|
Related Articles
Filter by label (Content by label) | ||||||||
---|---|---|---|---|---|---|---|---|
|