import { VeltNotificationsTool } from '@veltdev/react';

function YourComponent() {

  return (
    <div className="toolbar">
      <VeltNotificationsTool />
    </div>
  )
  
}

1

Enable Notifications in the Velt Console

  • Go to the Notifications section in the Configurations section of the Velt Console and enable Notifications.
Notifications will not work if you do not enable this first.
2

Add the Notifications Tool component

  • Place the Velt Notifications Tool component wherever you want the Notifications button to appear.

<div className="toolbar">
  <VeltNotificationsTool/>
</div>
3

(optional) Embed Notifications Panel

  • By default, the Velt Notifications Panel is automatically added or removed when you use the Velt Notifications Tool.
  • However, if you want to create a dedicated page or dedicated section for Notifications, you can embed the Velt Notifications Panel component directly there.

<div className="toolbar">
  <VeltNotificationsPanel />
</div>
4

(optional) Enable Notification Settings for Users

  • By default, the user notification settings are disabled.
  • You need to first enable this feature in the Velt Console.
  • Then enable settings on the notifications tool or panel in the UI. Learn more
  • You can then:
    • Configure default settings with setSettingsInitialConfig() API and extend it to add more channels (eg: slack, jira, asana, linear etc.) where you intend to send notifications to your users. Learn more
    • Update settings programmatically with setSettings() API. Learn more
    • Get current settings with getSettings() API. Learn more
    • Subscribe to settings updates with settingsUpdated event. Learn more

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.

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

import { VeltNotificationsTool } from '@veltdev/react';

function YourComponent() {

  return (
    <div className="toolbar">
      <VeltNotificationsTool />
    </div>
  )
  
}