Default Cards | RadChat for ASP.NET AJAX Documentation
Edit this page

Default Cards

Rich cards are complex attachment messages that can contain additional message styling, templates, and images. The RadChat control supports the default heroCards template which can be displayed in the chat flow when calling the renderAttachments method of the control and pass heroCard as a value for the contentType property of an attachment.

Figure 1: A default HeroCard template.

chat with heroCard template

<telerik:RadChat runat="server" ID="RadChat1">
    <ClientEvents OnLoad="OnLoad"/>
    <MessagesSettings Placeholder="Type your message here..." />
    <UserSettings Name="John" IconUrl="avatar.png" />
</telerik:RadChat>
function OnLoad(sender, args) {
    var chat = sender;
    chat.renderAttachments({
        attachments: [{
            contentType: "heroCard",
            content: {
                title: "Attachment Title",
                subtitle: "Attachment Subtitle",
                text: "Some sample text to be shown inside the attachment to illustrate the image above.",
                images: [{
                    url: "mountain.png",
                    alt: "mountain"
                }]
            }
        }],
        attachmentLayout: "carousel"
    }, chat.get_user());
}

The layout of a collection of attachments can be:

  • Carousel - displays multiple cards horizontally. In this mode, you can browse the available cards with left/right swipe or with a click on a card and dragging sideways;
  • List - displays multiple cards vertically;

Figure 2: A Carousel cards layout.

carousel

Figure 3: A List cards layout.

list

To further customize the appearance of a card, you can also use Custom Templates and Custom Components articles.

See Also

Is this article helpful? No Yes
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy