How to use chatflow notification callbacks

Customerly provides powerful callbacks, onChatflowNotificationViewed and onChatflowNotificationClicked, which allows you to track and interact with users when they engage with chatflow notifications. This guide will walk you through how to set up these callbacks, what data is returned, and how you can use this information to enhance your customer support and analytics.

Prerequisites

Before implementing these callbacks, ensure that you have the Customerly live chat integrated into your web application. If you haven't done this yet, please refer to the Customerly documentation on how to integrate the live chat widget.

Callback Overview

Here’s a quick look at the two callbacks:

• onChatflowNotificationViewed: Triggered when a user views a chatflow notification.

• onChatflowNotificationClicked: Triggered when a user clicks on an item within a chatflow notification.

These callbacks allow you to track user interactions with chatflow notifications and take further actions based on these interactions, such as logging events, updating user profiles, or triggering other marketing or support workflows.

Callback Implementation

Step 1: Accessing the Callbacks

To utilize these callbacks, you need to attach them to the global customerly object in your web application. Here’s how you can set them up:

// Callback for when a chatflow notification is viewed
customerly.onChatflowNotificationViewed = function(notificationId, email) {
    console.log("Notification viewed:", notificationId, email);
    // Your custom logic here
};

// Callback for when a chatflow notification is clicked
customerly.onChatflowNotificationClicked = function(notificationId, item, email) {
    console.log("Notification clicked:", notificationId, item, email);
    // Your custom logic here
};

Step 2: Understanding the Callback Parameters

Each callback provides specific parameters that give you detailed information about the event:

• onChatflowNotificationViewed(notificationId: number, email?: string):

  • notificationId: A unique identifier for the notification that was viewed.

  • email: The email of the user who viewed the notification (optional).

• onChatflowNotificationClicked(notificationId: number, item?: ChatflowNotificationCallbackItem, email?: string):

  • notificationId: A unique identifier for the notification that was clicked.

  • item: Detailed information about the clicked item (optional). This is provided as an object and can include details such as articles, attributes, buttons, or calendar actions.

  • email: The email of the user who clicked the notification (optional).

Example: Using onChatflowNotificationClicked

Here is an example of how to use the onChatflowNotificationClicked callback to track which buttons are clicked within a chatflow notification:

customerly.onChatflowNotificationClicked = function(notificationId, item, email) {
    if (item && item.type === "button") {
        console.log(`Button clicked with caption: ${item.button.caption} and link: ${item.button.link}`);
        // Perform actions such as redirecting the user or logging the event
    }
};

Detailed Breakdown of ChatflowNotificationCallbackItem

The ChatflowNotificationCallbackItem object returned in the onChatflowNotificationClicked callback can have different structures depending on the type of item with which it interacted. Below are the possible types:

• Article: Information about a help center article.

• Attributes: A list of attributes related to the user's interaction.

• Button: A button with a caption and link.

• CalendarButton: A calendar-related button.

• CloseButton: A button used to close the notification.

Here’s a breakdown of the Button type as an example:

interface ChatflowNotificationCallbackItemButton {
  button: {
    caption: string;
    link: string;
  };
  type: "button";
}

Using Callback Data

The data returned by these callbacks can be used in various ways:

• Tracking User Engagement: Log which notifications are viewed and clicked to understand user engagement and improve your chatflow designs.

• Personalized Responses: Use the email information to tailor responses or trigger specific workflows based on user actions.

• Analytics: Integrate these callbacks with your analytics tools to measure the effectiveness of your chatflows.

Conclusion

The onChatflowNotificationViewed and onChatflowNotificationClicked callbacks provide you with robust tools to enhance user interactions and track engagement within Customerly's chatflows. By effectively implementing these callbacks, you can gain deeper insights into user behavior and optimize your customer support strategy.

For more advanced use cases, consider integrating these callbacks with other Customerly features, such as AI Missions or profiling questions, to create a more interactive and personalized user experience​​.