Getting Started with the Chat
This guide demonstrates how to get up and running with the Kendo UI for jQuery Chat. You will learn how to initialize the component, configure data sources, add suggestions, set dimensions, configure header items, and handle context menu actions.
After the completion of this guide, you will achieve the following end result:
1. Create a Div Element
First, create a <div> element on the page that will be used to initialize the Chat component.
<div id="chat"></div>2. Initialize the Chat
Initialize the Chat from the <div> element with basic configuration.
<div id="chat"></div>
<script>
$("#chat").kendoChat({
authorId: "user1"
});
</script>3. Configure Data Source
Add a dataSource to populate the chat with existing messages. The data source can contain message history and conversation data.
<div id="chat"></div>
<script>
let chatMessages = [
{
id: 1,
text: "Hello! Welcome to our chat.",
authorId: "agent",
authorName: "Support Agent",
authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
timestamp: new Date(2024, 11, 1, 10, 0)
},
{
id: 2,
text: "Hi there! Thanks for the welcome.",
authorId: "user1",
authorName: "Customer",
authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg",
timestamp: new Date(2024, 11, 1, 10, 1)
}
];
$("#chat").kendoChat({
authorId: "user1",
dataSource: {
data: chatMessages
}
});
</script>4. Add Message Suggestions
Configure quick-reply suggestions that appear below the message input for common responses.
<div id="chat"></div>
<script>
$("#chat").kendoChat({
authorId: "user1",
suggestions: [
{ text: "Yes, please" },
{ text: "No, thanks" },
{ text: "Tell me more" },
{ text: "I need help" },
{ text: "Contact support" }
],
suggestionClick: function(e) {
console.log("User selected:", e.text);
// Simulate response
setTimeout(() => {
this.postMessage({
text: "Thanks for selecting '" + e.text + "'. How can I help you further?",
authorId: "agent",
authorName: "Support Agent",
timestamp: new Date()
});
}, 500);
}
});
</script>5. Set Component Dimensions
Configure the width and height of the Chat component to fit your layout requirements.
<div id="chat"></div>
<script>
$("#chat").kendoChat({
authorId: "user1",
width: 500,
height: 400,
dataSource: {
data: [{
id: 1,
text: "This chat has custom dimensions: 500px width and 400px height.",
authorId: "system",
authorName: "System",
timestamp: new Date()
}]
}
});
</script>6. Configure Header Toolbar
Use the headerItems configuration option to customize the Chat header appearance and functionality.
<div id="chat"></div>
<script>
$("#chat").kendoChat({
authorId: "user1",
headerItems: [
{
type: "contentItem",
template: () => "<strong>Customer Support Chat</strong>"
},
{
type: "spacer"
},
{
type: "contentItem",
template: () => `${kendo.ui.icon('gear')}`
}
]
});
</script>7. Configure Context Menu Actions
The Chat component provides and option to customize and set up context menu actions that appear when users right-click on messages. Utilize the messageActions configuration option and configure the actions that will appear in the messages context menu.
<div id="chat"></div>
<script>
$("#chat").kendoChat({
authorId: "user1",
messageActions: [
{ name: "reply", text: "Reply", icon: "undo" },
{ name: "copy", text: "Copy", icon: "copy" },
{ name: "pin", text: "Pin", icon: "pin" },
{ name: "delete", text: "Delete", icon: "trash" }
],
dataSource: {
data: [{
id: 1,
text: "Right-click this message to see the context menu actions.",
authorId: "agent",
authorName: "Agent",
timestamp: new Date()
}]
},
contextMenuAction: function(e) {
console.log("Context menu action:", e.type);
switch(e.type) {
case "reply":
alert("Replying to: " + e.message.text);
break;
case "copy":
alert("Message copied!");
break;
case "pin":
alert("Message pinned!");
break;
case "delete":
if (confirm("Delete this message?")) {
this.removeMessage(e.message);
}
break;
}
}
});
</script>8. Handle Message Events
Implement event handlers for sending messages and user interactions.
<div id="chat"></div>
<script>
$("#chat").kendoChat({
authorId: "customer",
sendMessage: function(e) {
// Set author info for outgoing messages
e.message.authorName = "Customer";
e.message.authorImageUrl = "https://demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg";
console.log("Message sent:", e.message.text);
// Auto-response simulation
setTimeout(() => {
this.postMessage({
text: "Thank you for your message: '" + e.message.text + "'",
authorId: "bot",
authorName: "Chat Bot",
authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
timestamp: new Date()
});
}, 1000);
}
});
</script>