​
Versions

​
Notifications Component

The Notifications component can be used to notify your users in-app when they receive a reply to a comment or are @mentioned by a teammate.

You will need to enable Notifications in your console in order for Notifications component to work.

Open in larger window

To implement Notifications, simply add it to your app like this:

React / Next.js
import { VeltNotificationsTool, VeltNotificationsHistoryPanel} from '@veltdev/react';

function YourComponent() {

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

​
Custom Notifications

Additionally, you can send custom notifications to this component using our https://api.velt.dev/v1/notifications/add API end point.

Sample Post Request:

const options = {method: 'POST', body: JSON.stringify(body)};

fetch('https://api.velt.dev/v1/notifications/add', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

Sample Body:

{
    "data": {
        "apiKey": "YOUR_API_KEY",
        "authToken": "YOUR_AUTH_TOKEN",
        "documentId": "YOUR_DOCUMENT_ID", 
        "actionUser": {
            "email": "actionuseremail@domain", // required
            "name": "Action Username", // optional
            "photoUrl": "Action User Photo URL", // optional
            "userId": "User ID", // required
        },
        "displayHeadlineMessageTemplate": "This is main template, you can pass variables using curly brackets like this: {actionUser}, {recipientUser}, {yourCustomVariableWithStringValue}",
        "displayHeadlineMessageTemplateData": {
            "actionUser": {
                "email": "actionuseremail@domain", // required
                "name": "Action Username", // optional
                "photoUrl": "Action User Photo URL", // optional
                "userId": "User ID", // required
            },
            "recipientUser": {
                "email": "recipientuseremail@domain", // required
                "name": "Recipient Username", // optional
                "photoUrl": "Recipient User Photo URL", // optional
                "userId": "User ID", // required
            },
            "yourCustomVariableWithStringValue": "Variable will be replaced with this text"
        },
        "displayBodyMessage": "This is body message (Secondary message)",

	 // Pass list of users who should be notified, notification will be shown to all the users in all section in notification panel and notification history panel, but it will be shown in 'forYou' section also to notifyUsers.
        "notifyUsers": [
            {
                "email": "notifyuseremail@domain", // required
                "name": "Notify User Name", // optional
                "photoUrl": "Notify User Photo URL", // optional
                "userId": "User ID", // required
            }
        ]
    }
}

​
Dark Mode on All Tool and Button Components

You can now configure Dark Mode individually on all Tool and Button Components in the Velt SDK.

Example:

<VeltCommentTool darkMode={true} />
<VeltSidebarButton darkMode={true} />
<VeltHuddleTool darkMode={true} />
<VeltRecorderTool darkMode={true} />
<VeltUserInviteTool darkMode={true} />
<VeltArrowTool darkMode={true} />
<VeltNotificationsTool darkMode={true} />
<VeltNotificationsPanel darkMode={true} />
<VeltNotificationsHistoryPanel darkMode={true} />

If you want to configure Dark Mode globally, you can also use:

client.setDarkMode(true)

​
Bug Fixes

  • Fixed bug where you could still drag comments into restricted areas
  • Fixed user email related issue for admin users in invite dialog
  • Fixed typed related issues in darkMode
  • Added option to disable live selection with disableFeatures()

Was this page helpful?

April 16 2024March 5 2024