Skip to main content
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.
  • React / Next.js
  • Other Frameworks
<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.
  • React / Next.js
  • Other Frameworks
<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.
  • React / Next.js
  • Other Frameworks
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>
  )
  
}