<div id="chat"></div> <script> let messagesData = [ { id: 1, text: "Welcome to our support chat! This message is pinned for important information.", authorId: "admin", authorName: "Chat Admin", authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg", timestamp: new Date(2026, 0, 1, 9, 0), isPinned: true // This message is pinned by default }, { id: 2, text: "Thank you! I can see the pinned message at the top.", authorId: "user", authorName: "Customer", authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/GOURL.jpg", timestamp: new Date(2026, 0, 1, 9, 5) } ]; $("#chat").kendoChat({ authorId: "user", dataSource: messagesData, unpin: function(e) { console.log("Message unpinned:", e.message.text); // You can perform additional actions when a message is unpinned alert("The pinned message has been removed: " + e.message.text); } }); // Click the X button on the pinned message at the top to trigger the unpin event </script>