New to Kendo UI for jQuery? Start a free 30-day trial

HeaderTemplate

configuration

A custom template function for rendering the chat header. When set, this overrides the headerItems configuration and provides full control over the header content. The function should return an HTML string.

headerTemplate

Function

Default: null

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "The header above is rendered with a custom template.",
        authorId: "bot",
        authorName: "Support Bot",
        timestamp: new Date(2026, 0, 1, 9, 0)
    }
];

$("#chat").kendoChat({
    headerTemplate: function() {
        return '<div style="display:flex;align-items:center;gap:10px;padding:8px 16px;">' +
               '<strong>Custom Header</strong>' +
               '<span style="color:green;">Online</span>' +
               '</div>';
    },
    authorId: "user1",
    dataSource: messagesData
});
</script>