Setup - Velt

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.

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>

<div className="toolbar">
  <velt-notifications-tool></velt-notifications-tool>
</div>

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

<div className="toolbar">
  <velt-notifications-panel></velt-notifications-panel>
</div>

(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

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

(optional) Configure Notification Delivery

Opt in to a delay-and-batch pipeline that holds notifications, suppresses delivery if the recipient has already seen the activity, and groups notifications into digests before sending.
Configure Notification Service in the Velt Console under API Key notification settings. Learn more

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

function YourComponent() {

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

<div className="toolbar">
  <velt-notifications-tool></velt-notifications-tool>
</div>