messageBoxTemplateFunction(default: null)

The template used to render the message input area at the bottom of the Chat. The function receives no arguments and should return an HTML string for the custom message box markup.

When using a custom template, the first textarea or supported text input inside the template is used as the message input. To enable send button behavior, add an element with the ref-chat-message-box-send-button attribute. If the template contains input[type='file'] elements, they participate in the file selection flow.

Example

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    messageBoxTemplate: function() {
        return '<div class="custom-message-box" style="display:flex;gap:8px;padding:10px;">' +
               '<textarea class="k-input-inner" placeholder="Type here..." rows="1" style="flex:1;resize:none;"></textarea>' +
               '<button ref-chat-message-box-send-button class="k-button k-button-solid k-button-md k-rounded-md k-button-solid-primary">Send</button>' +
               '</div>';
    },
    authorId: "user1"
});
</script>
In this article
messageBoxTemplate
Not finding the help you need?
Contact Support