Versions Compared

Old Version 1

changes.mady.by.user Bharathi Manohar

Saved on

compared with

New Version 2

changes.mady.by.user Bharathi Manohar

Saved on

Key

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

...

The Card directive lets you render the data in the form of a card component. This directive can be used for various purposes, besides Provider or Location cards. This could hold any HTML content within it.

...

Snippet

...

This Card directive renders a layout primarily for the User to render their custom content on the Card. Unlike the Bootstrap carousel or the Cardlist directive, this Card directive does not have predefined properties that control what is rendered on the Card.

Sample

...

Snippet

Code Block
{
    "type": "card",
    "items": [{
            "content": `<h1>main card 1<h1>`,
            "contentUrl": url, 
            "detailView": {
                "content": `<h1> Card detail view 1</h1>`,
                "contentUrl": url 
            }
        },
        {
            "content": `<h1>main card 2<h1>`,
            "contentUrl": url, 
            "detailView": {
                "content": `<h1> Card detail view 2</h1>`,
                "contentUrl": url 
            }
        }
    ],
    "filterButton": false
}

Please add the above snippet in the Chatbot Settings under the directive object.

The Card component will render only one card item with navigation arrows, irrespective of the page screen width. User can use the buttons to navigate to other cards.

Parameters used for Carousel

Property

Description

"type": "carouselcard"

This property accepts carousel, bootstrapcarousel, and card options card as the option to identify this directive as Card.

"items": [{
"reviewscontent": {...},
"titlecontentUrl": "title"{...},
"descriptiondetailView": "desc",{
"imagecontent": {...},
"detailViewcontentUrl": {...},
}
}],

The items property is used to fill the carousel options. Each carousel option holds an Array of Card data and this is displayed on the Bot. Each Card object can have the below properties.

  • reviewscontent

  • titlecontentUrl

  • descriptiondetailViewimage

    • content

    detailView

    • contentUrl

"titlecontent": "Title for Carousel",

The Title of the carousel option.

"reviews": {
"rating": 2.5,
"label": "Reviewslabel",
"count": 20000
}

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)

"description": "Description for Carousel Option",

The description of the Carousel Option.

"image": {
"alternateText": "altimg",
"url": "Imageurl"
}

Paste the appropriate image URL that you uploaded to Orbita. Recommended size is 225px width and 135px height.

"detailView": {
"title": "Detailed title",
"description": "Detail Desc",
"image": {
"url": "ImgURL",
"alternateText": "OE"
},
"buttons": [{
"text": "Button Text",
"type": "link",
"value": "URL"
}]
}

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.

  • review - The review object will be rendered in the detailed view to show the rating.

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.

...

Sample flow

...

{}

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'>`

"contentUrl": {}

This property is optional. This can be used to host the content in a template and we must specify the endpoint here. The card will render from that endpoint.

This property take priority over the content property. This is to render the main card.

Sample:

"contentUrl": "http://localhost:3030/oeapi/html"

"detailView": {
"content": {...},
"contentUrl": {...},

}

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

The properties inside this, namely the content and contentUrl works like the same 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.

Related Articles

Filter by label (Content by label)
showLabelsfalse
max5
showSpacefalse
cqllabel = "experience-managerdirective"