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:

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 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.

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),
}

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:

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: