Listen in the host page
// Catch all
window.addEventListener('duki:event', (e) => {
console.log('[DUKI]', e.detail.name, e.detail);
});
// Specific
window.addEventListener('duki:chat:init', (e) => {
const { chatId } = e.detail;
});
Check the "Event catalog" to see events names
Payload
{
name, // normalized event name, e.g. "chat:init"
ts, // ISO timestamp
projectId, // widget project id
language, // e.g., "en"
side, // "right" | "left"
...custom // event-specific fields (chatId, message, error, ...)
}
Event catalog
| Event | When | Detail |
|---|---|---|
duki:chat:open | Chat opens | — |
duki:chat:close | Chat closes | — |
duki:chat:fullscreen | Enter fullscreen | — |
duki:chat:smallscreen | Exit fullscreen | — |
duki:chat:init | Session ready | chatId |
duki:chat:start | Session started | chatId |
duki:chat:history | History received | messages[] |
duki:chat:historyend | History rendered | messages[] |
duki:chat:typing | Typing on | — |
duki:chat:typingend | Typing off | — |
duki:chat:thinking | Thinking on | — |
duki:chat:thinkingend | Thinking off | — |
duki:chat:message | User sent | message |
duki:chat:error | Error | error |
GTM / GA4
<script>
window.dataLayer = window.dataLayer || [];
window.addEventListener('duki:event', (e) => {
const ev = e.detail;
window.dataLayer.push({
event: 'duki_' + ev.name.replace(/:/g, '_'),
duki: ev
});
});
</script>
This is an exmple how you can use the events.
AI Chat Custom Fields
Add contextual data to enrich conversations. Define window.dukiCustomFields before loading the chat widget.
These fields are automatically sent on duki:chat:start.
<script>
window.dukiCustomFields = {
// Business Context
country: "",
userMarket: "",
// Page Context
currentPageUrl: window.location.href,
currentPageTitle: document.title,
previousPageUrl: document.referrer,
// User Context
visitorName: "",
visitorEmail: "",
companyName: "",
userRole: "",
industry: "",
// Behavioral Context
pageCategory: "",
userIntent: "",
customerType: "",
// Technical Context
userAgent: navigator.userAgent,
language: navigator.language,
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
// Session Context
sessionId: "",
visitCount: "",
lastVisit: "",
};
</script>
You can dynamically add values with:
<script>
window.dukiSetCustomField = function(key, value) {
if (!window.dukiCustomFields.dynamicFields)
window.dukiCustomFields.dynamicFields = {};
window.dukiCustomFields.dynamicFields[key] = value;
};
// Example usage
window.dukiSetCustomField("planSelected", "Pro");
window.dukiSetCustomField("cartValue", "199.90");
</script>
This helps personalize AI replies, analytics, and lead enrichment.