renderMessage
Renders a message bubble inside the Chat.
Parameters
message Object
The configuration options for the message.
message.type String
The type of the message bubble that will be rendered. Can be either text
or typing
.
message.text String
The text of the message bubble. Ignored when the type is set to typing
.
sender Object
The configuration object which contains information about the sender of the message bubble. Determines where the message will be rendered.
sender.id Object
The unique identifier which is used to distinguish between different users in the chat.
sender.name String
The string which represents the name of the sender that is rendered before the message bubble.
sender.iconUrl String
The URL that is used to show the sender avatar.
Example - rendering a message
<div id="chat"></div>
<script>
$("#chat").kendoChat();
var chat = $("#chat").data("kendoChat");
chat.renderMessage({
type: "text",
text: "Hello Kendo Chat"
}, {
id: kendo.guid(),
name: "Sample User",
iconUrl: "https://demos.telerik.com/kendo-ui/content/web/chat/avatar.png"
});
</script>
Example - rendering a message from a chat user
<div id="chat"></div>
<script>
$("#chat").kendoChat();
var chat = $("#chat").data("kendoChat");
chat.renderMessage({
type: "text",
text: "Hello Kendo Chat"
}, chat.getUser());
</script>
Example - rendering the typing indicator
<div id="chat"></div>
<script>
$("#chat").kendoChat();
var chat = $("#chat").data("kendoChat");
chat.renderMessage({
type: "typing"
}, chat.getUser());
</script>
Example - register a custom template
```
<div id="chat"></div>
<script id="custom-template" type="text/x-kendo-template">
<div class="#=styles.message#">
<b>#=additionalData#</b>
</div>
</script>
<script>
var CUSTOM_TEMPLATE = kendo.template($('#custom-template').html());
kendo.chat.registerTemplate("custom", CUSTOM_TEMPLATE);
var chat = $("#chat").kendoChat().data("kendoChat");
chat.renderMessage({
type: "custom",
text: "<h3>Title</h3><i>description</i>",
additionalData: "Some other data"
}, chat.getUser());
</script>
```