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

jQuery Chat Suggestions

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Kendo UI Dojo
Change Theme
default
Default Theme

Main

Main Dark

Nordic

Ocean Blue

Ocean Blue A11Y

Purple

Turquoise
Bootstrap Theme

Main

Bootstrap 3

Bootstrap 3 Dark

Main Dark

Nordic

Turquoise

Turquoise Dark

Urban

Vintage
Material Theme

Main

Arctic

Lime Dark

Main Dark

Material 2

Material 2 Dark

Nova
Classic Theme

Main

Green

Green Dark

Lavender

Lavender Dark

Main Dark

Metro

Metro Dark

Moonlight

Opal

Opal Dark

Silver

Silver Dark

Uniform
Fluent Theme

Main

Main Dark
Launch Theme Builder

suggestions.html

Also available for:

Suggestions Behavior:

Suggestions Layout Mode:

Use Custom Template:

var messagesData = [ { id: 1, authorId: "assistant", authorName: "Virtual Assistant", authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/GOURL.jpg", authorImageAltText: "Assistant's profile picture", text: "Hello! Welcome to our support center. How can I help you today? Choose from the suggestions below or type your own message.", timestamp: new Date(2025, 7, 20, 9, 0), suggestedActions: [ { text: "Track my order" }, { text: "Return a product" }, { text: "Report an issue" } ] } ]; var chat = $("#chat").kendoChat({ height: 600, authorId: "user", headerItems: [{ type: "contentItem", template: () => "<strong>Support Chat</strong>" }], suggestions: [ { text: "Technical Support" }, { text: "Billing Question" }, { text: "Product Information" }, { text: "Schedule a Demo" }, { text: "Contact Sales" }, { text: "General Inquiry" } ], suggestionsBehavior: "insert", suggestionsLayoutMode: "scroll", dataSource: { data: messagesData }, sendMessage: function(e) { e.message.authorId = "user"; e.message.authorName = "Customer"; e.message.authorImageUrl = "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg"; e.message.authorImageAltText = "Customer's profile picture"; var userText = e.message.text; var responseText = ""; switch (userText) { case "Technical Support": responseText = "I'll connect you with our technical support team. In the meantime, can you describe the issue you're experiencing?"; break; case "Billing Question": responseText = "I can help with billing inquiries. Are you looking to view your recent invoices or update your payment method?"; break; case "Product Information": responseText = "We'd be happy to tell you more about our products! Which product line are you interested in?"; break; case "Track my order": responseText = "Sure! Please provide your order number and I'll look it up for you right away."; break; case "Return a product": responseText = "I can help with returns. Our return policy allows returns within 30 days of purchase. Do you have your order number?"; break; case "Report an issue": responseText = "I'm sorry to hear you're having an issue. Could you describe what happened so I can help resolve it?"; break; default: responseText = "Thank you for your message! A support agent will assist you shortly."; } setTimeout(function() { e.sender.postMessage({ authorId: "assistant", authorName: "Virtual Assistant", authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/GOURL.jpg", authorImageAltText: "Assistant's profile picture", text: responseText, timestamp: new Date() }); }, 800); }, suggestionClick: function(e) { kendoConsole.log("Suggestion clicked: " + e.text); } }).data("kendoChat"); $("#behaviorSelect").kendoDropDownList({ change: function() { chat.setOptions({ suggestionsBehavior: this.value() }); } }); $("#layoutSelect").kendoDropDownList({ change: function() { chat.setOptions({ suggestionsLayoutMode: this.value() }); if (customTemplateColor) { applyCustomTemplate(customTemplateColor, this.value()); } } }); var customTemplateColor = null; var suggestionIcons = { "Technical Support": "wrench", "Billing Question": "dollar", "Product Information": "info-circle", "Schedule a Demo": "calendar", "Contact Sales": "envelop", "General Inquiry": "question-circle", "Track my order": "search", "Return a product": "undo", "Report an issue": "exclamation-circle" }; function applyCustomTemplate(color, layout) { chat.setOptions({ suggestionsTemplate: function(suggestions) { var html = ""; var needsScrollWrap = (layout === "scroll" || layout === "scrollbuttons"); var groupClass = "k-suggestion-group" + (layout === "scroll" ? " k-suggestion-group-scrollable" : ""); if (layout === "scrollbuttons") { html += `<div class="k-suggestion-scrollwrap k-suggestion-scrollwrap-gradient">`; html += kendo.html.renderButton(`<button ref-chat-left-scroll-button></button>`, { icon: "chevron-left" }); } html += `<div class="${groupClass}" ref-chat-suggestion-group role="group">`; if (needsScrollWrap) { html += `<div class="k-suggestions-scroll" style="">`; } for (var i = 0; i < suggestions.length; i++) { var iconName = suggestionIcons[suggestions[i].text]; var iconHtml = iconName ? kendo.ui.icon(iconName) : ""; html += `<span class="k-suggestion" role="button" tabindex="0" style="background-color: ${color}; border-color: ${color};">${iconHtml}${suggestions[i].text}</span>`; } if (needsScrollWrap) { html += `</div>`; } html += `</div>`; if (layout === "scrollbuttons") { html += kendo.html.renderButton(`<button ref-chat-right-scroll-button></button>`, { icon: "chevron-right" }); html += `</div>`; } return html; } }); } $("#templateColorPicker").kendoColorPicker({ view: "palette", change: function(e) { customTemplateColor = e.value; var layout = chat.options.suggestionsLayoutMode; applyCustomTemplate(customTemplateColor, layout); } }); .k-chat { max-width: 440px; } .configurator .k-dropdownlist { width: 200px; margin-top: 8px; margin-left: 6px; } .configurator .k-colorpicker { margin-left: 4px; margin-top: 7px; } .k-suggestion .k-icon { margin-right: 4px; vertical-align: middle; }

Description

This demo illustrates the suggestion features of the Kendo UI for jQuery Chat. Global suggestions are defined via the suggestions option, while per-message suggestedActions are provided through the data source. Use the configurator to change suggestionsBehavior ("insert" to edit before sending or "send" to send immediately) and suggestionsLayoutMode ("scroll", "wrap", or "scrollbuttons").

A custom suggestionsTemplate can also be applied by picking a color from the color picker, demonstrating how to fully control the suggestion chip rendering while preserving scroll and layout behavior.

This Chat example is part of a unique collection of hundreds of jQuery demos, with which you can see all Kendo UI for jQuery components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Kendo UI for jQuery Dojo or ThemeBuilder.

Support & Learning Resources

Additional Resources