All Components

Default Cards

The Chat provides Hero Cards which host a single large image and action buttons with text content, and which can be displayed in the Chat flow.

To display a heroCard, manually call the renderAttachments() method of the Chat.

<div id="vueapp">
    <kendo-chat ref="chat"></kendo-chat>
</div>
Vue.use(ChatInstaller);

new Vue({
    el: '#vueapp',
    mounted () {
      var chat = this.$refs.chat.kendoWidget()

      chat.renderAttachments({
        attachments: [{
            contentType: "heroCard",
            content: {
                title: "Attachment Title",
                subtitle: "Attachment Subtitle",
                text: "Sample text"
            }
        }],
        attachmentLayout: "carousel"
      }, chat.getUser())
    }
})
In this article