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

ReceiverMessageSettings

configuration

User-specific message settings applied to messages received from other users. These settings override the global display options like showAvatar, showUsername, and messageWidthMode for receiver messages only. See also authorMessageSettings.

The object accepts the following properties:

showAvatar - Boolean - Whether to show the avatar for receiver messages.
showUsername - Boolean - Whether to show the username for receiver messages.
messageWidthMode - String - Message width mode: "standard" or "full".
allowMessageCollapse - Boolean - Whether receiver messages can be collapsed.
messageTemplate - Function - Template override for receiver messages. Receives the same arguments as messageTemplate.
messageContentTemplate - Function - Content template override for receiver messages. Receives the current message object.
enableFileActions - Boolean - Whether file actions are enabled for receiver messages.
enableContextMenuActions - Boolean - Whether context menu actions are enabled for receiver messages.
messageToolbarActions - Array - Toolbar actions specific to receiver messages.
messageActions - Array - Context menu actions specific to receiver messages.

receiverMessageSettings

Object

Default: null

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "Author message (standard width).",
        authorId: "user1",
        authorName: "John Doe",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
        timestamp: new Date(2026, 0, 1, 9, 0)
    },
    {
        id: 2,
        text: "Receiver message (full width, with avatar and username).",
        authorId: "user2",
        authorName: "Jane Smith",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg",
        timestamp: new Date(2026, 0, 1, 9, 5)
    }
];

$("#chat").kendoChat({
    authorId: "user1",
    receiverMessageSettings: {
        showAvatar: true,
        showUsername: true,
        messageWidthMode: "full",
        messageTemplate: function(message) {
            return '<div style="display:flex;gap:8px;max-width:70%;">' +
                   '<img src="' + (message.author.imageUrl || '') + '" style="width:32px;height:32px;border-radius:50%;" />' +
                   '<div>' +
                   '<small style="color:#999;">' + kendo.htmlEncode(message.author.name || "") + '</small>' +
                   '<div style="background:#f0f0f0;padding:10px;border-radius:0 16px 16px 16px;">' +
                   kendo.htmlEncode(message.text) + '</div></div></div>';
        }
    },
    dataSource: messagesData
});
</script>