Release Notes
March 14 2024
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.
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/addnotification API end point.
Sample Post Request:
const options = {method: 'POST', body: JSON.stringify(body)};
fetch('https://api.velt.dev/addnotification', 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?