If you're looking to add interactivity to your Candu content, you can use JavaScript to add callbacks to buttons, images and cards. By default, Candu allows you to add hyperlinks, but if you're looking to do something more advanced, you can add JavaScript snippets in the installation and call them from within the Candu Editor.
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 a chat or chatbot with messaging platforms such as Intercom or Drift
Triggering your own 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.
Adding Callbacks
ℹ️ 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)
Where:
e: HTMLis the HTML event that triggers the callbacknode: Nodeis the editor node that triggers the eventaction: Actionis the exact action that will be called when the event is fired
Having access to node and 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 Candu.init.
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 <USER_ID>,<CHAT_NAME>.
So, for example, you can open a specific tour by creating a callback:
callbacks: {
showIntercomTour: (e, node, action) => Intercom && Intercom('startTour', action.eventName),
}Check the Javascript API to read more details about Candu's Javascript API.
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:
<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>
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:
