Event Listeners
React to chat events in real-time with JavaScript callbacks.
Overview
The embed widget dispatches custom events that you can listen to from your application. Use these to track user interactions, trigger analytics, or integrate with other tools.
Available Events
| Event | Fired When |
|---|---|
agent:ready | Widget has loaded and is ready |
agent:open | Chat widget is opened |
agent:close | Chat widget is closed |
agent:message:sent | User sends a message |
agent:message:received | Agent responds with a message |
agent:conversation:start | A new conversation begins |
Usage
window.addEventListener('agent:message:sent', (event) => {
console.log('User sent:', event.detail.message);
});
window.addEventListener('agent:message:received', (event) => {
console.log('Agent replied:', event.detail.message);
});
window.addEventListener('agent:ready', () => {
console.log('Chat widget is ready');
});Event Detail
Each event's detail property contains relevant data:
// agent:message:sent
interface MessageSentDetail {
message: string;
conversation_id: string;
timestamp: string;
}
// agent:message:received
interface MessageReceivedDetail {
message: string;
conversation_id: string;
timestamp: string;
sources?: string[];
}Programmatic Control
You can also control the widget programmatically:
// Open the chat widget
window.AgentWidget.open();
// Close the chat widget
window.AgentWidget.close();
// Send a message programmatically
window.AgentWidget.sendMessage('Hello!');