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>
```