velt-notifications-best-practices

Implements Velt notification panels, delivery channels, and preference management in React applications.

1|Updated Jan 23, 2026
One-click install
npx skills add https://github.com/velt-js/agent-skills --skill velt-notifications-best-practices-velt-js
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: velt-notifications-best-practices
Source: https://github.com/velt-js/agent-skills/tree/main/skills/velt-notifications-best-practices
Command: npx skills add https://github.com/velt-js/agent-skills --skill velt-notifications-best-practices-velt-js

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @veltdev/react, and includes references (resource) components.

What problem does it solve? Integrating in-app notifications, email delivery, and user preference management with the Velt collaboration SDK involves many configuration steps and APIs, and mistakes lead to missing notifications, stale unread counts, or broken email delivery. ## Core Features & Use Cases - Panel Setup and Configuration: Add VeltNotificationsTool, configure tabs (For You, All, Documents), choose popover or sidebar display modes, and filter notifications to the current document. - Data Access and Server-Side Management: Use React hooks like useNotificationsData and useUnreadNotificationsCount, REST API v2 endpoints, and NotificationDataProvider resolvers to fetch, mark read, and delete notifications. - Delivery Channels and Preferences: Configure email notifications via SendGrid, webhook integrations for Slack or Linear, per-user channel settings, and server-side delay and batching pipelines. - Use Case: When building a collaborative Next.js app, use these rules to add a notification bell, wire @mention emails through SendGrid, and let users control their notification preferences per channel. ## Quick Start Ask the agent to set up Velt notifications with a notification panel and email delivery for your React application.

Frequently Asked Questions about velt-notifications-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add in-app notifications to a React app with Velt?▼

Enable the Notifications feature in the Velt Console, then add the VeltNotificationsTool component inside your VeltProvider to render the bell icon. Use VeltNotificationsPanel for an embedded panel instead of a popover.

How to set up email notifications with SendGrid in Velt?▼

Create a SendGrid API key, add it in the Velt Console under Settings > Email, and verify your sender address. Emails trigger on @mentions and comment replies based on each user's email channel preference (ALL, MINE, or NONE).

Can I fetch Velt notifications from my own backend?▼

Yes, register a NotificationDataProvider via client.setDataProviders() with get and delete handlers to route custom notifications through your backend. This applies only to notifications where notificationSource is 'custom'.

Why are my Velt notifications not appearing in the panel?▼

Verify notifications are enabled in the Velt Console, the user is authenticated via authProvider, and setDocument() was called with the correct document ID. Also check the browser console for errors and confirm hooks are used within VeltProvider.

Does Velt support notifications across multiple organizations?▼

Yes, enable cross-organization notifications with the enableCrossOrganization prop or API method to merge other orgs' notifications into the For You feed. Only the For You feed is supported, and the current organization is always excluded.