Documentation/Widget Integration/Events
Widget Events
JavaScript events emitted by the chat widget for custom integrations.
Available Events
Events you can listen for in your JavaScript code
| Event | Description | Data |
|---|---|---|
| sensei:open | Chat panel opened | none |
| sensei:close | Chat panel closed | none |
| sensei:message | Message sent or received | role, content |
| sensei:lead | Lead form submitted | name, email, phone |
Listening to Events
Basic Event Listener
// Listen for chat open
window.addEventListener('sensei:open', function() {
console.log('Chat opened');
// Track in analytics
gtag('event', 'chat_opened');
});
// Listen for chat close
window.addEventListener('sensei:close', function() {
console.log('Chat closed');
});Message Events
// Listen for messages
window.addEventListener('sensei:message', function(e) {
const { role, content } = e.detail;
console.log(`${role}: ${content}`);
// Track user questions
if (role === 'user') {
gtag('event', 'chat_message', {
message_type: 'user_question'
});
}
});Lead Capture Events
// Listen for lead submissions
window.addEventListener('sensei:lead', function(e) {
const { name, email, phone } = e.detail;
console.log('New lead:', name, email);
// Track conversion
gtag('event', 'lead_captured', {
lead_email: email
});
// Send to your own system
fetch('/api/my-leads', {
method: 'POST',
body: JSON.stringify({ name, email, phone })
});
});Common Use Cases
Analytics Tracking
Track chat interactions in Google Analytics, Mixpanel, or other analytics tools.
CRM Integration
Send lead data to your CRM in real-time when the form is submitted.
Custom UI Updates
Show/hide elements on the page based on chat state.
A/B Testing
Track which chat variations lead to more conversions.
Note: Events are dispatched on the window object. Make sure your event listeners are set up after the page loads but before the user interacts with the widget.