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

<img src="https://mintcdn.com/velt/gAz_vLsG-ukKamYM/images/Notification_Dialog_Box.png?fit=max&auto=format&n=gAz_vLsG-ukKamYM&q=85&s=9e92f5ea7f34fd57795aea11ef762f35" alt="" width="1280" height="720" data-path="images/Notification_Dialog_Box.png" />

<Steps titleSize="h2">
  <Step title="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.</Warning>
  </Step>

  <Step title="Add the Notifications Tool component">
    * Place the `Velt Notifications Tool` component wherever you want the Notifications button to appear.

          <img src="https://mintcdn.com/velt/gAz_vLsG-ukKamYM/images/Notification_Dialog_Box.png?fit=max&auto=format&n=gAz_vLsG-ukKamYM&q=85&s=9e92f5ea7f34fd57795aea11ef762f35" alt="" width="1280" height="720" data-path="images/Notification_Dialog_Box.png" />

    <Tabs>
      <Tab title="React / Next.js">
        ```jsx theme={null}
        <div className="toolbar">
          <VeltNotificationsTool/>
        </div>
        ```
      </Tab>

      <Tab title="Other Frameworks">
        ```jsx theme={null}
        <div className="toolbar">
          <velt-notifications-tool></velt-notifications-tool>
        </div>
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="(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.

          <img src="https://mintcdn.com/velt/gAz_vLsG-ukKamYM/images/Notification_Dialog_Box.png?fit=max&auto=format&n=gAz_vLsG-ukKamYM&q=85&s=9e92f5ea7f34fd57795aea11ef762f35" alt="" width="1280" height="720" data-path="images/Notification_Dialog_Box.png" />

    <Tabs>
      <Tab title="React / Next.js">
        ```jsx theme={null}
        <div className="toolbar">
          <VeltNotificationsPanel />
        </div>
        ```
      </Tab>

      <Tab title="Other Frameworks">
        ```jsx theme={null}
        <div className="toolbar">
          <velt-notifications-panel></velt-notifications-panel>
        </div>
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="(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](/async-collaboration/notifications/customize-behavior#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](/async-collaboration/notifications/customize-behavior#setsettingsinitialconfig)
      * Update settings programmatically with `setSettings()` API. [Learn more](/async-collaboration/notifications/customize-behavior#setsettings)
      * Get current settings with `getSettings()` API. [Learn more](/async-collaboration/notifications/customize-behavior#getsettings)
      * Subscribe to settings updates with `settingsUpdated` event. [Learn more](/async-collaboration/notifications/customize-behavior#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.
    </Warning>

    <Tabs>
      <Tab title="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>

      <Tab title="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
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="(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](/async-collaboration/notifications/customize-behavior#batching-and-delay-configuration)
  </Step>
</Steps>

<RequestExample>
  ```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>
  ```
</RequestExample>