Widget Events

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

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: "",
  
  // tooltip text  and auto open
   tooltipText: "Your custom tooltip text here",
    autoOpen: true  // or false to disable auto-open


};
</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.