Before you start
Confirm the Candu SDK is installed and `Candu.init(...)` runs on the page where this content appears.
Make sure any third-party tool you want to call (for example, Intercom) is loaded before the callback runs.
Callbacks are passed into `Candu.init` under the `callbacks` object.
When to use callbacks
Use callbacks when you want your Candu content to trigger functionality that goes beyond URLs or Candu actions. Callbacks let you bridge Candu content with your product's native features.
Opening chat widgets (Intercom, Drift, Zendesk) when users click "Start a chat" buttons
Triggering native product functionality (e.g., "Invite team member" button opens your product's invite modal)
Calling custom JavaScript functions in your product when users interact with Candu content
Passing dynamic data from Candu interactions to external systems
How JavaScript callbacks work
Callbacks create a connection between Candu content and your product's JavaScript functions. When users interact with Candu content (clicking a button, card, or image), the callback executes a JavaScript action you've defined in your Candu installation.
Quick overview:
You add callback functions to your Candu script
In the Candu Editor, you assign a callback interaction to an interactive component”t (like a button or card)
When users click that element, Candu calls your JavaScript function
Your function executes whatever action you've programmed (opening chat, triggering modals, etc.)
Setting up JavaScript callbacks
Step 1: Add the callback to your Candu installation script
Update your Candu initialization code to include callback functions under the callbacks key you pass into Candu.init
Example: Opening Intercom chat
<script>
(function(d, params){
const script = d.createElement('script');
script.setAttribute('src', 'https://cdn.candu.ai/sdk/latest/candu.umd.js?token=' + params.clientToken);
script.onload = () => Candu.init(params);
d.head.appendChild(script);
})(document, {
clientToken: 'YOUR_TOKEN',
callbacks: {
openIntercom: () => window.Intercom && window.Intercom('show'),
}
});
</script>
In this example, openIntercom is the callback name you'll reference in the Candu Editor.
Example: Launching Intercom tours with dynamic IDs
callbacks: {
showIntercomTour: (e, node, action) => Intercom && Intercom('startTour', action.eventName),
}This callback uses action.eventName (which comes from the Interaction Label) to launch different tours from a single callback function.
Step 2: Assign the callback in the Candu Editor
In the Candu Editor, add a button, card, or image to your content
Select the element and open the Interactions tab in the Toolbox (right sidebar)
Set the interaction type to Callback (instead of URL or other actions), then enter the callback name.
Enter the exact callback name from your script (e.g.,
openIntercom)
⚠️ The callback name in the editor must exactly match the function name in your callbacks object (case-sensitive).
If your callback is openIntercom, the Interaction must be openIntercom.
Step 3: Test your callback
Publish your content
Navigate to where it appears in your product
Click the button or element to verify the callback triggers correctly
Checking if your callback is being passed to Candu
If your callback isn't firing, verify it's actually being registered by Candu:
Navigate to the page where the button isn't working
Open your browser's developer console (F12 or right-click → Inspect → Console)
Paste this command and press Enter:
Candu.providerPropsIn the returned object, expand the callbacks dropdown
Verify your callback name appears in the list
For complete details on JavaScript API Callbacks: See our JavaScript Callback Documentation