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

Suggestions

configuration

Defines the collection of suggested messages that users can quickly select. These appear as clickable buttons below the message input area, allowing users to send common responses quickly.

suggestions

Array

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "Hello! How can I help you today?",
        authorId: "assistant",
        authorName: "Virtual Assistant",
        timestamp: new Date()
    }
];

$("#chat").kendoChat({
    suggestions: [
        { text: "I need help with my order" },
        { text: "Tell me about your services" },
        { text: "Contact support" }
    ],
    authorId: "user",
    dataSource: messagesData,
    suggestionClick: function(e) {
        console.log("User selected suggestion:", e.text);
    }
});
</script>

suggestions.text

String

The text of the suggestion.

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "How would you rate our service today?",
        authorId: "support",
        authorName: "Support Agent",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
        timestamp: new Date(2026, 0, 1, 9, 0)
    },
    {
        id: 2,
        text: "I'm happy to help with any questions!",
        authorId: "user2",
        authorName: "Customer",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg",
        timestamp: new Date(2026, 0, 1, 9, 5)
    }
];

$("#chat").kendoChat({
    suggestions: [
        { text: "Excellent" },
        { text: "Good" },
        { text: "Average" },
        { text: "Poor" },
        { text: "I need more help" },
        { text: "Thank you" }
    ],
    authorId: "user2",
    dataSource: messagesData,
    suggestionClick: function(e) {
        console.log("User selected suggestion:", e.text);
    }
});
</script>