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 a interactive component (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 script to include your callback functions in the callbacks object.
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)
Enter the exact callback name from your script (e.g.,
openIntercom)
Important: The Callback name in the Candu Editor must exactly match the callback name in your code. 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 API documentation.