> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Setup

![](https://mintcdn.com/velt/gAz_vLsG-ukKamYM/images/Notification_Dialog_Box.png?fit=max\&auto=format\&n=gAz_vLsG-ukKamYM\&q=85\&s=9e92f5ea7f34fd57795aea11ef762f35)

## 1. Enable Notifications in the Velt Console

* Go to the [Notifications section](https://console.velt.dev/dashboard/config/notification) in the Configurations section of the Velt Console and enable Notifications.

> [!WARNING]
>
> 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.

  ![](https://mintcdn.com/velt/gAz_vLsG-ukKamYM/images/Notification_Dialog_Box.png?fit=max\&auto=format\&n=gAz_vLsG-ukKamYM\&q=85\&s=9e92f5ea7f34fd57795aea11ef762f35)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <div className="toolbar">
>   <VeltNotificationsTool/>
> </div>
> ```

> [tab] Other Frameworks
>
> ```jsx theme={null}
> <div className="toolbar">
>   <velt-notifications-tool></velt-notifications-tool>
> </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.

  ![](https://mintcdn.com/velt/gAz_vLsG-ukKamYM/images/Notification_Dialog_Box.png?fit=max\&auto=format\&n=gAz_vLsG-ukKamYM\&q=85\&s=9e92f5ea7f34fd57795aea11ef762f35)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <div className="toolbar">
>   <VeltNotificationsPanel />
> </div>
> ```

> [tab] Other Frameworks
>
> ```jsx theme={null}
> <div className="toolbar">
>   <velt-notifications-panel></velt-notifications-panel>
> </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](https://console.velt.dev/dashboard/config/notification).
* Then enable settings on the notifications tool or panel in the UI. [Learn more](https://velt.dev/docs/async-collaboration/notifications/customize-behavior.md#enablesettings)
* 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](https://velt.dev/docs/async-collaboration/notifications/customize-behavior.md#setsettingsinitialconfig)
  * Update settings programmatically with `setSettings()` API. [Learn more](https://velt.dev/docs/async-collaboration/notifications/customize-behavior.md#setsettings)
  * Get current settings with `getSettings()` API. [Learn more](https://velt.dev/docs/async-collaboration/notifications/customize-behavior.md#getsettings)
  * Subscribe to settings updates with `settingsUpdated` event. [Learn more](https://velt.dev/docs/async-collaboration/notifications/customize-behavior.md#on)

> [!WARNING]
>
> 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.

> [tab] React / Next.js
>
> **Using Props:**
>
> ```jsx theme={null}
> // You can enable this on either the tool or the panel
> <VeltNotificationsTool settings={true} />
> <VeltNotificationsPanel settings={true} />
> ```
>
> **Using APIs:**
>
> ```jsx theme={null}
> const notificationElement = useNotificationUtils();
> notificationElement.enableSettings(); // enables the settings feature
> notificationElement.disableSettings(); // disables the settings feature
> ```

> [tab] Other Frameworks
>
> **Using Props:**
>
> ```html theme={null}
> <velt-notifications-tool settings="true"></velt-notifications-tool>
> <velt-notifications-panel settings="true"></velt-notifications-panel>
> ```
>
> **Using APIs:**
>
> ```js theme={null}
> const notificationElement = Velt.getNotificationElement();
> notificationElement.enableSettings(); // enables the settings feature
> notificationElement.disableSettings(); // disables the settings feature
> ```

## 5. (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](https://console.velt.dev/dashboard/config/notification) under API Key notification settings. [Learn more](https://velt.dev/docs/async-collaboration/notifications/customize-behavior.md#batching-and-delay-configuration)

```jsx React / Next.js theme={null}
import { VeltNotificationsTool } from '@veltdev/react';

function YourComponent() {

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

```html HTML theme={null}
<div className="toolbar">
  <velt-notifications-tool></velt-notifications-tool>
</div>
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.