Getting Started with the Chat
This guide demonstrates how to get up and running with the Kendo UI for jQuery Chat.
After the completion of this guide, you will achieve the following end result:
<div id="chat"></div>
<script>
$("#chat").kendoChat({
toolbar: {
buttons: [
{ name: "ButtonA", iconClass: "k-icon k-i-gear" },
{ name: "ButtonB", iconClass: "k-icon k-i-arrow-rotate-cw" }
]
},
messages: {
placeholder: "Type here..."
}
});
</script>
1. Create a Div Element
First, create a <div> element on the page that will be used to initialize the component.
<div id="chat"></div>
2. Initialize the Chat
In this step, you will initialize the Chat from the <div> element.
<div id="chat"></div>
<script>
$("#chat").kendoChat();
</script>
3. Apply Configuration Settings
Here, you will apply some settings, such as toolbar.buttons, and messages.placeholder.
<div id="chat"></div>
<script>
$("#chat").kendoChat({
toolbar: {
// Defines the collection of buttons that will be rendered.
buttons: [
{ name: "ButtonA", iconClass: "k-icon k-i-gear" },
{ name: "ButtonB", iconClass: "k-icon k-i-arrow-rotate-cw" }
]
},
messages: {
// The hint that is displayed in the input textbox of the component.
placeholder: "Type here..."
}
});
</script>