​
1. Get Notifications Data

  • Get the notifications data for the current user.
  • Returns Notification[]
const notificationData = useNotificationsData();

​
2. Take action when a Notification is clicked

  • The onNotificationClick event fires when a notification is clicked in the Notifications Panel.
  • It returns a Notification object with details about the clicked notification.
  • Listen to this event via either the Notification Tool or the Notification Panel, but not both.
  • Use this event to implement custom actions in response to notification clicks, such as navigating to a specific part of the app.
<VeltNotificationsTool onNotificationClick={(notification) => onNotificationClickEvent(notification)} />

<VeltNotificationsPanel onNotificationClick={(notification) => onNotificationClickEvent(notification)} />

const onNotificationClickEvent = (notification) => {
	console.log('onNotificationClick: ', notification);
}

​
3. Configure Custom Tabs

  • Using this config, you can customize the name of the tabs or disable them altogether.
  • By default, all the three tabs are enabled.

You can set it on Notifications Tool:

<VeltNotificationsTool tabConfig={{
    "forYou": {
        name: 'Custom For You',
        enable: true,
    },
    "documents": {
        name: 'Custom Document',
        enable: false,
    },
    "all": {
        name: 'Custom All',
        enable: true,
    },
}
} />

You can alternatively set it on Notifications Panel if you have directly embedded it:

<VeltNotificationsPanel tabConfig={{
    "forYou": {
        name: 'Custom For You',
        enable: true,
    },
    "documents": {
        name: 'Custom Document',
        enable: false,
    },
    "all": {
        name: 'Custom All',
        enable: true,
    },
}
} />

Using APIs:

const notificationElement = useNotificationUtils();

​​const tabConfig = {
	"forYou": {
		name: 'Custom For You',
		enable: true,
	},
	"documents": {
		name: 'Custom Document',
		enable: false,
	},
	"all": {
		name: 'Custom All',
		enable: true,
	},
};

notificationElement.setTabConfig(tabConfig);

​
4. Set maximum days for which Notifications should be displayed

Notifications older than the specified number of days will not be displayed.

Default: 15 days.

<VeltNotificationsTool maxDays={15} />

Using API:

const notificationElement = useNotificationUtils();
notificationElement.setMaxDays(15);

​
5. Change how the Notifications Panel is opened

Notificaitons Panel opens in one of the following ways:

  • popover: It opens as a popover on the Notification Tool.
  • sidebar: It opens as a sidebar from the right edge of the screen.

Default: popover.

<VeltNotificationsTool panelOpenMode={'sidebar'} />

​
6. Configure visibility of read notifications in the “For You” tab

  • You can control whether read notifications are displayed in the “For You” tab. By default, read notifications are removed from this tab.
  • This feature allows you to customize the visibility of read notifications in the “For You” tab, providing more flexibility in how notifications are displayed to users.

Default: false.

Using Props:

<VeltNotificationsTool readNotificationsOnForYouTab={true} />
<VeltNotificationsPanel readNotificationsOnForYouTab={true} />

Using APIs:

const notificationElement = useNotificationUtils();
// Enable to keep read notifications in the for you tab
notificationElement.enableReadNotificationsOnForYouTab();
// Disable to hide read notifications in the for you tab
notificationElement.disableReadNotificationsOnForYouTab();

​
7. Mark All Notifications as Read

  • Mark all notifications as read, either globally or for a specific tab.
  • Using ‘all’ or ‘document’ as the tabId marks all notifications as read across all tabs (equivalent to calling setAllNotificationsAsRead() without arguments).
  • Using ‘for-you’ as the tabId only marks notifications in the ‘for-you’ tab as read.
const notificationElement = client.getNotificationElement();

// Mark all notifications as read
notificationElement.setAllNotificationsAsRead();

// Mark all notifications as read for a specific tab
notificationElement.setAllNotificationsAsRead({ tabId: 'for-you' });
notificationElement.setAllNotificationsAsRead({ tabId: 'all' });
notificationElement.setAllNotificationsAsRead({ tabId: 'document' });

​
8. Get Unread Notifications Count

  • Retrieve the count of unread notifications, which includes a breakdown for different tabs.
  • The ‘Document’ tab is not included in the response because it contains all the notifications present in the ‘All’ tab.

Sample response:

{ 
  forYou: 4, // # of unread notifications in the "For You" tab
  all: 5     // # of unread notifications in the "All" or "Document" tab
}

Using Hooks:

const unreadCount = useUnreadNotificationsCount();

useEffect(() => {
  console.log('Unread Count', unreadCount);
}, [unreadCount]);

Using API:

const notificationElement = client.getNotificationElement();
notificationElement.getUnreadNotificationsCount().subscribe((data) => {
  console.log('Unread notifications count:', data);
});

​
9. Mark a Single Notification as Read

  • Mark a single notification as read using its notificationId.
  • The notification will be marked as read in all tabs.
const notificationElement = client.getNotificationElement();
notificationElement.markNotificationAsReadById("notificationId");

Was this page helpful?

SetupOverview