headerTemplateFunction(default: null)
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.
Example
<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>