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

Messages

configuration

Allows localization of the strings that are used in the component.

messages

Object

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "Welcome! Notice the custom placeholder text and send button text.",
        authorId: "admin",
        authorName: "Admin",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
        timestamp: new Date(2026, 0, 1, 9, 0)
    },
    {
        id: 2,
        text: "Thanks! The custom messages make the interface more personalized.",
        authorId: "user",
        authorName: "User",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg",
        timestamp: new Date(2026, 0, 1, 9, 5)
    }
];

$("#chat").kendoChat({
    messages: {
        placeholder: "Type your message here...",
        actionButton: "Send"
    },
    authorId: "user",
    dataSource: messagesData
});
</script>

messages.downloadAll

String

The text for the download all files button.

Default: "Download all"

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "Here are the documents you requested.",
        authorId: "support",
        authorName: "Support Agent",
        timestamp: new Date(2026, 0, 1, 9, 0),
        files: [
            { name: "document1.pdf", size: 1024000, url: "path/to/document1.pdf" },
            { name: "document2.pdf", size: 2048000, url: "path/to/document2.pdf" }
        ]
    }
];

$("#chat").kendoChat({
    messages: {
        downloadAll: "Download all files"
    },
    authorId: "user",
    dataSource: messagesData
});
</script>

messages.fileButton

String

The title and aria-label for the file attachment button.

Default: "Attach file"

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    messages: {
        fileButton: "Upload file"
    },
    authorId: "user",
    fileAttachment: true
});
</script>

messages.fileMenuButton

String

The title and aria-label for the button that opens the context menu for file attachments.

Default: "File menu"

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "Here's the document you requested.",
        authorId: "support",
        authorName: "Support Agent",
        timestamp: new Date(2026, 0, 1, 9, 0),
        files: [{
            name: "document.pdf",
            size: 1024000,
            url: "path/to/document.pdf"
        }]
    }
];

$("#chat").kendoChat({
    messages: {
        fileMenuButton: "File options"
    },
    authorId: "user",
    dataSource: messagesData
});
</script>

messages.messageListLabel

String

The aria-label for the message list container.

Default: "Message list"

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "Welcome to our chat support!",
        authorId: "support",
        authorName: "Support Agent",
        timestamp: new Date(2026, 0, 1, 9, 0)
    }
];

$("#chat").kendoChat({
    messages: {
        messageListLabel: "Chat conversation"
    },
    authorId: "user",
    dataSource: messagesData
});
</script>

messages.otherMessageDeleted

String

The text displayed when another user's message has been deleted.

Default: "This message was removed by its sender."

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "This message will be deleted",
        authorId: "support",
        authorName: "Support Agent",
        timestamp: new Date(2026, 0, 1, 9, 0),
        isDeleted: true
    }
];

$("#chat").kendoChat({
    messages: {
        otherMessageDeleted: "Message was removed by the sender."
    },
    authorId: "user",
    dataSource: messagesData
});
</script>

messages.pinnedMessageCloseButton

String

The title and aria-label for the button that unpins a pinned message.

Default: "Unpin message"

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "This is an important message that was pinned.",
        authorId: "support",
        authorName: "Support Agent",
        timestamp: new Date(2026, 0, 1, 9, 0),
        isPinned: true
    }
];

$("#chat").kendoChat({
    messages: {
        pinnedMessageCloseButton: "Remove pin"
    },
    authorId: "user",
    dataSource: messagesData
});
</script>

messages.placeholder

String

The placeholder text displayed in the message input field.

Default: "Type a message..."

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "Notice the custom placeholder text in the input field below!",
        authorId: "admin",
        authorName: "Admin",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
        timestamp: new Date(2026, 0, 1, 9, 0)
    },
    {
        id: 2,
        text: "I can see it says 'Enter your message...' instead of the default text.",
        authorId: "user",
        authorName: "User",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg",
        timestamp: new Date(2026, 0, 1, 9, 5)
    }
];

$("#chat").kendoChat({
    messages: {
        placeholder: "Enter your message..."
    },
    authorId: "user",
    dataSource: messagesData
});
</script>

messages.replyMessageCloseButton

String

The title and aria-label for the button that removes a reply reference when composing a message.

Default: "Remove reply"

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "How can I help you today?",
        authorId: "support",
        authorName: "Support Agent",
        timestamp: new Date(2026, 0, 1, 9, 0)
    }
];

$("#chat").kendoChat({
    messages: {
        replyMessageCloseButton: "Cancel reply"
    },
    authorId: "user",
    dataSource: messagesData
});
</script>

messages.selfMessageDeleted

String

The text displayed when the user deletes their own message.

Default: "You removed this message."

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "Delete this message to see the selfMessageDeleted property.",
        authorId: "user",
        authorName: "Current User",
        timestamp: new Date(2026, 0, 1, 9, 0)
    }
];

$("#chat").kendoChat({
    messages: {
        selfMessageDeleted: "You deleted this message."
    },
    authorId: "user",
    dataSource: messagesData
});
</script>

messages.sendButton

String

The title and aria-label for the send button.

Default: "Send message"

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "Look at the send button - it says 'Send now' instead of the default text!",
        authorId: "admin",
        authorName: "Admin",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
        timestamp: new Date(2026, 0, 1, 9, 0)
    },
    {
        id: 2,
        text: "That's a nice customization for the send button tooltip!",
        authorId: "user",
        authorName: "User",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg",
        timestamp: new Date(2026, 0, 1, 9, 5)
    }
];

$("#chat").kendoChat({
    messages: {
        sendButton: "Send now"
    },
    authorId: "user",
    dataSource: messagesData
});
</script>

messages.sendButtonLoading

String

The title and aria-label for the send button when in loading state.

Default: "Stop"

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    messages: {
        sendButtonLoading: "Stop generation"
    },
    authorId: "user"
});
</script>

messages.speechToTextButton

String

The title and aria-label for the speech-to-text button.

Default: "Toggle speech to text"

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    messages: {
        speechToTextButton: "Start voice input"
    },
    authorId: "user",
    speechToText: {
        enable: true
    }
});
</script>