Configuration

setTabConfig

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);

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);

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 = client.getNotificationElement();

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

notificationElement.setTabConfig(tabConfig);

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

// Set it using Notifications Tool
const notificationsTool = document.querySelector('velt-notifications-tool');
notificationsTool?.setAttribute("tab-config", JSON.stringify(tabConfig));

// Or, set it using Notifications Panel
const notificationsPanel = document.querySelector('velt-notifications-panel');
notificationsPanel?.setAttribute("tab-config", JSON.stringify(tabConfig));

Using APIs:

const notificationElement = Velt.getNotificationElement();

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

notificationElement.setTabConfig(tabConfig);

setMaxDays

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);

<VeltNotificationsTool maxDays={15} />

Using API:

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

<VeltNotificationsTool maxDays={15} />

Using API:

const notificationElement = client.getNotificationElement();
notificationElement.setMaxDays(15);

<velt-notifications-tool max-days="15"></velt-notifications-tool>

Using APIs:

const notificationElement = Velt.getNotificationElement();
notificationElement.setMaxDays(15);

panelOpenMode

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' />
<VeltNotificationsPanel panelOpenMode='sidebar' />

<VeltNotificationsTool panelOpenMode='sidebar' />
<VeltNotificationsPanel panelOpenMode='sidebar' />

<velt-notifications-tool panel-open-mode="sidebar"></velt-notifications-tool>
<velt-notifications-panel panel-open-mode="sidebar"></velt-notifications-panel>

enableReadNotificationsOnForYouTab

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();

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();

Using Props:

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

Using APIs:

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

Using Props:

<velt-notifications-tool read-notifications-on-for-you-tab="true">
</velt-notifications-tool>
<velt-notifications-panel read-notifications-on-for-you-tab="true">
</velt-notifications-panel>

Using API:

<script>
  // Using APIs
  const notificationElement = Velt.getNotificationElement();
  // Enable to keep read notifications in the for you tab
  notificationElement.enableReadNotificationsOnForYouTab();
  // Disable to hide read notifications in the for you tab
  notificationElement.disableReadNotificationsOnForYouTab();
</script>

Data

getNotificationsData

Get the notifications data for the current user.
Returns Notification[]

const notificationData = useNotificationsData();

const notificationData = useNotificationsData();

const notificationElement = client.getNotificationElement();

let subscription = notificationElement.getNotificationsData().subscribe((notifications) => {
    console.log("Notifications: ", notifications)
});

To unsubscribe from the subscription:

subscription?.unsubscribe()

const notificationElement = Velt.getNotificationElement();

let subscription = notificationElement.getNotificationsData().subscribe((notifications) => {
    console.log("Notifications: ", notifications)
});

To unsubscribe from the subscription:

subscription?.unsubscribe()

getUnreadNotificationsCount

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

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

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

Event Subscription

on

Subscribe to Notification Events. Here is the list of events you can subscribe to and the event objects you will receive.

Event Type	Description	Event Object
`settingsUpdated`	Triggered when the settings are updated by the user using UI or the API	SettingsUpdatedEvent

// Hook
const settingsUpdatedEvent  = useNotificationEventCallback('settingsUpdated')

useEffect(() => {
    console.log('settingsUpdatedEvent', settingsUpdatedEvent)
}, [settingsUpdatedEvent])


// API Method
const notificationElement = useNotificationUtils();
notificationElement.on('settingsUpdated').subscribe((event) => {
     console.log('settingsUpdatedEvent', event);
});

// Hook
const settingsUpdatedEvent  = useNotificationEventCallback('settingsUpdated')

useEffect(() => {
    console.log('settingsUpdatedEvent', settingsUpdatedEvent)
}, [settingsUpdatedEvent])


// API Method
const notificationElement = useNotificationUtils();
notificationElement.on('settingsUpdated').subscribe((event) => {
     console.log('settingsUpdatedEvent', event);
});

const notificationElement = Velt.getNotificationElement();
notificationElement.on('settingsUpdated').subscribe((event) => {
    console.log('settingsUpdatedEvent', event);
});

onNotificationClick

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

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

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

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

  const notificationsTool = document.querySelector('velt-notifications-tool');
	notificationsTool?.addEventListener('onNotificationClick', (event) => {
	  console.log('onNotificationClick from Tool: ', event.detail);
  });

  const notificationsPanel = document.querySelector('velt-notifications-panel');
	notificationsPanel?.addEventListener('onNotificationClick', (event) => {
	  console.log('onNotificationClick from Panel: ', event.detail);
  });

Actions

setAllNotificationsAsRead

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' });

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' });

const notificationElement = Velt.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' });

markNotificationAsReadById

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");

const notificationElement = client.getNotificationElement();
notificationElement.markNotificationAsReadById("notificationId");

const notificationElement = Velt.getNotificationElement();
notificationElement.markNotificationAsReadById("notificationId");

Notification Settings

This feature currently only updates the settings for the current user in the current Velt document. If you are using multiple documents or folders, the settings will apply to the root document.

enableSettings

Enable or disable the settings feature for notifications. This allows users to configure their notification preferences.
Params: none
Returns: void

Make sure to first enable the settings feature in Velt Console.

Using Props:

// You can enable this on either the tool or the panel
<VeltNotificationsTool settings={true} />
<VeltNotificationsPanel settings={true} />

Using APIs:

const notificationElement = useNotificationUtils();
notificationElement.enableSettings(); // enables the settings feature
notificationElement.disableSettings(); // disables the settings feature

Using Props:

// You can enable this on either the tool or the panel
<VeltNotificationsTool settings={true} />
<VeltNotificationsPanel settings={true} />

Using APIs:

const notificationElement = useNotificationUtils();
notificationElement.enableSettings(); // enables the settings feature
notificationElement.disableSettings(); // disables the settings feature

Using Props:

<velt-notifications-tool settings="true"></velt-notifications-tool>
<velt-notifications-panel settings="true"></velt-notifications-panel>

Using APIs:

const notificationElement = Velt.getNotificationElement();
notificationElement.enableSettings(); // enables the settings feature
notificationElement.disableSettings(); // disables the settings feature

setSettingsInitialConfig

Set the initial default configuration for notification settings. This defines the available settings options and their default values.
By default we have config added for inbox (in-app notifications) and email.
You can extend this to add more channels where you intend to send notifications to your users. eg: slack, jira, asana, linear etc.
If you do extend it to other custom channels, you will need to send the data to those channels yourself using our webhooks. Learn more
This config will automatically generate the settings UI for the user to configure their notification preferences.
Params: NotificationInitialSettingsConfig[]
- Here is what the value types mean:
  - ALL: Subscribes the user to all notifications whether or not the user is involved in the notification on the current document.
  - MINE: Subscribes the user to notifications that are related to the current user on the current document.
  - NONE: Subscribes the user to no notifications on this channel on the current document.
Returns: void

Default:

[
  {
    name: 'Inbox',
    id: 'inbox',
    default: 'ALL',
    enable: true,
    values: [
      {
        name: 'All',
        id: 'ALL',
      },
      {
        name: 'Only Involved',
        id: 'MINE',
      },
      {
        name: 'None',
        id: 'NONE',
      }
    ]
  },
  {
    name: 'Email',
    id: 'email',
    default: 'MINE',
    enable: true,
    values: [
      {
        name: 'All',
        id: 'ALL',
      },
      {
        name: 'Only Involved',
        id: 'MINE',
      },
      {
        name: 'None',
        id: 'NONE',
      }
    ]
  },
]

const notificationElement = useNotificationUtils();
notificationElement.setSettingsInitialConfig([
  {
    name: 'Inbox',
    id: 'inbox',
    default: 'MINE',
    enable: true,
    values: [
      {
        name: 'All',
        id: 'ALL',
      },
      {
        name: 'Only Involved',
        id: 'MINE',
      },
      {
        name: 'None',
        id: 'NONE',
      }
    ]
  },
  {
    name: 'Slack',
    id: 'slack',
    default: 'MINE',
    enable: true,
    values: [
      {
        name: 'All',
        id: 'ALL',
      },
      {
        name: 'Only Involved',
        id: 'MINE',
      },
      {
        name: 'None',
        id: 'NONE',
      }
    ]
  },
  {
    name: 'Linear',
    id: 'linear',
    default: 'MINE',
    enable: true,
    values: [
      {
        name: 'All',
        id: 'ALL',
      },
      {
        name: 'Only Involved',
        id: 'MINE',
      },
      {
        name: 'None',
        id: 'NONE',
      }
    ]
  },
]);

const notificationElement = useNotificationUtils();
notificationElement.setSettingsInitialConfig([
  {
    name: 'Inbox',
    id: 'inbox',
    default: 'MINE',
    enable: true,
    values: [
      {
        name: 'All',
        id: 'ALL',
      },
      {
        name: 'Only Involved',
        id: 'MINE',
      },
      {
        name: 'None',
        id: 'NONE',
      }
    ]
  },
  {
    name: 'Slack',
    id: 'slack',
    default: 'MINE',
    enable: true,
    values: [
      {
        name: 'All',
        id: 'ALL',
      },
      {
        name: 'Only Involved',
        id: 'MINE',
      },
      {
        name: 'None',
        id: 'NONE',
      }
    ]
  },
  {
    name: 'Linear',
    id: 'linear',
    default: 'MINE',
    enable: true,
    values: [
      {
        name: 'All',
        id: 'ALL',
      },
      {
        name: 'Only Involved',
        id: 'MINE',
      },
      {
        name: 'None',
        id: 'NONE',
      }
    ]
  },
]);

const notificationElement = Velt.getNotificationElement();
notificationElement.setSettingsInitialConfig([
  {
    name: 'Inbox',
    id: 'inbox',
    default: 'MINE',
    enable: true,
    values: [
      {
        name: 'All',
        id: 'ALL',
      },
      {
        name: 'Only Involved',
        id: 'MINE',
      },
      {
        name: 'None',
        id: 'NONE',
      }
    ]
  },
  {
    name: 'Slack',
    id: 'slack',
    default: 'MINE',
    enable: true,
    values: [
      {
        name: 'All',
        id: 'ALL',
      },
      {
        name: 'Only Involved',
        id: 'MINE',
      },
      {
        name: 'None',
        id: 'NONE',
      }
    ]
  },
  {
    name: 'Linear',
    id: 'linear',
    default: 'MINE',
    enable: true,
    values: [
      {
        name: 'All',
        id: 'ALL',
      },
      {
        name: 'Only Involved',
        id: 'MINE',
      },
      {
        name: 'None',
        id: 'NONE',
      }
    ]
  },
]);

muteAllNotifications

Mutes all notifications across all the channels for the current user in this current document.
In case of multiple documents or folders, this will mute all notifications for the user in the root document.
Params: none
Returns: void

const notificationElement = client.getNotificationElement();
notificationElement.muteAllNotifications();

const notificationElement = client.getNotificationElement();
notificationElement.muteAllNotifications();

const notificationElement = Velt.getNotificationElement();
notificationElement.muteAllNotifications();

setSettings

Update notification settings configuration for the current user.
Here you need to provide the id of the channel config and its value id.
Params: NotificationSettingsConfig
Here is what the value types mean:
- ALL: Subscribes the user to all notifications whether or not the user is involved in the notification on the current document.
- MINE: Subscribes the user to notifications that are related to the current user on the current document.
- NONE: Subscribes the user to no notifications on this channel on the current document.
Returns: void

const notificationElement = useNotificationUtils();
notificationElement.setSettings({
  'email': 'MINE',
  'inbox': 'NONE',
  'slack': 'ALL',
  'linear': 'MINE'
});

const notificationElement = useNotificationUtils();
notificationElement.setSettings({
  'email': 'MINE',
  'inbox': 'NONE',
  'slack': 'ALL',
  'linear': 'MINE'
});

const notificationElement = Velt.getNotificationElement();
notificationElement.setSettings({
  'email': 'MINE',
  'inbox': 'NONE',
  'slack': 'ALL',
  'linear': 'MINE'
});

getSettings

Get the current notification settings configuration for the user on the current document.
Params: none
Returns: NotificationSettingsConfig

const notificationElement = useNotificationUtils();
const settings = notificationElement.getSettings();

const notificationElement = useNotificationUtils();
const settings = notificationElement.getSettings();

const notificationElement = Velt.getNotificationElement();
const settings = notificationElement.getSettings();

Get Started

Key Concepts

Async Collaboration

Realtime Collaboration

Self-Host Data

Email Notifications

Webhooks

Security

Miscellaneous

Customize Behavior

Configuration

setTabConfig

setMaxDays

panelOpenMode

enableReadNotificationsOnForYouTab

Data

getNotificationsData

getUnreadNotificationsCount

Event Subscription

on

onNotificationClick

Actions

setAllNotificationsAsRead

markNotificationAsReadById

Notification Settings

enableSettings

setSettingsInitialConfig

muteAllNotifications

setSettings

getSettings

Get Started

Key Concepts

Async Collaboration

Realtime Collaboration

Self-Host Data

Email Notifications

Webhooks

Security

Miscellaneous

​Configuration

​setTabConfig

​setMaxDays

​panelOpenMode

​enableReadNotificationsOnForYouTab

​Data

​getNotificationsData

​getUnreadNotificationsCount

​Event Subscription

​on

​onNotificationClick

​Actions

​setAllNotificationsAsRead

​markNotificationAsReadById

​Notification Settings

​enableSettings

​setSettingsInitialConfig

​muteAllNotifications

​setSettings

​getSettings

Configuration

setTabConfig

setMaxDays

panelOpenMode

enableReadNotificationsOnForYouTab

Data

getNotificationsData

getUnreadNotificationsCount

Event Subscription

on

onNotificationClick

Actions

setAllNotificationsAsRead

markNotificationAsReadById

Notification Settings

enableSettings

setSettingsInitialConfig

muteAllNotifications

setSettings

getSettings