If you're looking to add interactivity to your Candu content, you can use JavaScript to add callbacks to buttons or 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:

a good example for using callbacks is having a start chat button and using this to start your chat widget

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 video content to play/appear in a full-page modal

  • Triggering a chat or chatbot with messaging platforms such as Intercom or Drift

  • Triggering a pop-up form with form providers such as Typeform

  • Scheduling time with a calendar provider such as Calendly or ChiliPiper


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: HTML is the HTML event that triggers the callback

  • node: Node is the editor node that triggers the event

  • action: Action is 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),
}

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:

make sure your interaction label is named appropriately to track easily in Analytics

And as you can see on our button, the Callback name matches what we have added to the script:

Did this answer your question?