Overview

Rich Cards display media, text (title and subtitle), and actionable buttons in an interactive format. They can be rendered in two orientations: vertical and horizontal.

For vertical rich cards, media, title, subtitle, and buttons are stacked vertically.

Vertical Rich Card example image:

Vertical Rich Card example

For horizontal rich cards, the thumbnail image is aligned to the left of the text content.

Horizontal Rich Card example image:

Horizontal Rich Card example

JSON Template Properties

Property Name Description Type Required
type Specifies the orientation of the rich card. Must be either "vertical" or "horizontal". String Y
tag Must be set to "generic". String Y
elements An array containing the components of the rich card: image, text (title/subtitle), and button. Note that a rich card must have at least one media, title, or description (subtitle). Array Y
image Used to render media. The style.size property can be small, medium, or large. Object N
text Used for text fields. The tag property specifies if the text is a title or subtitle. Object N
button Actionable buttons added as suggestions. A rich card supports up to 4 buttons. For supported click actions (e.g., publishText, link, navigate), refer to the Suggested Actions Template and Quick Replies Template. Object N

Vertical Rich Card Example

{
    "type": "vertical",
    "tag": "generic",
    "elements": [
        {
            "type": "image",
            "url": "https://i.pinimg.com/736x/a0/67/5e/a0675e5161d7ae5be2550987f397a641--flower-shops-paper-flowers.jpg",
            "tooltip": "Resturant image",
            "style": {
                "size": "medium"
            }
        },
        {
            "type": "text",
            "tag": "title",
            "text": "Your reservation at The French Laundry",
            "tooltip": "Title"
        },
        {
            "type": "text",
            "tag": "subtitle",
            "text": "We're springing for joy that you'll be dining with us on Saturday, June 18th at 7:30pm. Please let us know if you have any dietary restrictions.",
            "tooltip": "subtitle"
        },
        {
            "type": "button",
            "tooltip": "Publish text example",
            "title": "Publish text example",
            "click": {
                "actions": [
                    {
                        "type": "publishText",
                        "text": "Published text button tap"
                    }
                ]
            }
        },
        {
            "type": "button",
            "tooltip": "Our Menu",
            "title": "Our Menu",
            "click": {
                "actions": [
                    {
                        "type": "link",
                        "uri": "https://www.liveperson.com",
                        "target": "blank"
                    }
                ]
            }
        },
        {
            "type": "button",
            "tooltip": "Open this link",
            "title": "French laundry Location",
            "click": {
                "actions": [
                    {
                        "type": "navigate",
                        "la": 51.503399,
                        "lo": -0.119519
                    }
                ]
            }
        },
        {
            "type": "button",
            "tooltip": "Call us",
            "title": "Call us",
            "click": {
                "actions": [
                    {
                        "type": "link",
                        "uri": "tel:+13125551234"
                    }
                ]
            }
        }
    ]
}

Horizontal Rich Card Example

{
    "type": "horizontal",
    "tag": "generic",
    "elements": [
        {
            "type": "image",
            "url": "https://i.pinimg.com/736x/a0/67/5e/a0675e5161d7ae5be2550987f397a641--flower-shops-paper-flowers.jpg",
            "tooltip": "Resturant image",
            "style": {
                "size": "medium"
            }
        },
        {
            "type": "text",
            "tag": "title",
            "text": "Your reservation at The French Laundry",
            "tooltip": "Title"
        },
        {
            "type": "text",
            "tag": "subtitle",
            "text": "We're springing for joy that you'll be dining with us on Saturday, June 18th at 7:30pm. Please let us know if you have any dietary restrictions.",
            "tooltip": "subtitle"
        },
        {
            "type": "button",
            "tooltip": "Publish text example",
            "title": "Publish text example",
            "click": {
                "actions": [
                    {
                        "type": "publishText",
                        "text": "Published text button tap"
                    }
                ]
            }
        },
        {
            "type": "button",
            "tooltip": "Our Menu",
            "title": "Our Menu",
            "click": {
                "actions": [
                    {
                        "type": "link",
                        "uri": "https://www.liveperson.com",
                        "target": "blank"
                    }
                ]
            }
        },
        {
            "type": "button",
            "tooltip": "Open this link",
            "title": "French laundry Location",
            "click": {
                "actions": [
                    {
                        "type": "navigate",
                        "la": 51.503399,
                        "lo": -0.119519
                    }
                ]
            }
        },
        {
            "type": "button",
            "tooltip": "Call us",
            "title": "Call us",
            "click": {
                "actions": [
                    {
                        "type": "link",
                        "uri": "tel:+13125551234"
                    }
                ]
            }
        }
    ]
}

Limitations

  • Title text can contain up to 200 characters.
  • Subtitle (description) text can contain up to 2000 characters.
  • Button title text can contain up to 25 characters.
  • A maximum of 4 buttons/suggestions can be added per rich card.