📡 Listening to SDK Events

The Candu SDK emits custom browser events that allow your app to respond to lifecycle milestones — such as when content is rendered or a user interacts with it. These events are dispatched using the window.dispatchEvent API and can be captured using window.addEventListener.

This is especially useful if you want to:

• Trigger animations when content appears
• Hook into analytics or tracking systems
• Debug content loading and flows
• Respond to user interactions inside Candu experiences

🔔 Event: candu.sdk.screen

This event is fired when a screen is rendered by Candu. This includes standard content views, but also embeds, flow steps and conditional views

CommonscreenName values:

• candu.sdk.content — content was shown on screen
• candu.sdk.flow_step — a flow step screen appeared
• candu.sdk.impression - an experiment impression has been tracked
• candu.sdk.conditional_view_option - a conditional view option has been shown
• candu.sdk.hotspot_beacon - a hotspot beacon has been shown
• candu.sdk.hotspot_tooltip - a hotspot tooltip has been shown
• candu.sdk.tour_step_tooltip - a tour step has been shown

Example payload:

{
  "screenName": "candu.sdk.content",
  "properties": {
    "slug": "candu-test-content",
    "documentId": 77936,
    "contentId": "iWXmB5TyAR",
    "segmentId": "e4Q53Ipe7W",
    "versionId": "c788c8b0d84c0c4130fa4d611f3242c39b8867fb",
    "placementId": "3N2DN_"
  }
} 

🔔 Event: candu.sdk.track

This event is fired when you call Candu.track(...) with an event name that starts with candu.sdk.. It’s typically used to monitor user interactions within your Candu content.

Example payload:

{
  "eventName": "candu.sdk.content.interaction",
  "properties": {
    "trigger": "OnClick",
    "handler": {
      "stepId": "e27ea303c53182bf8d0bd914c48cc0ed",
      "type": "SetStep"
    },
    "eventName": "Target Your Content - Expand",
    "category": "Flow",
    "documentId": 77726,
    "segmentId": "JR5CT1wkoL",
    "contentId": "O8OPScBBuo",
    "versionId": "5f7c4bf0bc804e5d874906167fdb3ded1aec64a3",
    "placementId": "3N2DN_",
    "nodeId": "_xYWKQzdxt",
    "nodeType": "Card"
  }
}

✅ How to Listen for Events

Listening for screen events

window.addEventListener('candu.sdk.screen', (event) => {
  const { screenName, properties } = event.detail;
  console.log('Candu screen shown:', screenName, properties);
}); 

Listening for track events

window.addEventListener('candu.sdk.track', (event) => {
  const { eventName, properties } = event.detail;
  console.log('Candu event tracked:', eventName, properties);
});

Note: If it's important to capture all events we suggest adding listeners before calling Candu.init

🚀 Next Steps

By listening to these events, you can seamlessly integrate Candu content into your app’s workflows — whether that's tracking engagement, triggering custom UI effects, or powering advanced analytics.

Feel free to experiment with the events and tailor your integrations to fit your needs. If you have questions or want to request additional event hooks, our team is here to help. Reach out anytime at [email protected].

Happy building! 🎉