Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Snippet

Code Block
languagejs
{
	    "type": "card",
    	"items": [{
		"content
            "title": `<h1>Card"Card componentDetail One<h1>`,
		"detailView": {
			"title": "Card Detail title",
			"content": `<h1> Card detail view ${i+1} </h1>`,
			title",
            "imageURL": "example.com/hospitalone",  //optional
            "body": "A sample description of the Hospital and its services",
            "button": "Check more details",  //optional
            "html": "<p>provide the full HTML data</p>", // optional
            "detailDisplay": [{
				
                "type": "Accordion",
				
                "items": [{
					
                    "title": "Accordion One",
					
                    "body": `<p> Lorem Ipsum is simply dummy text</p>`
				                }, {
					
                    "title": "Accordion Two",
					
                    "body": `<p> Lorem Ipsum is simply dummy text</p>`
				}]
			}]
		}
	}, {
		"content": `<h1>Card component Two<h1>`,
		"detailView": {
			"title": "Card Detail title",
			"content": `<h1> Card detail view ${i+1} </h1>`,
			
                }]
            }]
        }
    },
    {
        "title": "Card Detail title",
        "imageURL": "", //optional
        "body": "",
        "button": "", //optional
        "html": "", // optional
        "detailDisplay": [{
				
            "type": "Accordion",
				
            "items": [{
					
                "title": "Accordion three",
					
                "body": `<p> Lorem Ipsum is simply dummy text</p>`
				
            }, {
					
                "title": "Accordion four",
					
                "body": `<p> Lorem Ipsum is simply dummy text</p>`
				}]
			}]
		}
	            }]
        }]
    }
}],
	"filterButton": false
}


Please add the above snippet in the Chatbot Settings under the directive object or use the Function node in the Experience Designer to construct the msg.payload.orbita.directive to prepare the Directive data. The latter takes priority over the former method.

...

Property

Description

"type": "card"

This property accepts card as the option to identify this directive as Card.

"items": [{
"content": {...}
"title": "",
"imageURL": "", // optional
"body": "",
"detailViewbutton": {"", // optional
"contenthtml": {...}"", // optional
}
],

The items property holds an Array of Card data and this is displayed on the Bot. Each Card object can have the below properties.

  • content

  • detailView

    • content

"content": {}

This property will hold the HTML content to render the main Card data.

Sample:
"content": `<h1> Card ${i+1} </h1> <img src='https://ucarecdn.com/05f649bf-b70b-4cf8-90f7-2588ce404a08/' class='d-block w-100' alt='image'>`. The properties are tied to default CSS styles.

  • title - Title for the Card to be given here

  • imageURL - An Image URL should be provided here

  • body- The main body for the Card to be provided. It will use default styling on the Card

  • button- Action item can be given here.

  • html- This property holds the full Card content in HTML format. This property takes priority over other properties above.

"detailView": {
"content": {...}

}

The property detailView defines the content for the Detail view of the Card.

The properties inside this, namely the content works the same way defined for the main card.

"filterButton": false

The functionality for the Filter page is under development. Please have the property set to false until further change.

...