New to Kendo UI for jQuery? Start a free 30-day trial

AttachmentLayout

configuration

Sets the default layout mode for rich attachments (cards, images) within messages. Individual messages can override this setting via their attachmentLayout data property.

attachmentLayout

String

Default: "list"

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "Here are your options:",
        authorId: "bot",
        authorName: "Bot",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
        timestamp: new Date(2026, 0, 1, 9, 0),
        attachments: [
            { contentType: "card", title: "Option A", subtitle: "First choice" },
            { contentType: "card", title: "Option B", subtitle: "Second choice" }
        ]
    }
];

$("#chat").kendoChat({
    attachmentLayout: "carousel",
    authorId: "user1",
    dataSource: messagesData
});
</script>