This is currently only compatible with setDocuments method.
Ensure that the data providers are set prior to calling identify method.
The data provider methods must return the correct status code (e.g. 200 for success, 500 for errors) and success boolean in the response object. This ensures proper error handling and retries.
If you are using REST API to add or update comments, ensure that you set isCommentResolverUsed and isCommentTextAvailable fields in the request object. Learn more

Overview

Velt supports self-hosting your comments and related data:

Comments can be stored on your own infrastructure, with only necessary identifiers on Velt servers.
Velt Components automatically hydrate comment data in the frontend by fetching from your configured data provider.
This gives you full control over comment data while maintaining all Velt collaboration features.
This automatically also ensures that the in-app notifications content is not stored on Velt servers. The content is generated using the comments data in the frontend.

Email notifications via Velt’s SendGrid integration are not available when you self-host comment content. Since the content lives on your infrastructure, Velt cannot construct and send emails via the sendgrid integration. Instead, use Webhooks to receive events (e.g., mentions, replies), fetch the relevant comment/notification content from your database, and send emails from your own email provider.

How does it work?

When comments are created, updated, deleted or requested, the SDK uses your configured CommentAnnotationDataProvider to handle storage and retrieval
The data provider implements get, save, and delete methods to interact with your database
Velt handles the data mapping and realtime synchronization while delegating persistence of actual content to your infrastructure
The data provider works at the Comment Annotation (Thread) level not at the individual Comment (Message) level.
For write requests (save, delete), the operation is first performed on your database and only if we get a success response, the SDK will perform the operation on the Velt server. If the operation fails on your database, the SDK will not perform the operation on the Velt server.
You can configure retries, timeouts, etc. for the data provider.

Implementation Approaches

You can implement comment self-hosting using either of these approaches:

Endpoint based: Provide endpoint URLs and let the SDK handle HTTP requests
Function based: Implement get, save, and delete methods yourself

Both approaches are fully backward compatible and can be used together.

Feature	Function based	Endpoint based
Best For	Complex setups requiring middleware logic, dynamic headers, or transformation before sending	Standard REST APIs where you just need to pass the request “as-is” to the backend
Implementation	You write the `fetch()` or `axios` code	You provide the endpoint `url`, static or async `headers`, and optional `credentials`
Flexibility	High	Medium
Speed	Medium	High

Endpoint based DataProvider

Instead of implementing custom methods, you can configure endpoints directly and let the SDK handle HTTP requests.

getConfig

Config-based endpoint for fetching comments. The SDK automatically makes HTTP POST requests with the request body.

Type: ResolverEndpointConfig
Request body format: GetCommentResolverRequest
Response format: ResolverResponse<Record<string, PartialCommentAnnotation>>

React / Next.js
Other Frameworks

const commentResolverConfig = {
  getConfig: {
    url: 'https://your-backend.com/api/velt/comments/get',
    headers: { 'Authorization': 'Bearer YOUR_TOKEN' }
  }
};

const commentDataProvider = {
  config: commentResolverConfig
};

<VeltProvider
  apiKey='YOUR_API_KEY'
  dataProviders={{ comment: commentDataProvider }}
>
</VeltProvider>

const commentResolverConfig = {
  getConfig: {
    url: 'https://your-backend.com/api/velt/comments/get',
    headers: { 'Authorization': 'Bearer YOUR_TOKEN' }
  }
};

const commentDataProvider = {
  config: commentResolverConfig
};

Velt.setDataProviders({ comment: commentDataProvider });

saveConfig

Config-based endpoint for saving comments. The SDK automatically makes HTTP POST requests with the request body.

Type: ResolverEndpointConfig
Request body format: SaveCommentResolverRequest
Response format: ResolverResponse<T>

Set additionalSaveEvents in your comment resolver config to opt into non-core save events, such as status changes, priority changes, assignments, approvals, comment-level reactions, and subscription changes.

React / Next.js
Other Frameworks

const commentResolverConfig = {
  saveConfig: {
    url: 'https://your-backend.com/api/velt/comments/save',
    headers: { 'Authorization': 'Bearer YOUR_TOKEN' }
  }
};

const commentDataProvider = {
  config: commentResolverConfig
};

<VeltProvider
  apiKey='YOUR_API_KEY'
  dataProviders={{ comment: commentDataProvider }}
>
</VeltProvider>

const commentResolverConfig = {
  saveConfig: {
    url: 'https://your-backend.com/api/velt/comments/save',
    headers: { 'Authorization': 'Bearer YOUR_TOKEN' }
  }
};

const commentDataProvider = {
  config: commentResolverConfig
};

Velt.setDataProviders({ comment: commentDataProvider });

deleteConfig

Config-based endpoint for deleting comments. The SDK automatically makes HTTP POST requests with the request body.

Type: ResolverEndpointConfig
Request body format: DeleteCommentResolverRequest
Response format: ResolverResponse<T>

React / Next.js
Other Frameworks

const commentResolverConfig = {
  deleteConfig: {
    url: 'https://your-backend.com/api/velt/comments/delete',
    headers: { 'Authorization': 'Bearer YOUR_TOKEN' }
  }
};

const commentDataProvider = {
  config: commentResolverConfig
};

<VeltProvider
  apiKey='YOUR_API_KEY'
  dataProviders={{ comment: commentDataProvider }}
>
</VeltProvider>

const commentResolverConfig = {
  deleteConfig: {
    url: 'https://your-backend.com/api/velt/comments/delete',
    headers: { 'Authorization': 'Bearer YOUR_TOKEN' }
  }
};

const commentDataProvider = {
  config: commentResolverConfig
};

Velt.setDataProviders({ comment: commentDataProvider });

Endpoint based Complete Example

React / Next.js
Other Frameworks

const commentResolverConfig = {
  getConfig: {
    url: 'https://your-backend.com/api/velt/comments/get',
    headers: { 'Authorization': 'Bearer YOUR_TOKEN' }
  },
  saveConfig: {
    url: 'https://your-backend.com/api/velt/comments/save',
    headers: { 'Authorization': 'Bearer YOUR_TOKEN' }
  },
  deleteConfig: {
    url: 'https://your-backend.com/api/velt/comments/delete',
    headers: { 'Authorization': 'Bearer YOUR_TOKEN' }
  },
  resolveTimeout: 2000,
  getRetryConfig: { retryCount: 3, retryDelay: 2000 },
  saveRetryConfig: { retryCount: 3, retryDelay: 2000 },
  deleteRetryConfig: { retryCount: 3, retryDelay: 2000 },
  additionalFields: ['status', 'assignedTo', 'priority']
};

const commentDataProvider = {
  config: commentResolverConfig
};

<VeltProvider
  apiKey='YOUR_API_KEY'
  dataProviders={{ comment: commentDataProvider }}
>
</VeltProvider>

const commentResolverConfig = {
  getConfig: {
    url: 'https://your-backend.com/api/velt/comments/get',
    headers: { 'Authorization': 'Bearer YOUR_TOKEN' }
  },
  saveConfig: {
    url: 'https://your-backend.com/api/velt/comments/save',
    headers: { 'Authorization': 'Bearer YOUR_TOKEN' }
  },
  deleteConfig: {
    url: 'https://your-backend.com/api/velt/comments/delete',
    headers: { 'Authorization': 'Bearer YOUR_TOKEN' }
  },
  resolveTimeout: 2000,
  getRetryConfig: { retryCount: 3, retryDelay: 2000 },
  saveRetryConfig: { retryCount: 3, retryDelay: 2000 },
  deleteRetryConfig: { retryCount: 3, retryDelay: 2000 },
  additionalFields: ['status', 'assignedTo', 'priority']
};

const commentDataProvider = {
  config: commentResolverConfig
};

Velt.setDataProviders({ comment: commentDataProvider });

Async headers and credentials

Endpoint configs (getConfig, saveConfig, deleteConfig) support an async headers function for short-lived per-request tokens, and a credentials field for cookie/session auth. This applies to all endpoint-based providers — see Async headers and credentials for details and examples.

additionalSaveEvents

By default the save endpoint receives only the 4 core PII events (COMMENT_ANNOTATION_ADD, COMMENT_ADD, COMMENT_UPDATE, COMMENT_DELETE). Opt in per-config via additionalSaveEvents to also receive non-core, annotation-level lifecycle events (e.g. status, assignment, approval, reactions) on the same save endpoint. The event values come from CommentResolverSaveEvent.

React / Next.js
Other Frameworks

import { CommentResolverSaveEvent } from '@veltdev/react';

const commentResolverConfig = {
  additionalSaveEvents: [
    { event: CommentResolverSaveEvent.STATUS_CHANGE },
    { event: CommentResolverSaveEvent.ASSIGN },
    { event: CommentResolverSaveEvent.APPROVE },
    { event: CommentResolverSaveEvent.REACTION_ADD }
  ],
  saveConfig: {
    url: 'https://your-backend.com/api/velt/comments/save',
    headers: { 'Authorization': 'Bearer YOUR_TOKEN' }
  }
};

const commentDataProvider = {
  config: commentResolverConfig
};

<VeltProvider
  apiKey='YOUR_API_KEY'
  dataProviders={{ comment: commentDataProvider }}
>
</VeltProvider>

const commentResolverConfig = {
  additionalSaveEvents: [
    { event: 'comment_annotation.status_change' },
    { event: 'comment_annotation.assign' },
    { event: 'comment_annotation.approve' },
    { event: 'comment.reaction_add' }
  ],
  saveConfig: {
    url: 'https://your-backend.com/api/velt/comments/save',
    headers: { 'Authorization': 'Bearer YOUR_TOKEN' }
  }
};

const commentDataProvider = {
  config: commentResolverConfig
};

Velt.setDataProviders({ comment: commentDataProvider });

Behavior nuances:

Additional events bypass the PII-change dedup gate — they are sent even when no PII changed.
The same stripped PartialCommentAnnotation payload is sent, so there is no new data egress.
For annotation-level events, commentId and targetComment are omitted (no specific target comment). For reaction events (comment.reaction_add / comment.reaction_delete), both are included since the reaction is on a specific comment.

Function based DataProvider

Implement custom methods to handle data operations yourself.

get

Method to fetch comments from your database. On error we will retry.

Param: GetCommentResolverRequest
Return: Promise<ResolverResponse<Record<string, PartialCommentAnnotation>>>

Frontend Example
Backend Endpoint Example (MongoDB)
Backend Endpoint Example (PostgreSQL)

const fetchCommentsFromDB = async (request) => {
  const response = await fetch('/api/velt/comments/get', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(request)
  });
  return await response.json();
};

const commentDataProvider = {
  get: fetchCommentsFromDB,
};

<VeltProvider
  apiKey='YOUR_API_KEY'
  dataProviders={{ comment: commentDataProvider }}
>
</VeltProvider>

// Build query from request
const { commentAnnotationIds, documentIds, organizationId } = req.body;
const query = {};
if (commentAnnotationIds?.length) {
  query.annotationId = { $in: commentAnnotationIds };
}
if (documentIds?.length) {
  query.documentId = { $in: documentIds };
}
if (organizationId) {
  query.organizationId = organizationId;
}

const annotations = await collection.find(query).toArray();

// Convert to Record<annotationId, annotation>
const result = {};
for (const annotation of annotations) {
  result[annotation.annotationId] = annotation;
}

// Return response in required format
res.json({ data: result, success: true, statusCode: 200 });

// Build parameterized query
const { commentAnnotationIds, documentIds, organizationId } = req.body;
const conditions = [];
const values = [];
let paramIndex = 1;

if (commentAnnotationIds?.length) {
  conditions.push(`annotation_id = ANY($${paramIndex++})`);
  values.push(commentAnnotationIds);
}
if (documentIds?.length) {
  conditions.push(`document_id = ANY($${paramIndex++})`);
  values.push(documentIds);
}
if (organizationId) {
  conditions.push(`organization_id = $${paramIndex++}`);
  values.push(organizationId);
}

const whereClause = conditions.length ? `WHERE ${conditions.join(' AND ')}` : '';
const { rows } = await client.query(
  `SELECT annotation_id, data FROM comment_annotations ${whereClause}`,
  values
);

// Convert to Record<annotationId, annotation>
const result = {};
for (const row of rows) {
  result[row.annotation_id] = row.data;
}

// Return response in required format
res.json({ data: result, success: true, statusCode: 200 });

save

Save comments to your database. Return a success or error response. On error we will retry.

Param: SaveCommentResolverRequest
- Note in the SaveCommentResolverRequest object, you will receive the event name that triggered the save. Core values use ResolverActions (the 4 core PII events); opt-in non-core values, enabled via additionalSaveEvents, use CommentResolverSaveEvent or a raw string.
- The payload also includes an optional targetComment (the full PartialComment for the comment identified by commentId), so your backend no longer needs to re-derive it by scanning commentAnnotation[*].comments. Use it as request context in your handler; saveComments does not persist it automatically. It is omitted when commentId is absent or unmatched.
Return: Promise<ResolverResponse<T>>

If you are using REST API to add or update comments, ensure that you set isCommentResolverUsed and isCommentTextAvailable fields in the request object. Learn more

Frontend Example
Backend Endpoint Example (MongoDB)
Backend Endpoint Example (PostgreSQL)

const saveCommentsToDB = async (request) => {
  const response = await fetch('/api/velt/comments/save', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(request)
  });
  return await response.json();
};

const commentDataProvider = {
  save: saveCommentsToDB,
};

<VeltProvider
  apiKey='YOUR_API_KEY'
  dataProviders={{ comment: commentDataProvider }}
>
</VeltProvider>

const { annotations, context } = req.body;

// Bulk upsert annotations
const operations = Object.entries(annotations).map(([id, annotation]) => ({
  updateOne: {
    filter: { annotationId: id },
    update: {
      $set: {
        ...annotation,
        annotationId: id,
        documentId: context?.documentId || annotation.documentId,
        organizationId: context?.organizationId || annotation.organizationId,
      }
    },
    upsert: true
  }
}));

if (operations.length > 0) {
  await collection.bulkWrite(operations);
}

// Return response in required format
res.json({ success: true, statusCode: 200 });

const { annotations, context } = req.body;

// Transaction-based upsert
await client.query('BEGIN');

for (const [id, annotation] of Object.entries(annotations)) {
  const data = { ...annotation, annotationId: id };

  await client.query(
    `INSERT INTO comment_annotations (annotation_id, document_id, organization_id, data, updated_at)
     VALUES ($1, $2, $3, $4, NOW())
     ON CONFLICT (annotation_id)
     DO UPDATE SET data = EXCLUDED.data, updated_at = NOW()`,
    [id, annotation.documentId, annotation.organizationId, JSON.stringify(data)]
  );
}

await client.query('COMMIT');

// Return response in required format
res.json({ success: true, statusCode: 200 });

delete

Delete comments from your database. Return a success or error response. On error we will retry.

Param: DeleteCommentResolverRequest
Return: Promise<ResolverResponse<T>>

Frontend Example
Backend Endpoint Example (MongoDB)
Backend Endpoint Example (PostgreSQL)

const deleteCommentsFromDB = async (request) => {
  const response = await fetch('/api/velt/comments/delete', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(request)
  });
  return await response.json();
};

const commentDataProvider = {
  delete: deleteCommentsFromDB,
};

<VeltProvider
  apiKey='YOUR_API_KEY'
  dataProviders={{ comment: commentDataProvider }}
>
</VeltProvider>

const { annotationId } = req.body;

await collection.deleteOne({ annotationId });

// Return response in required format
res.json({ success: true, statusCode: 200 });

const { annotationId } = req.body;

await client.query(
  'DELETE FROM comment_annotations WHERE annotation_id = $1',
  [annotationId]
);

// Return response in required format
res.json({ success: true, statusCode: 200 });

config

Configuration for the comment data provider.

Type: ResolverConfig. Relevant properties:
- resolveTimeout: Timeout duration (in milliseconds) for resolver operations
- getRetryConfig: RetryConfig. Configure retry behavior for get operations.
- saveRetryConfig: RetryConfig. Configure retry behavior for save operations.
- deleteRetryConfig: RetryConfig. Configure retry behavior for delete operations.
- additionalFields: string[]. Custom fields that are copied into the resolver request payloads sent to your backend while still being kept in Velt’s database. Use this when you want a copy of a field in your own backend (e.g., for analytics or search) without removing it from Velt — for example status, assignedTo, priority.
- fieldsToRemove: string[]. Custom fields that are moved out of Velt’s database into yours: they are sent to your backend, deleted from Velt’s storage, and merged back on read. Use this for custom fields that must not be stored by Velt at all (e.g., internalTicketId). See Excluding & extending fields for the full behavior comparison.
- additionalSaveEvents: CommentResolverSaveEvent[]. Additional non-core comment events to send to your save resolver, such as status changes, priority changes, assignment changes, approvals, comment-level reactions, and subscription changes.

fieldsToRemove is only for your own custom fields. Never list a field Velt uses to query, scope, position, sync, or render an annotation (e.g., metadata, annotationId, status, location, from, isCommentResolverUsed) or comments will fail to load, appear in the wrong place, or break filtering. If in doubt, use additionalFields instead. See the full list of fields to avoid.

const commentResolverConfig = {
  resolveTimeout: 2000,
  getRetryConfig: { retryCount: 3, retryDelay: 2000 },
  saveRetryConfig: { retryCount: 3, retryDelay: 2000 },
  deleteRetryConfig: { retryCount: 3, retryDelay: 2000 },
  additionalFields: ['status', 'assignedTo', 'priority'],
  fieldsToRemove: ['internalTicketId'],
  additionalSaveEvents: [
    'comment_annotation.status_change',
    'comment_annotation.priority_change',
    'comment_annotation.assign',
    'comment.reaction_add',
    'comment.reaction_delete'
  ]
};

Function based Complete Example

React / Next.js
Other Frameworks

const fetchCommentsFromDB = async (request) => {
  const response = await fetch('/api/velt/comments/get', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(request)
  });
  return await response.json();
};

const saveCommentsToDB = async (request) => {
  const response = await fetch('/api/velt/comments/save', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(request)
  });
  return await response.json();
};

const deleteCommentsFromDB = async (request) => {
  const response = await fetch('/api/velt/comments/delete', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(request)
  });
  return await response.json();
};

const commentResolverConfig = {
  resolveTimeout: 2000,
  getRetryConfig: { retryCount: 3, retryDelay: 2000 },
  saveRetryConfig: { retryCount: 3, retryDelay: 2000 },
  deleteRetryConfig: { retryCount: 3, retryDelay: 2000 },
  additionalFields: ['status', 'assignedTo', 'priority']
};

const commentDataProvider = {
  get: fetchCommentsFromDB,
  save: saveCommentsToDB,
  delete: deleteCommentsFromDB,
  config: commentResolverConfig
};

<VeltProvider
  apiKey='YOUR_API_KEY'
  dataProviders={{ comment: commentDataProvider }}
>
</VeltProvider>

const fetchCommentsFromDB = async (request) => {
  const response = await fetch('/api/velt/comments/get', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(request)
  });
  return await response.json();
};

const saveCommentsToDB = async (request) => {
  const response = await fetch('/api/velt/comments/save', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(request)
  });
  return await response.json();
};

const deleteCommentsFromDB = async (request) => {
  const response = await fetch('/api/velt/comments/delete', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(request)
  });
  return await response.json();
};

const commentResolverConfig = {
  resolveTimeout: 2000,
  getRetryConfig: { retryCount: 3, retryDelay: 2000 },
  saveRetryConfig: { retryCount: 3, retryDelay: 2000 },
  deleteRetryConfig: { retryCount: 3, retryDelay: 2000 },
  additionalFields: ['status', 'assignedTo', 'priority']
};

const commentDataProvider = {
  get: fetchCommentsFromDB,
  save: saveCommentsToDB,
  delete: deleteCommentsFromDB,
  config: commentResolverConfig
};

Velt.setDataProviders({ comment: commentDataProvider });

Triggering Email Notifications when Self-Hosting

When you self-host content, use Webhooks to trigger emails from your own system:

Enable relevant webhooks

Subscribe to comment-related events (e.g., user mentions, replies). See Webhooks.

Receive webhook and fetch content from your DB

Your server receives the webhook event. Use IDs from the payload (e.g., annotationId, commentId) to query your own comment and notification content from your database via your Data Provider.

Assemble email content and recipients

Combine the webhook event context with the self-hosted content to build the subject, body, and list of recipients (e.g., mentioned users).

Send email via your provider

Use your own email service (SendGrid under your account, SES, Postmark, etc.) to send the email.

Example:

Example Webhook Payload
Example Notification Code (Node.js)

cURL

POST /webhooks/velt HTTP/1.1
Content-Type: application/json

{
  "webhookId": "webhook-123",
  "actionType": "newlyAdded",
  "commentAnnotation": {
    "annotationId": "ANNOTATION_ID",
    "metadata": {
      "documentId": "DOC_ID",
      "apiKey": "API_KEY"
    }
  },
  "targetComment": {
    "commentId": 123,
    "from": {
      "userId": "USER_1"
    }
  },
  "actionUser": {
    "userId": "USER_1",
    "name": "John Doe",
    "email": "john@example.com"
  },
  "metadata": {
    "apiKey": "API_KEY",
    "documentId": "DOC_ID",
    "pageInfo": {
      "url": "https://app.example.com/doc/123"
    }
  },
  "notificationSource": "comment",
  "platform": "sdk"
}

Node.js

// Pseudocode: handle webhook, fetch content, send email
app.post('/webhooks/velt', async (req, res) => {
  const evt = req.body;
  const annotationId = evt?.commentAnnotation?.annotationId;
  const targetCommentId = evt?.targetComment?.commentId;

  // 1) Fetch self-hosted content
  const annotation = await db.commentAnnotations.get(annotationId);
  const targetComment = annotation?.comments?.[targetCommentId];

  // 2) Resolve recipients (e.g., mentioned users)
  const recipients = await resolveMentionedUsers(annotation, targetComment);

  // 3) Compose email
  const subject = `${evt.actionUser?.name} mentioned you`;
  const body = targetComment?.commentText || '';
  const pageUrl = evt?.metadata?.pageInfo?.url;

  // 4) Send via your provider
  await emailClient.send({ to: recipients, subject, html: renderTemplate({ body, pageUrl }) });

  res.sendStatus(200);
});

Sample Data

Stored on your database
Stored on Velt servers

{
    "annotationId": "ANNOTATION_ID",
    "metadata": {
        "apiKey": "API_KEY",
        "documentId": "DOCUMENT_ID",
        "organizationId": "ORGANIZATION_ID"
    },
    "comments": {
        "184639": {
            "commentId": 184639,
            "commentHtml": "<p>Hey @Jane, can you review this?</p>",
            "commentText": "Hey @Jane, can you review this?",
            "from": {
                "userId": "USER_ID"
            },
            "to": [
                {
                    "userId": "JANE_USER_ID"
                }
            ],
            "taggedUserContacts": [
                {
                    "userId": "JANE_USER_ID",
                    "contact": {
                        "userId": "JANE_USER_ID"
                    },
                    "text": "@Jane"
                }
            ]
        },
        "743772": {
            "commentId": 743772,
            "attachments": {
                "758336": {
                    "url": "https://your-bucket.s3.amazonaws.com/attachments/API_KEY/ATTACHMENT_ID.png",
                    "name": "image.png",
                    "attachmentId": 758336
                }
            },
            "from": {
                "userId": "USER_ID"
            }
        }
    }
}

{
    "annotationId": "ANNOTATION_ID",
    "annotationIndex": 3,
    "annotationNumber": 4,
    "color": "#A25F9E",
    "comments": [
        {
            "attachments": [],
            "commentId": 184639,
            "createdAt": 1768544691938,
            "from": {
                "userId": "USER_ID"
            },
            "isCommentResolverUsed": true,
            "isCommentTextAvailable": true,
            "isDraft": false,
            "lastUpdated": "2026-01-16T05:34:19.402Z",
            "reactionAnnotationIds": ["REACTION_ANNOTATION_ID"],
            "taggedUserContacts": [],
            "to": [],
            "type": "text"
        },
        {
            "attachments": [
                {
                    "attachmentId": 758336,
                    "isAttachmentResolverUsed": true,
                    "mimeType": "image/png",
                    "size": 289870,
                    "type": "png"
                }
            ],
            "commentId": 743772,
            "createdAt": 1768544717230,
            "from": {
                "userId": "USER_ID"
            },
            "isCommentResolverUsed": true,
            "isDraft": false,
            "lastUpdated": "2026-01-16T05:34:31.352Z",
            "reactionAnnotationIds": [],
            "taggedUserContacts": [],
            "to": [],
            "type": "text"
        }
    ],
    "createdAt": 1768544637011,
    "from": {
        "userId": "USER_ID"
    },
    "involvedUserIds": ["USER_ID"],
    "lastUpdated": 1768542354784,
    "metadata": {
        "apiKey": "API_KEY",
        "clientDocumentId": "DOCUMENT_ID",
        "clientOrganizationId": "ORGANIZATION_ID",
        "documentId": "INTERNAL_DOC_ID",
        "organizationId": "INTERNAL_ORG_ID"
    },
    "pageInfo": {
        "baseUrl": "https://your-app.com",
        "commentUrl": "https://your-app.com/?commentId=ANNOTATION_ID",
        "path": "/",
        "url": "https://your-app.com/"
    },
    "status": {
        "id": "OPEN",
        "name": "Open",
        "color": "var(--velt-accent, #625DF5)",
        "lightColor": "var(--velt-accent-light, #E7E8FA)",
        "type": "default"
    }
}

Note: Comment text/HTML content is NOT stored on Velt servers when using the comment resolver. Only metadata like isCommentResolverUsed, isCommentTextAvailable, attachment references (without URL/name), and reaction annotation IDs are stored.

Debugging

You can subscribe to dataProvider events to monitor and debug get, save, and delete operations. The event includes a moduleName field that identifies which module triggered the resolver call, helping you trace data provider requests. You can also use the Velt Chrome DevTools extension to inspect and debug your Velt implementation. Type: CommentResolverModuleName

React / Next.js
Other Frameworks

import { useVeltClient } from '@veltdev/react';

const { client } = useVeltClient();

useEffect(() => {
  if (!client) return;

  const subscription = client.on('dataProvider').subscribe((event) => {
    console.log('Data Provider Event:', event);
    console.log('Module Name:', event.moduleName);
  });

  return () => subscription?.unsubscribe();
}, [client]);

const subscription = Velt.on('dataProvider').subscribe((event) => {
  console.log('Data Provider Event:', event);
  console.log('Module Name:', event.moduleName);
});

// Unsubscribe when done
subscription?.unsubscribe();

​Overview

​How does it work?

​Implementation Approaches

​Endpoint based DataProvider

​getConfig

​saveConfig

​deleteConfig

​Endpoint based Complete Example

​Async headers and credentials

​additionalSaveEvents

​Function based DataProvider

​get

​save

​delete

​config

​Function based Complete Example

​Triggering Email Notifications when Self-Hosting

​Sample Data

​Debugging

Overview

How does it work?

Implementation Approaches

Endpoint based DataProvider

getConfig

saveConfig

deleteConfig

Endpoint based Complete Example

Async headers and credentials

additionalSaveEvents

Function based DataProvider

get

save

delete

config

Function based Complete Example

Triggering Email Notifications when Self-Hosting

Sample Data

Debugging