Callbacks enable you to trigger in-product content within the page without requiring a hard refresh. An example of how we use this at Candu is firing our Intercom chat widget to open when the 'Start a chat' button is clicked:
Callback Use Cases
Callbacks enable your Candu-created content to interact with third-party providers (where you host useful content) and provide a seamless, interactive experience for your users.
Common use cases include:
Triggering product tours/walkthroughs from applications like Appcues, Pendo and Userguiding
Triggering a chat or chatbot with messaging platforms such as Intercom or Drift
Triggering your product functionality e.g if you create an 'Invite team member' button in Candu, when clicked you may want to trigger the overlay in your product that allows users to invite their colleagues.
ℹ️ In order to trigger Callbacks, you will update your Candu script. For each provider, only one update is needed, as you will be able to call a specific function and pass arguments to that function with Callbacks.
Callback functions have the following signature:
function callback(e: HTMLEvent, node: Node, action: Action)
e: HTMLis the HTML event that triggers the callback
node: Nodeis the editor node that triggers the event
action: Actionis the exact action that will be called when the event is fired
Having access to
action enables you to make Callbacks more flexible and powerful.
To trigger a callback from Candu-created content, you will need to add the callback to your script installation within
For example, a common use case is to be able to access the Interaction Label in the
Action object to pass in different function arguments to callback functions. To add multiple arguments, you can delimit them with commas
So, for example, you can open a specific tour by creating a callback:
showIntercomTour: (e, node, action) => Intercom && Intercom('startTour', action.eventName),
Once you have added a button or card in Candu you can then click on the Interactions tab of the toolbox. In this example you can then set the
tourId for your video, in-app tour, or other content in the Interaction Label. Please ensure that the Interaction Label exactly matches the callback in the code.
This means that you can add one callback trigger for each provider that you want to embed within your Candu content. For example, if you use Appcues and have eight product tours that you want to launch from Candu buttons, you can add one Callback for AppCues that handles all eight tours, as well as any future ones you create.
You can add as many callbacks as you need in the script. Please ensure each has a unique identifier.
Example Callback: Launching Intercom
At Candu we have the following script installed for the Intercom use case we introduced at the beginning of this guide:
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);
openIntercom: () => window.Intercom && window.Intercom('show'),
On the button, it will look like this:
And as you can see on our button, the Callback name matches what we have added to the script: