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

AuthorMessageSettings

configuration

User-specific message settings applied to messages sent by the current user (author). These settings override the global display options like showAvatar, showUsername, and messageWidthMode for author messages only. See also receiverMessageSettings.

The object accepts the following properties:

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

authorMessageSettings

Object

Default: null

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "Author message without avatar or username.",
        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 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",
    authorMessageSettings: {
        showAvatar: false,
        showUsername: false,
        messageContentTemplate: function(message) {
            return '<div style="background:#e3f2fd;padding:8px;border-radius:12px;">' +
                   kendo.htmlEncode(message.text) + '</div>';
        }
    },
    dataSource: messagesData
});
</script>