# Add Comment Annotations Source: https://docs.velt.dev/api-reference/rest-apis/comments-feature/comment-annotations/add-comment-annotations POST https://api.velt.dev/v1/commentannotations/add Use this API to add comment annotations to a document within an organization. * You can add comments on an elemement, text or page. * You can provide HTML or text content. * Additional filters can be applied using location IDs. # Endpoint `POST https://api.velt.dev/v1/commentannotations/add` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Document ID Location ID Location Name Target Element Element DOM Id Target Text. Provide this if you want to add comment annotation on the provided text content. Occurrence. Provide this if you want to add comment annotation on a text content. Select All Content. Provide this if you want to select and add comment annotation on the entire text content of the target elementId. Array of Comment Data Comment content in plain text string Comment content in HTML string User object from whom the comment is added Created At timestamp (in milliseconds since epoch). Last Updated timestamp (in milliseconds since epoch). Status Type. Light Color Raw SVG of the icon Icon URL User object to whom the comment is assigned Custom key/value metadata object Created At timestamp (in milliseconds since epoch). Last Updated timestamp (in milliseconds since epoch). Priority Priority ID Priority Color Priority Name Priority Light Color ## **Example Requests** #### Add comment annotation by organizationId, documentId and location ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "commentAnnotations": [ { "location": { "id": "yourLocationId", "locationName": "yourLocationName" }, "targetElement": { "elementId": "yourElementId", "targetText": "Your Target Text", "occurrence": 1, "selectAllContent": false }, "commentData": [ { "commentText": "Sample Comment", "commentHtml": "
Hello
", "from": { "userId": "yourUserId", "name": "yourUserName", "email": "yourUserEmail", } } ] } ] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Comment Annotation addition successfully.", "data": { "-O0mpUziLcBwzREvZKs6": { "success": true, "annotationId": "-O0mpUziLcBwzREvZKs6", "commentIds": [ 126535 ], "message": "Added Successfully" } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Comment Annotation addition successful.", "data": { "annotationId": "yourAnnotationId", "commentIds": [ 333130 ] } } } ``` # Delete Comment Annotations Source: https://docs.velt.dev/api-reference/rest-apis/comments-feature/comment-annotations/delete-comment-annotations POST https://api.velt.dev/v1/commentannotations/delete Use this API to delete comment annotations from a document within an organization. Additional filters can be applied using location IDs, annotation IDs, or user IDs. # Endpoint `POST https://api.velt.dev/v1/commentannotations/delete` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Document ID Array of Location IDs Array of Annotation IDs Array of User IDs ## **Example Requests** #### 1. Delete annotations by organizationId and documentId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId" } } ``` #### 2. Delete annotations by organizationId, documentId and locationIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "locationIds": [ "locationx" ] } } ``` #### 3. Delete annotations by organizationId, documentId, locationIds and userIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "locationIds": [ "locationx" ], "userIds": [ "yourUserId" ] } } ``` #### 4. Delete annotations by organizationId, documentId and userIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "userIds": [ "yourUserId" ] } } ``` #### 5. Delete annotations by organizationId, documentId and annotationIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "annotationIds": [ "yourAnnotationId1", "yourAnnotationId2" ] } } ``` #### 6. Delete annotations by organizationId, documentId, locationIds and annotationIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "locationIds": [ "locationx" ], "annotationIds": [ "yourAnnotationId1", "yourAnnotationId2" ] } } ``` #### 7. Delete annotations by documentId. This will work if the document was created without an organization. ```JSON { "data": { "documentId": "yourDocumentId" } } ``` #### 8. Delete annotations by documentId and locationIds. This will work if the document was created without an organization. ```JSON { "data": { "documentId": "yourDocumentId", "locationIds": [ "locationx" ] } } ``` #### 9. Delete annotations by documentId and userIds. This will work if the document was created without an organization. ```JSON { "data": { "documentId": "yourDocumentId", "userIds": [ "yourUserId" ] } } ``` #### 10. Delete annotations by documentId and annotationIds. This will work if the document was created without an organization. ```JSON { "data": { "documentId": "yourDocumentId", "annotationIds": [ "yourAnnotationId1", "yourAnnotationId2" ] } } ``` #### 11. Delete annotations by documentId, locationIds, and userIds. This will work if the document was created without an organization. ```JSON { "data": { "documentId": "yourDocumentId", "locationIds": [ "locationx" ], "userIds": [ "yourUserId" ] } } ``` #### 12. Delete annotations by documentId, locationIds, and annotationIds. This will work if the document was created without an organization. ```JSON { "data": { "documentId": "yourDocumentId", "locationIds": [ "locationx" ], "annotationIds": [ "yourAnnotationId1", "yourAnnotationId2" ] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Annotations deleted successfully.", "data": { "yourAnnotationId1": { "success": true, "id": "yourAnnotationId", "message": "Deleted Successfully" }, "yourAnnotationId2": { "success": false, "id": "yourAnnotationId2", "message": "Annotation not found." } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Annotations deleted successfully.", "data": { "yourAnnotationId": { "success": true, "id": "yourAnnotationId", "message": "Deleted Successfully" } } } } ``` # Get Comment Annotations Source: https://docs.velt.dev/api-reference/rest-apis/comments-feature/comment-annotations/get-comment-annotations POST https://api.velt.dev/v1/commentannotations/get Use this API to retrieve comment annotations from a document within an organization. Additional filters can be applied using location IDs, annotation IDs, or user IDs. # Endpoint `POST https://api.velt.dev/v1/commentannotations/get` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Document ID Array of Location IDs. Limit: Only 30 IDs can be passed at a time. Array of Annotation IDs. Limit: Only 30 IDs can be passed at a time. Array of User IDs. Limit: Only 30 IDs can be passed at a time. ## **Example Requests** #### 1. Get annotations by organizationId and documentId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", } } ``` #### 2. Get annotations by organizationId, documentId, and locationIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "locationIds": [ "locationx" ], } } ``` #### 3. Get annotations by organizationId, documentId, locationIds, and userIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "locationIds": [ "locationx" ], "userIds": [ "yourUserId" ], } } ``` #### 4. Get annotations by organizationId, documentId, and userIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "userIds": [ "yourUserId" ], } } ``` #### 5. Get annotations by organizationId, documentId, and annotationIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "annotationIds": [ "yourAnnotationId1", "yourAnnotationId2" ], } } ``` #### 6. Get annotations by organizationId, documentId, locationIds, and annotationIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "locationIds": [ "locationx" ], "annotationIds": [ "yourAnnotationId1", "yourAnnotationId2" ], } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Annotations fetched successfully.", "data": [ { "annotationId": "yourAnnotationId", "comments": [ { "commentId": 123456, "commentText": "This is a sample comment text.", "commentHtml": "

This is a sample comment text.

", "from": { "userId": "user123", "name": "John Doe", "email": "john.doe@example.com" }, "lastUpdated": "2023-06-15T10:30:00Z" } ], "from": { "userId": "user123", "name": "John Doe", "email": "john.doe@example.com" }, "color": "#00FF00", "createdAt": "2023-06-15T10:30:00Z", "lastUpdated": "2023-06-15T10:30:00Z", "status": { "id": "OPEN", "name": "Open", "color": "#0000FF", "type": "default" } }, null // null is returned only if you provided an annotationId that doesn't exist ] } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Annotations fetched successfully.", "data": [ { "annotationId": "yourAnnotationId", "comments": [ { "commentId": 123456, "commentText": "This is a sample comment text.", "commentHtml": "

This is a sample comment text.

", "from": { "userId": "user123", "name": "John Doe", "email": "john.doe@example.com" }, "lastUpdated": "2023-06-15T10:30:00Z", "type": "text", } ], "from": { "userId": "user123", "name": "John Doe", "email": "john.doe@example.com" }, "color": "#00FF00", "createdAt": "2023-06-15T10:30:00Z", "lastUpdated": "2023-06-15T10:30:00Z", "status": { "id": "OPEN", "name": "Open", "color": "#0000FF", "type": "default" } }, null // null is returned only if you provided an annotationId that doesn't exist ] } } ```
# Get Comment Annotations Count Source: https://docs.velt.dev/api-reference/rest-apis/comments-feature/comment-annotations/get-comment-annotations-count POST https://api.velt.dev/v1/commentannotations/count/get Use this API to retrieve the count of comment annotations for specified documents, including both total and unread counts. # Endpoint `POST https://api.velt.dev/v1/commentannotations/count/get` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Array of document IDs to get comment annotation counts for. Limit: Only 30 IDs can be passed at a time. ID of the user requesting the counts Array of status IDs to filter comments by (e.g., "OPEN", "IN\_PROGRESS") #### **Example Request** ```JSON { "data": { "organizationId": "ORG_ID", "documentIds": ["DOC_1", "DOC_2"], "userId": "1.1", "statusIds": ["OPEN", "IN_PROGRESS"] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Comment count retrieved successfully.", "data": { "DOC_1": { "total": 4, "unread": 2 }, "DOC_2": { "total": 2, "unread": 0 } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```JSON { "result": { "status": "success", "message": "Comment count retrieved successfully.", "data": { "DOC_1": { "total": 4, "unread": 2 }, "DOC_2": { "total": 2, "unread": 0 } } } } ``` # Get Comment Annotations v2 Source: https://docs.velt.dev/api-reference/rest-apis/comments-feature/comment-annotations/get-comment-annotations-v2 POST https://api.velt.dev/v2/commentannotations/get Use this API to retrieve comment annotations from a document within an organization. Additional filters can be applied using location IDs, annotation IDs, or user IDs. Prior to using this API, you must: * Deploy v4.0.0-beta.19 or higher of the Velt SDK. * Enable advanced queries option in [the console](https://console.velt.dev/dashboard/config/appconfig) # Endpoint `POST https://api.velt.dev/v2/commentannotations/get` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Array of Document IDs. Limit: Only 30 IDs can be passed at a time. If you don't provide this, data for all documents will be fetched. Data will be grouped by document ID. Array of Location IDs. Limit: Only 30 IDs can be passed at a time. Folder ID. Filters annotations by the folder. Array of Annotation IDs. Limit: Only 30 IDs can be passed at a time. Array of User IDs. Limit: Only 30 IDs can be passed at a time. {/* Order of results based on `lastUpdated` timestamp. Options: `asc` or `desc`. Default: `desc`. */} Status IDs of the annotations to filter on. Filter annotations updated after the given lastUpdated timestamp (in milliseconds since epoch). Filter annotations updated before the given lastUpdated timestamp (in milliseconds since epoch). Filter annotations created after the given createdAt timestamp (in milliseconds since epoch). Filter annotations created before the given createdAt timestamp (in milliseconds since epoch). Number of items to be retrieved per page. Default: 1000. Page token retrieved from previous API call. ## **Example Requests** #### 1. Get annotations by organizationId and documentId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "pageSize": 10, "pageToken": "1720441573192", "statusId": "OPEN" } } ``` #### 2. Get annotations by organizationId and documentIds grouped by documentId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentIds": ["yourDocumentId1", "yourDocumentId2"], "groupByDocumentId": true } } ``` #### 3. Get annotations by organizationId, documentId, and locationIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "locationIds": [ "locationx" ], "pageSize": 10, "pageToken": "1720441573192", "statusId": "OPEN" } } ``` #### 4. Get annotations by organizationId, documentId, locationIds, and userIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "locationIds": [ "locationx" ], "userIds": [ "yourUserId" ], "pageSize": 10, "pageToken": "1720441573192", "statusId": "OPEN" } } ``` #### 5. Get annotations by organizationId, documentId, and userIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "userIds": [ "yourUserId" ], "pageSize": 10, "pageToken": "1720441573192", "statusId": "OPEN" } } ``` #### 6. Get annotations by organizationId, documentId, and annotationIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "annotationIds": [ "yourAnnotationId1", "yourAnnotationId2" ], "pageSize": 10, "pageToken": "1720441573192", "statusId": "OPEN" } } ``` #### 7. Get annotations by organizationId, documentId, locationIds, and annotationIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "locationIds": [ "locationx" ], "annotationIds": [ "yourAnnotationId1", "yourAnnotationId2" ], "pageSize": 10, "pageToken": "1720441573192", "statusId": "OPEN" } } ``` #### 8. Get annotations by organizationId, statusIds, updatedAfter, and updatedBefore ```JSON { "data": { "organizationId": "myorg1", "statusIds": ["OPEN"], "updatedAfter": 1720441573192, "updatedBefore": 1720441573192, } } ``` #### 9. Get annotations by organizationId, folderId ```JSON { "data": { "organizationId": "myorg1", "folderId": "folderId1" } } ``` # Response #### Success Response with single documentId ```JSON { "result": { "status": "success", "message": "Annotations fetched successfully.", "data": [ { "annotationId": "yourAnnotationId", "comments": [ { "commentId": 123456, "commentText": "This is a sample comment text.", "commentHtml": "

This is a sample comment text.

", "from": { "userId": "user123", "name": "John Doe", "email": "john.doe@example.com" }, "lastUpdated": "2023-06-15T10:30:00Z" } ], "from": { "userId": "user123", "name": "John Doe", "email": "john.doe@example.com" }, "color": "#00FF00", "createdAt": "2023-06-15T10:30:00Z", "lastUpdated": "2023-06-15T10:30:00Z", "status": { "id": "OPEN", "name": "Open", "color": "#0000FF", "type": "default" } }, null // null is returned only if you provided an annotationId that doesn't exist ], "nextPageToken": "pageToken" } } ``` #### Success Response with multiple documentIds with groupByDocumentId ```JSON { "result": { "status": "success", "message": "Annotations fetched successfully.", "data": { "documentId1": [ { "annotationId": "annotationId1", "comments": [ //comment objects ], "from": { //from user object }, "status": { "color": "#625DF5", "id": "OPEN", "lightColor": "#E7E8FA", "name": "Open", "type": "default" }, //other fields }, { "annotationId": "annotationId2", "comments": [ //comment objects ], "from": { //from user object }, "status": { "color": "#625DF5", "id": "OPEN", "lightColor": "#E7E8FA", "name": "Open", "type": "default" }, //other fields }, ], "documentId1": [ { "annotationId": "annotationId1", "comments": [ //comment objects ], "from": { //from user object }, "status": { "color": "#625DF5", "id": "OPEN", "lightColor": "#E7E8FA", "name": "Open", "type": "default" }, //other fields }, { "annotationId": "annotationId2", "comments": [ //comment objects ], "from": { //from user object }, "status": { "color": "#625DF5", "id": "OPEN", "lightColor": "#E7E8FA", "name": "Open", "type": "default" }, //other fields }, ] }, "nextPageToken": "Ds7NMZw0wWSdmfJFLNioTw==" } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```JSON Single Document { "result": { "status": "success", "message": "Annotations fetched successfully.", "data": [ { "annotationId": "yourAnnotationId", "comments": [ { "commentId": 123456, "commentText": "This is a sample comment text.", "commentHtml": "

This is a sample comment text.

", "from": { "userId": "user123", "name": "John Doe", "email": "john.doe@example.com" }, "lastUpdated": "2023-06-15T10:30:00Z", "type": "text", } ], "from": { "userId": "user123", "name": "John Doe", "email": "john.doe@example.com" }, "color": "#00FF00", "createdAt": "2023-06-15T10:30:00Z", "lastUpdated": "2023-06-15T10:30:00Z", "status": { "id": "OPEN", "name": "Open", "color": "#0000FF", "type": "default" } }, null // null is returned only if you provided an annotationId that doesn't exist ], "nextPageToken": "pageToken" } } ``` ```JSON Multiple Documents { "result": { "status": "success", "message": "Annotations fetched successfully.", "data": { "documentId1": [ { "annotationId": "annotationId1", "comments": [ //comment objects ], "from": { //from user object }, "status": { "color": "#625DF5", "id": "OPEN", "lightColor": "#E7E8FA", "name": "Open", "type": "default" }, //other fields }, { "annotationId": "annotationId2", "comments": [ //comment objects ], "from": { //from user object }, "status": { "color": "#625DF5", "id": "OPEN", "lightColor": "#E7E8FA", "name": "Open", "type": "default" }, //other fields }, ], "documentId1": [ { "annotationId": "annotationId1", "comments": [ //comment objects ], "from": { //from user object }, "status": { "color": "#625DF5", "id": "OPEN", "lightColor": "#E7E8FA", "name": "Open", "type": "default" }, //other fields }, { "annotationId": "annotationId2", "comments": [ //comment objects ], "from": { //from user object }, "status": { "color": "#625DF5", "id": "OPEN", "lightColor": "#E7E8FA", "name": "Open", "type": "default" }, //other fields }, ] }, "nextPageToken": "Ds7NMZw0wWSdmfJFLNioTw==" } } ```
# Update Comment Annotations Source: https://docs.velt.dev/api-reference/rest-apis/comments-feature/comment-annotations/update-comment-annotations POST https://api.velt.dev/v1/commentannotations/update Use this API to update comment annotations in a document within an organization. Additional filters can be applied using location IDs, annotation IDs, or user IDs. # Endpoint `POST https://api.velt.dev/v1/commentannotations/update` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Document ID Array of Location IDs Array of User IDs. These are the users who created the comment annotation. Array of Annotation IDs Location ID Location Name Target Element Element DOM Id Target Text. Provide this if you want to add comment annotation on the provided text content. Occurrence. Provide this if you want to add comment annotation on a text content. Select All Content. Provide this if you want to select and add comment annotation on the entire text content of the target elementId. Array of Comment Data Comment content in plain text string Comment content in HTML string User object from whom the comment is added User object from whom the Comment Annotation is added Status Type Default Ongoing Terminal Light Color Raw SVG of the icon Icon URL User object to whom the comment is assigned Custom key/value metadata object Priority Priority ID Priority Color Priority Name Priority Light Color ## **Example Requests** #### 1. Update all comment annotations by organizationId and documentId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "updatedData" : { "status": { "type": "ongoing" } } } } ``` #### 2. Update comment annotations by organizationId, documentId and locationIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "locationIds": [ "locationx" ], "updatedData" : { "status": { "type": "ongoing" } } } } ``` #### 3. Update annotations by organizationId, documentId, locationIds and userIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "locationIds": [ "locationx" ], "userIds": [ "yourUserId" ], "updatedData" : { "status": { "type": "ongoing" } } } } ``` #### 4. Update comment annotations by organizationId, documentId and userIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "userIds": [ "yourUserId" ], "updatedData" : { "status": { "type": "ongoing" } } } } ``` #### 5. Update comment annotations by organizationId, documentId and annotationIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "annotationIds": [ "yourAnnotationId1", "yourAnnotationId2" ], "updatedData" : { "status": { "type": "ongoing" } } } } ``` #### 6. Update comment annotations by organizationId, documentId, locationIds and annotationIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "locationIds": [ "locationx" ], "annotationIds": [ "yourAnnotationId1", "yourAnnotationId2" ], "updatedData" : { "status": { "type": "ongoing" } } } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Annotations updated successfully.", "data": [ "yourAnnotationId1", "yourAnnotationId2", "yourAnnotationId3", "yourAnnotationId4", "yourAnnotationId5", "yourAnnotationId6", "yourAnnotationId7" ] } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Annotations updated successfully.", "data": [ "yourAnnotationId1", "yourAnnotationId2", "yourAnnotationId3", "yourAnnotationId4", "yourAnnotationId5", "yourAnnotationId6", "yourAnnotationId7" ] } } ``` # Add Comments Source: https://docs.velt.dev/api-reference/rest-apis/comments-feature/comments/add-comments POST https://api.velt.dev/v1/commentannotations/comments/add Use this API to add comments within a specific CommentAnnotation. # Endpoint `POST https://api.velt.dev/v1/commentannotations/comments/add` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Document ID Comment Annotation ID Array of Comment Data Comment content in plain text string Comment content in HTML string User object from whom the comment is added Created At timestamp (in milliseconds since epoch). Last Updated timestamp (in milliseconds since epoch). ## **Example Requests** #### 1. Add comment in a CommentAnnotation by organizationId, documentId, and annotationId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "annotationId": "yourAnnotationId", "commentData": [ { "commentText": "Sample Comment", "commentHtml": "
Hello
", "from": { "userId": "yourUserId" } } ] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Comment(s) added successfully.", "data": [ 778115 ] } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Comment(s) added successfully.", "data": [ 778115 ] } } ``` # Delete Comments Source: https://docs.velt.dev/api-reference/rest-apis/comments-feature/comments/delete-comments POST https://api.velt.dev/v1/commentannotations/comments/delete Use this API to delete comments within a specific CommentAnnotation. Additional filters can be applied using comment IDs. # Endpoint `POST https://api.velt.dev/v1/commentannotations/comments/delete` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Document ID Comment Annotation ID Array of Comment IDs ## **Example Requests** #### 1. Delete all comments of a CommentAnnotation by organizationId, documentId, and annotationId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "annotationId": "yourAnnotationId" } } ``` #### 2. Delete specific comments of a CommentAnnotation by organizationId, documentId, annotationId and commentIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "annotationId": "yourAnnotationId", "commentIds": [ 153783, 607395 ] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Comments(s) deleted successfully.", "data": { "153783": { "success": true, "id": 153783, "message": "Deleted successfully" }, "607395": { "success": false, "id": 607395, "message": "Not found" } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Comments(s) deleted successfully.", "data": { "153783": { "success": true, "id": 153783, "message": "Deleted successfully" } } } } ``` # Get Comments Source: https://docs.velt.dev/api-reference/rest-apis/comments-feature/comments/get-comments POST https://api.velt.dev/v1/commentannotations/comments/get Use this API to retrieve comments in a specific CommentAnnotation. Additional filters can be applied using comment IDs. Prior to using this API, you must: * Deploy v4.0.0-beta.19 or higher of the Velt SDK. * Enable advanced queries option in [the console](https://console.velt.dev/dashboard/config/appconfig) # Endpoint `POST https://api.velt.dev/v1/commentannotations/comments/get` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Document ID Comment Annotation ID User IDs Array of Comment IDs ## **Example Requests** #### 1. Get all comments with a CommentAnnotation by organizationId, documentId, and annotationId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "annotationId": "yourAnnotationId" } } ``` #### 2. Get specific comments of a CommentAnnotation by organizationId, documentId, annotationId and commentIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "annotationId": "yourAnnotationId", "commentIds": [ 153783, 607395 ] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Comments(s) retrieved successfully.", "data": [ { "commentHtml": "
Hello Updated 2
", "commentId": 153783, "commentText": "Sample Comment Text", "from": { "email": "user@example.com", "name": "User Name", "userId": "yourUserId" }, "lastUpdated": "2024-06-20T09:53:42.258Z", "status": "added", "type": "text" }, null // If comment not found ] } } ``` ```js { "result": { "status": "success", "message": "Comments(s) retrieved successfully.", "data": [ { "commentHtml": "
Hello Updated 2
", "commentId": 153783, "commentText": "Sample Comment Text", "from": { "email": "user@example.com", "name": "User Name", "userId": "yourUserId" }, "lastUpdated": "2024-06-20T09:53:42.258Z", "status": "added", "type": "text" } ] } } ```
# Update Comments Source: https://docs.velt.dev/api-reference/rest-apis/comments-feature/comments/update-comments POST https://api.velt.dev/v1/commentannotations/comments/update Use this API to update comments within a specific CommentAnnotation. # Endpoint `POST https://api.velt.dev/v1/commentannotations/comments/update` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Document ID Comment Annotation ID Comment IDs Comment data Comment content in plain text string Comment content in HTML string User object from whom the comment is added ## **Example Requests** #### Update comment in a CommentAnnotation by organizationId, documentId, annotationId and commentId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "annotationId": "yourAnnotationId", "commentIds": [ 153783, 607395 ], "updatedData": { "commentText": "Sample Updated Comment", "commentHtml": "
Hello Updated
" } } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Comment updated successfully.", "data": { "607395": { "success": true, "id": 607395, "message": "Updated successfully" } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Comment updated successfully.", "data": { "607395": { "success": true, "id": 607395, "message": "Updated successfully" } } } } ``` # Add Documents Source: https://docs.velt.dev/api-reference/rest-apis/documents/add-documents POST https://api.velt.dev/v1/organizations/documents/add Use this API to add documents with metadata to an organization. # Endpoint `POST https://api.velt.dev/v1/organizations/documents/add` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Array of Document objects ## **Example Requests** ```JSON { "data": { "organizationId": "yourOrganizationId", "documents": [ { "documentId": "yourDocumentId", "documentName": "Your Document Name" } ] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Document(s) added successfully.", "data": { "yourDocumentId": { "success": true, "id": "8121657101517513", "message": "Added Successfully" } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Document(s) added successfully.", "data": { "yourDocumentId": { "success": true, "id": "8121657101517513", "message": "Added Successfully" } } } } ``` # Delete Documents Source: https://docs.velt.dev/api-reference/rest-apis/documents/delete-documents POST https://api.velt.dev/v1/organizations/documents/delete Use this API to delete specific documents from an organization. # Endpoint `POST https://api.velt.dev/v1/organizations/documents/delete` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Array of Document IDs ## **Example Requests** ```JSON { "data": { "organizationId": "yourOrganizationId", "documentIds": ["yourDocumentId1", "yourDocumentId2"] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Document(s) deleted successfully.", "data": { "yourDocumentId1": { "success": true, "id": "6737987049068973", "message": "Deleted Successfully" }, "yourDocumentId2": { "success": true, "id": "2131443384150904", "message": "Document does not exist" } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Document(s) deleted successfully.", "data": { "yourDocumentId1": { "success": true, "id": "6737987049068973", "message": "Deleted Successfully" } } } } ``` # Get Documents Source: https://docs.velt.dev/api-reference/rest-apis/documents/get-documents POST https://api.velt.dev/v1/organizations/documents/get Use this API to retrieve specific documents or all documents from an organization. # Endpoint `POST https://api.velt.dev/v1/organizations/documents/get` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Array of Document IDs. Limit: Only 30 IDs can be passed at a time. ## **Example Requests** #### 1. Get all documents from organization ```JSON { "data": { "organizationId": "yourOrganizationId", } } ``` #### 2. Get specific documents from organization ```JSON { "data": { "organizationId": "yourOrganizationId", "documentIds": ["yourDocumentId1", "yourDocumentId2"], } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Document(s) retrieved successfully.", "data": [ { "documentName": "yourDocumentName", "disabled": false, "accessType": "public", "id": "yourDocumentId", } ] } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Document(s) retrieved successfully.", "data": [ { "documentName": "yourDocumentName", "disabled": false, "accessType": "public", "id": "yourDocumentId", } ] } } ``` # Get Documents v2 Source: https://docs.velt.dev/api-reference/rest-apis/documents/get-documents-v2 POST https://api.velt.dev/v2/organizations/documents/get Use this API to retrieve specific documents or all documents from an organization. Prior to using this API, you must: * Deploy v4.0.0-beta.19 or higher of the Velt SDK. * Enable advanced queries option in [the console](https://console.velt.dev/dashboard/config/appconfig) # Endpoint `POST https://api.velt.dev/v2/organizations/documents/get` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Array of Document IDs. Limit: Only 30 IDs can be passed at a time. Folder ID. Filters documents by the given folder ID. Number of items to be retrieved per page. Default: 1000. Page token retrieved from previous API call. ## **Example Requests** #### 1. Get all documents from organization ```JSON { "data": { "organizationId": "yourOrganizationId", "pageSize": 20, "pageToken": "8740648311207869" } } ``` #### 2. Get specific documents from organization ```JSON { "data": { "organizationId": "yourOrganizationId", "documentIds": ["yourDocumentId1", "yourDocumentId2"], } } ``` #### 3. Get documents by organizationId, folderId ```JSON { "data": { "organizationId": "yourOrganizationId", "folderId": "yourFolderId" } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Document(s) retrieved successfully.", "data": [ { "documentName": "yourDocumentName", "disabled": false, "accessType": "public", "id": "yourDocumentId", } ], "pageToken": "nextPageToken" } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Document(s) retrieved successfully.", "data": [ { "documentName": "yourDocumentName", "disabled": false, "accessType": "public", "id": "yourDocumentId", } ], "pageToken": "nextPageToken" } } ``` # Move Documents Source: https://docs.velt.dev/api-reference/rest-apis/documents/move-documents POST https://api.velt.dev/v1/organizations/documents/move Use this API to move documents to a different folder within an organization. # Endpoint `POST https://api.velt.dev/v1/organizations/documents/move` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Array of Document IDs. Limit: Only 30 IDs can be passed at a time. ID of the folder where documents will be moved ## **Example Requests** #### Move documents to a folder ```JSON { "data": { "organizationId": "yourOrganizationId", "documentIds": ["yourDocumentId1", "yourDocumentId2"], "folderId": "targetFolderId" } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Documents moved successfully." } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Documents moved successfully." } } ``` # Update Access for Documents Source: https://docs.velt.dev/api-reference/rest-apis/documents/update-document-access POST https://api.velt.dev/v1/organizations/documents/access/update Use this API to update the access type for a single or multiple documents at once. You can update the default access type for all the documents associated with your API Key in [console](https://console.velt.dev/dashboard/config/appconfig). # Endpoint `https://api.velt.dev/v1/organizations/documents/access/update` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Array of Document IDs Access type for the documents. Allowed values: `organizationPrivate`, `restricted`, `public`. [Learn more](/key-concepts/access-control/overview). ## **Example Requests** ```JSON { "data": { "organizationId": "yourOrganizationId", "documentIds": ["yourDocumentId1, yourDocumentId2"], "accessType": "organizationPrivate" } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Updated access for documents successfully.", "data": { "yourDocumentId": { "success": true, "accessType": "organizationPrivate", "message": "Document access type updated." } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Updated access for documents successfully.", "data": { "yourDocumentId": { "success": true, "accessType": "organizationPrivate", "message": "Document access type updated." } } } } ``` # Update Disabled State for Documents Source: https://docs.velt.dev/api-reference/rest-apis/documents/update-document-disable-state POST https://api.velt.dev/v1/organizations/documents/access/disablestate/update Use this API to enable or disable both read and write access for all users. Let's say your customer's trial or subscription has ended and you want to disable their access to the Velt data, you could use this to diable access to specific documents. # Endpoint `https://api.velt.dev/v1/organizations/documents/access/disablestate/update` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Array of Document IDs Whether to disable read and write access to the specified documents. Allowed values: `true`, `false` ## **Example Requests** ```JSON { "data": { "organizationId": "yourOrganizationId", "documentIds": ["yourDocumentId"], "disabled": true } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Updated disable state for documents successfully.", "data": { "yourDocumentId": { "success": true, "disabled": true, "message": "Document disabled state updated." } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Updated disable state for documents successfully.", "data": { "yourDocumentId": { "success": true, "disabled": true, "message": "Document disabled state updated." } } } } ``` # Update Documents Source: https://docs.velt.dev/api-reference/rest-apis/documents/update-documents POST https://api.velt.dev/v1/organizations/documents/update Use this API to update metadata of documents within an organization. # Endpoint `POST https://api.velt.dev/v1/organizations/documents/update` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Array of Document objects ## **Example Requests** ```JSON { "data": { "organizationId": "yourOrganizationId", "documents": [ { "documentId": "yourDocumentId", "documentName": "Your Document Name" } ] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Document(s) updated successfully.", "data": { "yourDocumentId": { "success": true, "id": "8121657101517513", "message": "Updated Successfully" } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Document(s) updated successfully.", "data": { "yourDocumentId": { "success": true, "id": "8121657101517513", "message": "Updated Successfully" } } } } ``` # Add Folder Source: https://docs.velt.dev/api-reference/rest-apis/folders/add-folder POST https://api.velt.dev/v1/organizations/folders/add Use this API to create a new folder in an organization. Prior to using this API, you must: * Deploy v4.0.0-beta.19 or higher of the Velt SDK. * Enable advanced queries option in [the console](https://console.velt.dev/dashboard/config/appconfig) # Endpoint `POST https://api.velt.dev/v1/organizations/folders/add` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Unique identifier for the new folder Name of the folder ID of the parent folder ## **Example Requests** ```JSON { "data": { "organizationId": "yourOrganizationId", "folders": [ { "folderId": "yourFolderId", "folderName": "yourFolderName", "parentFolderId": "yourParentFolderId" } ] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Folder created successfully.", "data": { "yourFolderId": { "success": true, "id": "yourFolderId", "message": "Folder added." } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Folder created successfully.", "data": { "yourFolderId": { "success": true, "id": "yourFolderId", "message": "Folder added." } } } } ``` # Get Folders Source: https://docs.velt.dev/api-reference/rest-apis/folders/get-folders POST https://api.velt.dev/v1/organizations/folders/get Use this API to retrieve the given folder's metadata and its subfolders. Prior to using this API, you must: * Deploy v4.0.0-beta.19 or higher of the Velt SDK. * Enable advanced queries option in [the console](https://console.velt.dev/dashboard/config/appconfig) # Endpoint `POST https://api.velt.dev/v1/organizations/folders/get` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Folder ID to retrieve a specific folder and its subfolders. If not provided, all folders in the organization will be retrieved. ## **Example Requests** #### 1. Get all folders in organization ```JSON { "data": { "organizationId": "yourOrganizationId" } } ``` #### 2. Get specific folder in an organization ```JSON { "data": { "organizationId": "yourOrganizationId", "folderId": "yourFolderId" } } ``` # Response #### Success Response for All Folders ```JSON { "result": { "status": "success", "message": "Folders retrieved successfully.", "data": [ { "folderId": "folderId1", "folderName": "Folder 1", "organizationId": "yourOrganizationId", "parentFolderId": "root", "createdAt": 1738695615706, "lastUpdated": 1738696287859 }, { "folderId": "folderId2", "folderName": "Folder 2", "organizationId": "yourOrganizationId", "parentFolderId": "root", "createdAt": 1738695077691, "lastUpdated": 1738695077691 } ] } } ``` #### Success Response for Specific Folder ```JSON { "result": { "status": "success", "message": "Folders retrieved successfully.", "data": [ { "folderId": "folderId1", "folderName": "Folder 1", "organizationId": "yourOrganizationId", "parentFolderId": "root", "createdAt": 1738695077691, "lastUpdated": 1738695077691, "subFolders": [ { "folderId": "childFolderId1", "folderName": "Child Folder 1", "organizationId": "yourOrganizationId", "parentFolderId": "folderId1", "createdAt": 1738695615706, "lastUpdated": 1738698727591 } ] } ] } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Folders retrieved successfully.", "data": [ { "folderId": "folderId1", "folderName": "Folder 1", "organizationId": "yourOrganizationId", "parentFolderId": "root", "createdAt": 1738695077691, "lastUpdated": 1738695077691, "subFolders": [ { "folderId": "childFolderId1", "folderName": "Child Folder 1", "organizationId": "yourOrganizationId", "parentFolderId": "folderId1", "createdAt": 1738695615706, "lastUpdated": 1738698727591 } ] } ] } } ``` # Update Folder Source: https://docs.velt.dev/api-reference/rest-apis/folders/update-folder POST https://api.velt.dev/v1/organizations/folders/update Use this API to: 1. update metadata of a folder within an organization. 2. move a folder and its contents to a different parent folder. Prior to using this API, you must: * Deploy v4.0.0-beta.19 or higher of the Velt SDK. * Enable advanced queries option in [the console](https://console.velt.dev/dashboard/config/appconfig) # Endpoint `POST https://api.velt.dev/v1/organizations/folders/update` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Unique identifier for the new folder Name of the folder ID of the parent folder ## **Example Request** ```JSON { "data": { "organizationId": "yourOrganizationId", "folders": [ { "folderId": "yourFolderId", "folderName": "yourFolderName", "parentFolderId": "yourParentFolderId" } ] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Folder Updated successfully.", "data": { "yourFolderId": { "success": true, "id": "yourFolderId", "message": "Folder Updated." } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Folder Updated successfully.", "data": { "yourFolderId": { "success": true, "id": "yourFolderId", "message": "Folder Updated." } } } } ``` # Update Access for Folders Source: https://docs.velt.dev/api-reference/rest-apis/folders/update-folder-access POST https://api.velt.dev/v1/organizations/folders/access/update Use this API to update the access type for a single or multiple folders at once. You can update the default access type for all the folders associated with your API Key in [console](https://console.velt.dev/dashboard/config/appconfig). # Endpoint `https://api.velt.dev/v1/organizations/folders/access/update` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Array of Folder IDs Access type for the folders. Allowed values: `organizationPrivate`, `restricted`, `public`. [Learn more](/key-concepts/access-control/overview). ## **Example Requests** ```JSON { "data": { "organizationId": "yourOrganizationId", "folderIds": ["yourFolderId1, yourFolderId2"], "accessType": "organizationPrivate" } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Updated access for folders successfully.", "data": { "yourFolderId": { "success": true, "accessType": "organizationPrivate", "message": "Folder access type updated." } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Updated access for folders successfully.", "data": { "yourFolderId": { "success": true, "accessType": "organizationPrivate", "message": "Folder access type updated." } } } } ``` # Broadcast Event Source: https://docs.velt.dev/api-reference/rest-apis/livestate/broadcast-event POST https://api.velt.dev/v1/livestate/broadcast Use this API to broadcast live state events to any document. Use it with the [Live State](/realtime-collaboration/live-state-sync/setup#get-live-data) feature. # Endpoint `POST https://api.velt.dev/v1/livestate/broadcast` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body Parameters Organization ID where the document belongs Document ID to broadcast the event to Unique identifier for the live state data The data to broadcast. Can be any valid serializable JSON object. If true, merges the new data with existing data instead of replacing it ## Example Request ```JSON { "organizationId": "YOUR_ORGANIZATION_ID", "documentId": "YOUR_DOCUMENT_ID", "liveStateDataId": "sample_live_state_data_id", "data": { "status": "active", "message": "Hello World", "customField": "custom value" }, "merge": true } ``` # Response ## Success Response ```JSON { "result": { "status": "success", "message": "Event broadcasted successfully.", "data": { "success": true } } } ``` ## Error Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "ERROR_CODE" } } ``` ```json { "result": { "status": "success", "message": "Event broadcasted successfully.", "data": { "success": true } } } ``` # Delete Data by Location Source: https://docs.velt.dev/api-reference/rest-apis/locations/delete-data-by-location POST https://api.velt.dev/v1/organizations/documents/locations/data/delete Delete all data associated with a specific location Use this API to delete all data (comments, recordings, or any other feature data) associated with a specific location. # Endpoint `POST https://api.velt.dev/v1/organizations/documents/locations/data/delete` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Your API key Your Auth Token Document ID The location object containing the data to be deleted ## **Example Request** ```JSON { "data": { "apiKey": "YOUR_API_KEY", "authToken": "YOUR_AUTH_TOKEN", "documentId": "YOUR_DOCUMENT_ID", "location": { "id": "scene_1", "locationName": "White scene" } } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Data deleted successfully.", "data": null } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Data deleted successfully.", "data": null } } ``` # Update Location Source: https://docs.velt.dev/api-reference/rest-apis/locations/update-location POST https://api.velt.dev/v1/organizations/documents/locations/update Update a Location's metadata Use this API to update a Location's metadata. # Endpoint `POST https://api.velt.dev/v1/organizations/documents/locations/update` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Your API key Your Auth Token Organization ID. Provide the organizationId if you are using Organizations feature. Document ID The current location object The updated location object When true, merges new location fields with existing ones. When false, completely replaces the old location object. Default: false ## **Example Request** ```JSON { "data": { "apiKey": "YOUR_API_KEY", "authToken": "YOUR_AUTH_TOKEN", "documentId": "YOUR_DOCUMENT_ID", "migrate": { "oldLocation": { "id": "scene_1", "locationName": "Untitled scene" }, "newLocation": { "id": "scene_1", "locationName": "White scene" } }, "merge": true } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Location updated.", "data": null } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Location updated.", "data": null } } ``` # Add Notifications Source: https://docs.velt.dev/api-reference/rest-apis/notifications/add-notifications POST https://api.velt.dev/v1/notifications/add Use this API to add notifications. # Endpoint `POST https://api.velt.dev/v1/notifications/add` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Document ID User who took the action Notification ID. If not provided, Velt will generate a random ID. Use this if you want more control on the ID being set and prevent duplicate notifications. Display Headline Message Template Display Headline Message Template Data (Optional) User who took the action User who was directly affected by the action Any custom field with string value Display Body Message Array of Notify Users Default is true. If set to true, the notification will be sent to all users in the organization. If set to false, the notification will be sent to only the users specified in the `notifyUsers` array. Any custom object to be stored with the notification. When the user clicks on the notification, this data will be sent in the callback. ## **Example Request** ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "actionUser": { "userId": "yourUserId", "name": "User Name", "email": "user@example.com" }, "displayHeadlineMessageTemplate": "This is main template, you can pass variables using curly brackets like this: {actionUser}, {recipientUser}, {yourCustomVariableWithStringValue}", "displayHeadlineMessageTemplateData": { "actionUser": { "userId": "yourUserId", "name": "User Name", "email": "user@example.com" }, "recipientUser": { "userId": "recipientUserId", "name": "Recipient Name", "email": "recipient@example.com" }, "yourCustomField": "Variable will be replaced with this text" }, "displayBodyMessage": "This is body message (Secondary message)", "notifyUsers": [ { "email": "test@example.com", "userId": "testingUserId" }, { "userId": "yourUserId", "name": "User Name", "email": "user@example.com" } ] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Notification added successfully.", "data": { "success": true, "message": "Notification added successfully." } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Notification added successfully.", "data": { "success": true, "message": "Notification added successfully." } } } ``` # Delete Notifications Source: https://docs.velt.dev/api-reference/rest-apis/notifications/delete-notifications POST https://api.velt.dev/v1/notifications/delete Use this API to delete notifications. # Endpoint `POST https://api.velt.dev/v1/notifications/delete` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Document ID (Optional) Location ID (Optional) User ID (Optional) Array of Notification IDs (Optional) ## **Example Requests** #### 1. Delete by organizationId and documentId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId" } } ``` #### 2. Delete by organizationId, documentId and notificationIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "notificationIds": [ "yourNotificationId" ] } } ``` #### 3. Delete by organizationId and userId ```JSON { "data": { "organizationId": "yourOrganizationId", "userId": "yourUserId" } } ``` #### 4. Delete by organizationId, userId and notificationIds ```JSON { "data": { "organizationId": "yourOrganizationId", "userId": "yourUserId", "notificationIds": [ "yourNotificationId" ] } } ``` #### 5. Delete by organizationId, documentId and userId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "userId": "yourUserId" } } ``` #### 6. Delete by organizationId, documentId, userId and notificationIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "userId": "yourUserId", "notificationIds": [ "yourNotificationId" ] } } ``` #### 7.Delete by organizationId, documentId and locationId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "locationId": "yourLocationId" } } ``` #### 8. Delete by organizationId, documentId, locationId and notificationIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "locationId": "yourLocationId", "notificationIds": [ "yourNotificationId" ] } } ``` #### 9. Delete by organizationId, locationId and userId ```JSON { "data": { "organizationId": "yourOrganizationId", "locationId": "yourLocationId", "userId": "yourUserId", } } ``` #### 10. Delete by organizationId, locationId, userId, and notificationIds ```JSON { "data": { "organizationId": "yourOrganizationId", "locationId": "yourLocationId", "userId": "yourUserId", "notificationIds": [ "yourNotificationId" ] } } ``` #### 11. Delete by organizationId, documentId, locationId and userId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "locationId": "yourLocationId", "userId": "yourUserId", } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Notification(s) deleted successfully.", "data": { "8955243231506071": { "success": true, "message": "Notification deleted." } } } } ``` #### When some notifications are not found ```JSON { "result": { "status": "success", "message": "Notification(s) deleted successfully.", "data": { "89552432315060712": { "success": false, "message": "Failed to delete notification." }, "8955243231506071": { "success": true, "message": "Notification deleted." } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Notification(s) deleted successfully.", "data": { "8955243231506071": { "success": true, "message": "Notification deleted." } } } } ``` # Get Notifications Source: https://docs.velt.dev/api-reference/rest-apis/notifications/get-notifications POST https://api.velt.dev/v1/notifications/get Use this API to retrieve notifications. # Endpoint `POST https://api.velt.dev/v1/notifications/get` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Document ID Location ID User ID Array of Notification IDs. Limit: Only 30 items can be passed at a time. ## **Example Requests** #### 1. Get by organizationId, documentId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId" } } ``` #### 2. Get by organizationId, documentId and notificationIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "notificationIds": [ "yourNotificationId" ] } } ``` #### 3. Get by organizationId, documentId and locationId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "locationId": "yourLocationId" } } ``` #### 4. Get by organizationId, documentId, locationId and notificationIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "locationId": "yourLocationId", "notificationIds": [ "yourNotificationId" ] } } ``` #### 5. Get by organizationId and userId ```JSON { "data": { "organizationId": "yourOrganizationId", "userId": "yourUserId" } } ``` #### 6. Get by organizationId, userId and notificationIds ```JSON { "data": { "organizationId": "yourOrganizationId", "userId": "yourUserId", "notificationIds": [ "yourNotificationId" ] } } ``` #### 7. Get by organizationId, documentId and userId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "userId": "yourUserId" } } ``` #### 8. Get by organizationId, locationId and userId ```JSON { "data": { "organizationId": "yourOrganizationId", "userId": "yourUserId", "locationId": "yourLocationId" } } ``` #### 9. Get by organizationId, documentId, locationId, and userId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "userId": "yourUserId", "locationId": "yourLocationId" } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Notification(s) retrieved successfully.", "data": [ { "id": "notificationId", "notificationSource": "custom", "notificationSourceData": {}, //The data of the notification source. e.g., CommentAnnotation "actionUser": { "email": "user@example.com", "name": "User Name", "userId": "yourUserId" }, "displayBodyMessage": "This is body message (Secondary message)", "displayHeadlineMessageTemplate": "This is main template, you can pass variables using curly brackets like this: {actionUser}, {recipientUser}, {yourCustomVariableWithStringValue}", "displayHeadlineMessageTemplateData": { "actionUser": { "email": "user@example.com", "name": "User Name", "userId": "yourUserId" }, "recipientUser": { "email": "recipient@example.com", "name": "Recipient Name", "userId": "recipientUserId" }, "yourCustomVariableWithStringValue": "Variable will be replaced with this text" }, "metadata": { "apiKey": "yourApiKey", "documentId": "yourDocumentId", "organizationId": "yourOrganizationId" }, "notifyUsers": { "yourNotifyUserId": true }, "notifyUsersByUserId": { "yourNotifyUserById": true }, "timestamp": 1722409519944 } ] } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Notification(s) retrieved successfully.", "data": [ { "id": "notificationId", "notificationSource": "custom", "notificationSourceData": {}, //The data of the notification source. e.g., CommentAnnotation "actionUser": { "email": "user@example.com", "name": "User Name", "userId": "yourUserId" }, "displayBodyMessage": "This is body message (Secondary message)", "displayHeadlineMessageTemplate": "This is main template, you can pass variables using curly brackets like this: {actionUser}, {recipientUser}, {yourCustomVariableWithStringValue}", "displayHeadlineMessageTemplateData": { "actionUser": { "email": "user@example.com", "name": "User Name", "userId": "yourUserId" }, "recipientUser": { "email": "recipient@example.com", "name": "Recipient Name", "userId": "recipientUserId" }, "yourCustomVariableWithStringValue": "Variable will be replaced with this text" }, "metadata": { "apiKey": "yourApiKey", "documentId": "yourDocumentId", "organizationId": "yourOrganizationId" }, "notifyUsers": { "yourNotifyUserId": true }, "notifyUsersByUserId": { "yourNotifyUserById": true }, "timestamp": 1722409519944 } ] } } ``` # Get Notifications v2 Source: https://docs.velt.dev/api-reference/rest-apis/notifications/get-notifications-v2 POST https://api.velt.dev/v2/notifications/get Use this API to retrieve notifications. Prior to using this API, you must: * Deploy v4.0.0-beta.19 or higher of the Velt SDK. * Enable advanced queries option in [the console](https://console.velt.dev/dashboard/config/appconfig) # Endpoint `POST https://api.velt.dev/v2/notifications/get` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Document ID. Either pass this or userId. Location ID User ID. Either pass this or documentId. Array of Notification IDs. Limit: Only 30 items can be passed at a time. Number of items to be retrieved per page. Default: 1000. Page token retrieved from previous API call. Order of the notifications based on timestamp. Default: desc. ## **Example Requests** #### 1. Get by organizationId, documentId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "pageSize": 20, "pageToken": "8740648311207869" } } ``` #### 2. Get by organizationId, documentId and notificationIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "notificationIds": [ "yourNotificationId" ] } } ``` #### 3. Get by organizationId, documentId and locationId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "locationId": "yourLocationId", "pageSize": 20, "pageToken": "8740648311207869" } } ``` #### 4. Get by organizationId, documentId, locationId and notificationIds ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "locationId": "yourLocationId", "notificationIds": [ "yourNotificationId" ] } } ``` #### 5. Get by organizationId and userId ```JSON { "data": { "organizationId": "yourOrganizationId", "userId": "yourUserId", "pageSize": 20, "pageToken": "8740648311207869" } } ``` #### 6. Get by organizationId, userId and notificationIds ```JSON { "data": { "organizationId": "yourOrganizationId", "userId": "yourUserId", "notificationIds": [ "yourNotificationId" ] } } ``` #### 7. Get by organizationId, documentId and userId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "userId": "yourUserId", "pageSize": 20, "pageToken": "8740648311207869" } } ``` #### 8. Get by organizationId, locationId and userId ```JSON { "data": { "organizationId": "yourOrganizationId", "userId": "yourUserId", "locationId": "yourLocationId", "pageSize": 20, "pageToken": "8740648311207869" } } ``` #### 9. Get by organizationId, documentId, locationId, and userId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "userId": "yourUserId", "locationId": "yourLocationId", "pageSize": 20, "pageToken": "8740648311207869" } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Notification(s) retrieved successfully.", "data": [ { "id": "notificationId", "notificationSource": "custom", "notificationSourceData": {}, //The data of the notification source. e.g., CommentAnnotation "actionUser": { "email": "user@example.com", "name": "User Name", "userId": "yourUserId" }, "displayBodyMessage": "This is body message (Secondary message)", "displayHeadlineMessageTemplate": "This is main template, you can pass variables using curly brackets like this: {actionUser}, {recipientUser}, {yourCustomVariableWithStringValue}", "displayHeadlineMessageTemplateData": { "actionUser": { "email": "user@example.com", "name": "User Name", "userId": "yourUserId" }, "recipientUser": { "email": "recipient@example.com", "name": "Recipient Name", "userId": "recipientUserId" }, "yourCustomVariableWithStringValue": "Variable will be replaced with this text" }, "metadata": { "apiKey": "yourApiKey", "documentId": "yourDocumentId", "organizationId": "yourOrganizationId" }, "notifyUsers": { "yourNotifyUserId": true }, "notifyUsersByUserId": { "yourNotifyUserById": true }, "timestamp": 1722409519944 } ], "pageToken": "nextPageToken" } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Notification(s) retrieved successfully.", "data": [ { "id": "notificationId", "notificationSource": "custom", "notificationSourceData": {}, //The data of the notification source. e.g., CommentAnnotation "actionUser": { "email": "user@example.com", "name": "User Name", "userId": "yourUserId" }, "displayBodyMessage": "This is body message (Secondary message)", "displayHeadlineMessageTemplate": "This is main template, you can pass variables using curly brackets like this: {actionUser}, {recipientUser}, {yourCustomVariableWithStringValue}", "displayHeadlineMessageTemplateData": { "actionUser": { "email": "user@example.com", "name": "User Name", "userId": "yourUserId" }, "recipientUser": { "email": "recipient@example.com", "name": "Recipient Name", "userId": "recipientUserId" }, "yourCustomVariableWithStringValue": "Variable will be replaced with this text" }, "metadata": { "apiKey": "yourApiKey", "documentId": "yourDocumentId", "organizationId": "yourOrganizationId" }, "notifyUsers": { "yourNotifyUserId": true }, "notifyUsersByUserId": { "yourNotifyUserById": true }, "timestamp": 1722409519944 } ], "pageToken": "nextPageToken" } } ``` # Update Notifications Source: https://docs.velt.dev/api-reference/rest-apis/notifications/update-notifications POST https://api.velt.dev/v1/notifications/update Use this API to update notifications. # Endpoint `POST https://api.velt.dev/v1/notifications/update` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Document ID (Optional) Location ID User ID (Optional) Notifications object Notification ID User who took the action Display Headline Message Template Display Headline Message Template Data User who took the action User who was directly affected by the action Any custom field with string value Display Body Message Any custom object to be stored with the notification. When the user clicks on the notification, this data will be sent to in the callback. ## **Example Requests** #### 1. Update by organizationId and documentId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "notifications": [ { "id": "yourNotificationId", "displayBodyMessage": "This is body message (Secondary message)", } ] } } ``` #### 2. Update by organizationId, documentId and locationId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "locationId": "yourLocationId", "notifications": [ { "id": "yourNotificationId", "displayBodyMessage": "This is body message (Secondary message)", } ] } } ``` #### 3. Update by organizationId, documentId and userId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "userId": "yourUserId", "notifications": [ { "id": "yourNotificationId", "displayBodyMessage": "This is body message (Secondary message)", } ] } } ``` #### 4. Update by organizationId and userId ```JSON { "data": { "organizationId": "yourOrganizationId", "userId": "yourUserId", "notifications": [ { "id": "yourNotificationId", "displayBodyMessage": "This is body message (Secondary message)", } ] } } ``` #### 5. Update by organizationId, documentId, locationId and userId ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "userId": "yourUserId", "locationId": "yourLocationId", "notifications": [ { "id": "yourNotificationId", "displayBodyMessage": "This is body message (Secondary message)", } ] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Notification(s) updated successfully.", "data": { "5471488637912692": { "success": true, "message": "Notification updated." } } } } ``` #### When some notifications are not found ```JSON { "result": { "status": "success", "message": "Notification(s) updated successfully.", "data": { "5471488637912692": { "success": false, "message": "Failed to update notification." }, "5471488637912693": { "success": true, "message": "Notification updated." } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Notification(s) updated successfully.", "data": { "5471488637912692": { "success": true, "message": "Notification updated." } } } } ``` # Add User Groups Source: https://docs.velt.dev/api-reference/rest-apis/organization-user-groups/add-groups POST https://api.velt.dev/v1/organizations/usergroups/add Use this API to add organization user groups to a specific organization. # Endpoint `POST https://api.velt.dev/v1/organizations/usergroups/add` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Array of Organization User Group objects ## **Example Request** #### Add organization user group in a specific organization ```JSON { "data": { "organizationId": "yourOrganizationId", "organizationUserGroups": [ { "groupId": "engineering", "groupName": "Engineering" } ] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Organization User Groups added successfully.", "data": { "yourGroupId": { "success": true, "id": "77ab6767b022ad0323ba39c24f12cc95", "message": "Organization user group added." } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Organization User Groups added successfully.", "data": { "yourGroupId": { "success": true, "id": "77ab6767b022ad0323ba39c24f12cc95", "message": "Organization user group added." } } } } ``` # Add Users to Groups Source: https://docs.velt.dev/api-reference/rest-apis/organization-user-groups/add-users-to-group POST https://api.velt.dev/v1/organizations/usergroups/users/add Use this API to add users to a specific organization user group. # Endpoint `POST https://api.velt.dev/v1/organizations/usergroups/users/add` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Organization User Group ID Array of User IDs ## **Example Requests** ```JSON { "data": { "organizationId": "yourOrganizationId", "organizationUserGroupId": "yourGroupId", "userIds": ["yourUserId1"] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Added organization users to group successfully.", "data": { "yourUserId1": { "success": true, "organizationUserGroupId": "yourGroupId", "message": "User added to organization user group." } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Added organization users to group successfully.", "data": { "yourUserId1": { "success": true, "organizationUserGroupId": "yourGroupId", "message": "User added to organization user group." } } } } ``` # Delete Users from Groups Source: https://docs.velt.dev/api-reference/rest-apis/organization-user-groups/delete-users-from-group POST https://api.velt.dev/v1/organizations/usergroups/users/delete Use this API to delete users from a specific organization user group. # Endpoint `POST https://api.velt.dev/v1/organizations/usergroups/users/delete` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Organization User Group ID Array of User IDs ## **Example Requests** #### Delete specific users from group ```JSON { "data": { "organizationId": "yourOrganizationId", "organizationUserGroupId": "yourGroupId", "userIds": ["yourUserId1"] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Deleted users from group successfully.", "data": { "yourUserId1": { "success": true, "organizationUserGroupId": "yourGroupId", "message": "User deleted from organization user group." } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Deleted users from group successfully.", "data": { "yourUserId1": { "success": true, "organizationUserGroupId": "yourGroupId", "message": "User deleted from organization user group." } } } } ``` # Add Organizations Source: https://docs.velt.dev/api-reference/rest-apis/organizations/add-organizations POST https://api.velt.dev/v1/organizations/add Use this API to add new organizations and its metadata. # Endpoint `POST https://api.velt.dev/v1/organizations/add` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Array of Organization objects ## **Example Requests** #### Add organization ```JSON { "data": { "organizations": [ { "organizationId": "yourOrganizationId", "organizationName": "Your Organization Name" } ] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Organization(s) added successfully.", "data": { "yourOrganizationId": { "success": true, "id": "02cf91e5e7a5f4c0b600c84cf248384b", "message": "Added Successfully" } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Organization(s) added successfully.", "data": { "yourOrganizationId": { "success": true, "id": "02cf91e5e7a5f4c0b600c84cf248384b", "message": "Added Successfully" } } } } ``` # Delete Organizations Source: https://docs.velt.dev/api-reference/rest-apis/organizations/delete-organizations POST https://api.velt.dev/v1/organizations/delete Use this API to delete specific organization(s) data by their IDs. # Endpoint `POST https://api.velt.dev/v1/organizations/delete` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Array of Organization IDs ## **Example Requests** #### Delete specific organization ```JSON { "data": { "organizationIds": [ "yourOrganizationId1", "yourOrganizationId2" ] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Organization(s) deleted successfully.", "data": { "yourOrganizationId1": { "success": true, "id": "02cf91e5e7a5f4c0b600c84cf248384b", "message": "Deleted Successfully" }, { "yourOrganizationId2": { "success": false, "id": "02cf91e5e7a5f4c0b600c84cf248384b", "message": "Organization does not exist" } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Organization(s) deleted successfully.", "data": { "yourOrganizationId": { "success": true, "id": "02cf91e5e7a5f4c0b600c84cf248384b", "message": "Deleted Successfully" } } } } ``` # Get Organizations Source: https://docs.velt.dev/api-reference/rest-apis/organizations/get-organizations POST https://api.velt.dev/v1/organizations/get Use this API to retrieve specific organizations by organization IDs. # Endpoint `POST https://api.velt.dev/v1/organizations/get` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Array of Organization IDs (Optional). Limit: Only 30 IDs can be passed at a time. If this is not provided, all organizations will be returned. ## **Example Requests** ```JSON { "data": { "organizationIds": [ "yourOrganizationId" ] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Organization(s) retrieved successfully.", "data": [ { "id": "yourOrganizationId", "organizationName": "Your Organization Name", "disabled": false, // other metadata fields may be included here } // ... more organizations if multiple were retrieved ] } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Organization(s) retrieved successfully.", "data": [ { "id": "yourOrganizationId", "organizationName": "Your Organization Name", "disabled": false, // other metadata fields may be included here } // ... more organizations if multiple were retrieved ] } } ``` # Get Organizations v2 Source: https://docs.velt.dev/api-reference/rest-apis/organizations/get-organizations-v2 POST https://api.velt.dev/v2/organizations/get Use this API to retrieve specific organizations by organization IDs. Prior to using this API, you must: * Deploy v4.0.0-beta.19 or higher of the Velt SDK. * Enable advanced queries option in [the console](https://console.velt.dev/dashboard/config/appconfig) # Endpoint `POST https://api.velt.dev/v2/organizations/get` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Array of Organization IDs (Optional). Limit: Only 30 IDs can be passed at a time. If this is not provided, all organizations will be returned. Number of items to be retrieved per page (Optional). Default: 1000. Page token retrieved from previous API call. (Optional) ## **Example Requests** ```JSON { "data": { "organizationIds": [ "yourOrganizationId" ], "pageSize": 1000, "pageToken": "pageToken" } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Organization(s) retrieved successfully.", "data": [ { "id": "yourOrganizationId", "organizationName": "Your Organization Name", "disabled": false, // other metadata fields may be included here } // ... more organizations if multiple were retrieved ], "nextPageToken": "pageToken" } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Organization(s) retrieved successfully.", "data": [ { "id": "yourOrganizationId", "organizationName": "Your Organization Name", "disabled": false, // other metadata fields may be included here } // ... more organizations if multiple were retrieved ], "nextPageToken": "pageToken" } } ``` # Update Disabled State for Organizations Source: https://docs.velt.dev/api-reference/rest-apis/organizations/update-organization-disable-state POST https://api.velt.dev/v1/organizations/access/disablestate/update Use this API to enable or disable both read and write access for all documents for all users. Let's say your customer's trial or subscription has ended and you want to disable their access to the Velt data, you could use this to disable access to the entire organization data. If organization does not exist, it will be created. # Endpoint `POST https://api.velt.dev/v1/organizations/access/disablestate/update` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Array of Organization IDs Whether to disable read and write access to the specified organizations. Allowed values: `true`, `false`. ## **Example Requests** ```JSON { "data": { "organizationIds": ["yourOrganizationId1","yourOrganizationId2"], "disabled": true } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Updated disable state for Organization(s) successfully.", "data": { "yourOrganizationId1": { "success": true, "id": "02cf91e5e7a5f4c0b600c84cf248384b", "message": "Updated disable state for organization Successfully" }, "yourOrganizationId2": { "success": false, "id": "44e0132f4c6b0d453f18df42d2263b4e", "message": "Organization does not exist" } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Updated disable state for Organization(s) successfully.", "data": { "yourOrganizationId": { "success": true, "id": "02cf91e5e7a5f4c0b600c84cf248384b", "message": "Updated disable state for organization Successfully" } } } } ``` # Update Organizations Source: https://docs.velt.dev/api-reference/rest-apis/organizations/update-organizations POST https://api.velt.dev/v1/organizations/update Use this API to update existing organization(s) metadata. # Endpoint `POST https://api.velt.dev/v1/organizations/update` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Array of Organization objects ## **Example Requests** ```JSON { "data": { "organizations": [ { "organizationId": "yourOrganizationId", "organizationName": "Your Updated Organization Name" } ] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "Organization(s) updated successfully.", "data": { "yourOrganizationId": { "success": true, "id": "02cf91e5e7a5f4c0b600c84cf248384b", "message": "Updated Successfully" } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Organization(s) updated successfully.", "data": { "yourOrganizationId": { "success": true, "id": "02cf91e5e7a5f4c0b600c84cf248384b", "message": "Updated Successfully" } } } } ``` # Add Users Source: https://docs.velt.dev/api-reference/rest-apis/users/add-users POST https://api.velt.dev/v1/users/add Use this API to add Users to: 1. **Organization:** This will provide them access to all the documents in the organization. It will also show users in the contact list of the organization. 2. **Document:** This will provide them access to the specified document. It will also show users in the contact list of the document. If you pass the `documentId`, then the users will be added to the document. * If organization does not exist, it will be created. * If you provide documentId or folderId, then the users will only be added at that level and not at the organization level. To also add users at the organization level, you will need to call this API again with only the organizationId. * If User's `initial` is not provided in the User object, then it will be automatically created using the name field. # Endpoint `POST https://api.velt.dev/v1/users/add` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Document ID. Provide this if you want to add users to a specific document. Folder ID. Provide this if you want to add users to a specific folder. Either provide `documentId` or `folderId`. Array of [User](/api-reference/models/User) objects. ## **Example Requests** #### 1. Add users to a specific organization ```JSON { "data": { "organizationId": "yourOrganizationId", "users": [ { "userId": "yourUserId1", "name": "User Name", "email": "user@email.com" } ] } } ``` #### 2. Add users to a specific document within an organization ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "users": [ { "userId": "yourUserId1", "name": "User Name", "email": "user@email.com" } ] } } ``` #### 3. Add users to a specific folder within an organization ```JSON { "data": { "organizationId": "yourOrganizationId", "folderId": "yourFolderId", "users": [ { "userId": "yourUserId1", "name": "User Name", "email": "user@email.com" } ] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "User(s) processed successfully.", "data": { "yourUserId1": { "success": true, "id": "4c250058149d6c9fb8c894c9ef29c790", "message": "User added." } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "User(s) processed successfully.", "data": { "yourUserId1": { "success": true, "id": "4c250058149d6c9fb8c894c9ef29c790", "message": "User added." } } } } ``` # Delete All User Data (GDPR) Source: https://docs.velt.dev/api-reference/rest-apis/users/delete-all-user-data-gdpr POST https://api.velt.dev/v1/users/data/delete Remove All User data from Velt. Use this API to remove all user data from Velt. This will: * remove their access from all the documents and data in the organization. * remove them from @mention contact dropdown list. * remove them from @mentions where they were tagged. * remove all feature data created by the user. eg: comments, reactions etc. This API may take up to 5 minutes to return a 201 response since it runs an asynchronous job to delete user data across the system. To speed up this process, you can optionally provide the organizationIds where the user belongs. # Endpoint `POST https://api.velt.dev/v1/users/data/delete` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Array of user Ids. Array of organization Ids. These are the organizations that the user is part of. ## **Example Request** ```JSON { "data": { "userIds": [ "yourUserId1", "yourUserId2" ], "organizationIds": [ "yourOrganizationId1", "yourOrganizationId2" ] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "User(s) deleted successfully.", "data": { "yourUserId1": { "success": true, "message": "User removed." } } } } ``` #### User(s) Not Found ```JSON { "result": { "status": "success", "message": "Deleted user data successfully.", } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "Deleted user data successfully.", } } ``` # Delete Users Source: https://docs.velt.dev/api-reference/rest-apis/users/delete-users POST https://api.velt.dev/v1/users/delete Remove Users from an Organization or a Document. Use this API to remove Users from: 1. **Organization:** This will remove their access from all the documents and data in the organization. It will also remove these users from the contact list of the organization. 2. **Document:** This will remove their access from the specified document. It will also remove these users from the contact list of the document. If you pass the `documentId`, then the users will be removed from the document. # Endpoint `POST https://api.velt.dev/v1/users/delete` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### Params Organization ID Document IDs. Provide this if you want to delete users from a specific document. Folder ID. Either provide `documentId` or `folderId`. Array of user Ids. ## **Example Requests** #### 1. Delete users in a specific organization ```JSON { "data": { "organizationId": "yourOrganizationId", "userIds": [ "yourUserId1" ] } } ``` #### 2. Delete users in a specific document within an organization ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "userIds": [ "yourUserId1" ] } } ``` #### 3. Delete users in a specific folder within an organization ```JSON { "data": { "organizationId": "yourOrganizationId", "folderId": "yourFolderId", "userIds": [ "yourUserId1" ] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "User(s) deleted successfully.", "data": { "yourUserId1": { "success": true, "message": "User removed." } } } } ``` #### User(s) Not Found ```JSON { "result": { "status": "success", "message": "User(s) deleted successfully.", "data": { "yourUserId1": { "success": true, "message": "User removed." }, { "yourUserId2": { "success": false, "message": "User does not exist." } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "User(s) deleted successfully.", "data": { "yourUserId1": { "success": true, "message": "User removed." } } } } ``` # Get Users Source: https://docs.velt.dev/api-reference/rest-apis/users/get-users POST https://api.velt.dev/v1/users/get Use this API to retrieve users based on various filters such as organization ID, document ID, organization user group IDs or user IDs. You can use these filters in various combinations to get the desired users. Some examples are shown below. # Endpoint `POST https://api.velt.dev/v1/users/get` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### **Params** Organization ID Document ID Array of User IDs. Limit: Only 30 items can be passed at a time. Array of Organization User Group IDs. Only 30 items can be passed at a time. ## **Example Requests** #### 1. Get users by organizationId ```JSON { "data": { "organizationId": "yourOrganizationId" } } ``` #### 2. Get users by documentId within an organization ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId" } } ``` #### 3. Get users by specific user IDs in an organization ```JSON { "data": { "organizationId": "yourOrganizationId", "userIds": [ "yourUserId1", "yourUserId2" ] } } ``` #### 4. Get users by specific user IDs in the given organization and document ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "userIds": [ "yourUserId1", "yourUserId2" ] } } ``` #### 5. Get users by organization and organization user group IDs ```JSON { "data": { "organizationId": "yourOrganizationId", "organizationUserGroupIds": [ "yourOrganizationUserGroupId" ] } } ``` #### 6. Get users by organization, organization user group IDs and user IDs ```JSON { "data": { "organizationId": "yourOrganizationId", "userIds": [ "yourUserId1", "yourUserId2" ], "organizationUserGroupIds": [ "yourOrganizationUserGroupId" ] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "User(s) retrieved successfully.", "data": [ { "email": "userEmail@domain.com", "name": "userName", "userId": "yourUserId" } ] } } ``` #### Failure Response ```JSON { "error": { "message": "Error retrieving user(s).", "status": "ERROR_CODE" } } ``` ```js { "result": { "status": "success", "message": "User(s) retrieved successfully.", "data": [ { "email": "userEmail@domain.com", "name": "userName", "userId": "yourUserId" } ] } } ``` # Get Users v2 Source: https://docs.velt.dev/api-reference/rest-apis/users/get-users-v2 POST https://api.velt.dev/v2/users/get Use this API to retrieve users based on various filters such as organization ID, document ID, organization user group IDs or user IDs. You can use these filters in various combinations to get the desired users. Some examples are shown below. Prior to using this API, you must: * Deploy v4.0.0-beta.19 or higher of the Velt SDK. * Enable advanced queries option in [the console](https://console.velt.dev/dashboard/config/appconfig) # Endpoint `POST https://api.velt.dev/v2/users/get` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### **Params** Organization ID Document ID Folder ID. Either provide `documentId` or `folderId`. Array of User IDs. Limit: Only 30 items can be passed at a time. Array of Organization User Group IDs. Only 30 items can be passed at a time. If true, all document users within the organization will be retrieved. You need not pass `documentId` in this case. This will not fetch organization-level users. If true, the response will be grouped by document ID. This works when `allDocuments` is set to true. Number of items to be retrieved per page. Default: 1000. Page token retrieved from previous API call. ## **Example Requests** #### 1. Get users by organizationId ```JSON { "data": { "organizationId": "yourOrganizationId", "pageSize": 1000, "pageToken": "pageToken" } } ``` #### 2. Get users by documentId within an organization ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId" } } ``` #### 3. Get Users from all documents within an organization. ```JSON { "data": { "organizationId": "yourOrganizationId", "allDocuments": true, "groupByDocumentId": true } } ``` #### 4. Get users by specific user IDs in an organization ```JSON { "data": { "organizationId": "yourOrganizationId", "userIds": [ "yourUserId1", "yourUserId2" ] } } ``` #### 5. Get users by specific user IDs in the given organization and document ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "userIds": [ "yourUserId1", "yourUserId2" ] } } ``` #### 6. Get users by organization and organization user group IDs ```JSON { "data": { "organizationId": "yourOrganizationId", "organizationUserGroupIds": [ "yourOrganizationUserGroupId" ] } } ``` #### 7. Get users by organization, organization user group IDs and user IDs ```JSON { "data": { "organizationId": "yourOrganizationId", "userIds": [ "yourUserId1", "yourUserId2" ], "organizationUserGroupIds": [ "yourOrganizationUserGroupId" ] } } ``` #### 8. Get users by folderId within an organization ```JSON { "data": { "organizationId": "yourOrganizationId", "folderId": "yourFolderId" } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "User(s) retrieved successfully.", "data": [ { "email": "userEmail@domain.com", "name": "userName", "userId": "yourUserId" } ], "nextPageToken": "pageToken" } } ``` #### Success Response with allDocuments and groupByDocumentId ```JSON { "result": { "status": "success", "message": "User(s) retrieved successfully.", "data": { "documentId1": [ { "email": "userEmail@domain.com", "name": "userName", "userId": "yourUserId" } ] }, "nextPageToken": "pageToken" } } ``` #### Failure Response ```JSON { "error": { "message": "Error retrieving user(s).", "status": "ERROR_CODE" } } ``` ```js { "result": { "status": "success", "message": "User(s) retrieved successfully.", "data": [ { "email": "userEmail@domain.com", "name": "userName", "userId": "yourUserId" } ], "pageToken": "pageToken" } } ``` # Update Users Source: https://docs.velt.dev/api-reference/rest-apis/users/update-users POST https://api.velt.dev/v1/users/update Use this API to update user metadata based on various filters such as organization ID, document ID, folder ID and user IDs. You can use these filters in various combinations to get the desired results. The user metadata such as name, email etc can be updated. # Endpoint `POST https://api.velt.dev/v1/users/update` # Headers Your API key. Your [Auth Token](/security/auth-tokens). # Body #### **Params** Organization ID Document ID Folder ID. Either provide `documentId` or `folderId`. Array of [User](/api-reference/models/User) objects. ## **Example Requests** #### 1. Update users in a specific organization ```JSON { "data": { "organizationId": "yourOrganizationId", "users": [ { "userId": "yourUserId1", "name": "User Name", "email": "user@email.com" } ] } } ``` #### 2. Update users in a specific document within an organization ```JSON { "data": { "organizationId": "yourOrganizationId", "documentId": "yourDocumentId", "users": [ { "userId": "yourUserId1", "name": "User Name", "email": "user@email.com" } ] } } ``` #### 3. Update users in a specific folder within an organization ```JSON { "data": { "organizationId": "yourOrganizationId", "folderId": "yourFolderId", "users": [ { "userId": "yourUserId1", "name": "User Name", "email": "user@email.com" } ] } } ``` # Response #### Success Response ```JSON { "result": { "status": "success", "message": "User(s) processed successfully.", "data": { "yourUserId1": { "success": true, "id": "7d87015b055a168b098cf05b870e40ff", "message": "User updated." } } } } ``` #### Some User(s) Not Found ```JSON { "result": { "status": "success", "message": "User(s) processed successfully.", "data": { "yourUserId1": { "success": true, "id": "7d87015b055a168b098cf05b870e40ff", "message": "User updated." }, "yourUserId2": { "success": false, "id": "ad22d93b49ad990d2b3d582d08d7768a", "message": "User does not exist." } } } } ``` #### Failure Response ```JSON { "error": { "message": "ERROR_MESSAGE", "status": "INVALID_ARGUMENT" } } ``` ```js { "result": { "status": "success", "message": "User(s) processed successfully.", "data": { "yourUserId1": { "success": true, "id": "7d87015b055a168b098cf05b870e40ff", "message": "User updated." } } } } ``` # API Methods Index Source: https://docs.velt.dev/api-reference/sdk/api/api-methods # Comments ### Threads #### addCommentAnnotation() Add a new comment annotation. * Params: [AddCommentAnnotationRequest](/api-reference/sdk/models/api-request-objects#addcommentannotationrequest) * Returns: [AddCommentAnnotationEvent](/api-reference/sdk/models/api-event-objects#addcommentannotationevent) * React Hook: `useAddCommentAnnotation()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#addcommentannotation) #### addCommentOnSelectedText() Add a comment on selected text. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#addcommentonselectedtext) #### addCommentOnElement() Add a comment on a specific element. * Params: `{ targetElement: object, commentData: array, status?: string }` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#addcommentonelement) #### addManualComment() Add a comment with custom positioning. * Params: `ManualCommentAnnotationConfig` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#addmanualcomment) #### deleteCommentAnnotation() Delete a comment annotation. * Params: [DeleteCommentAnnotationRequest](/api-reference/sdk/models/api-request-objects#deletecommentannotationrequest) * Returns: [DeleteCommentAnnotationEvent](/api-reference/sdk/models/api-event-objects#deletecommentannotationevent) * React Hook: `useDeleteCommentAnnotation()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#deletecommentannotation) #### deleteSelectedComment() Delete the currently selected comment. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior#deleteselectedcomment) #### getCommentAnnotationsCount() Get the total and unread comment annotations count for specified documents. * Params: [CommentRequestQuery](/api-reference/sdk/models/api-request-objects#commentrequestquery) (optional) * Returns: [GetCommentAnnotationsCountResponse](/api-reference/sdk/models/api-request-objects#getcommentannotationscountresponse) * React Hook: `useCommentAnnotationsCount()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#getcommentannotationscount) #### getUnreadCommentAnnotationCountByLocationId() Get count of unread comment annotations by location ID. * Params: `locationId: string` * Returns: `Observable` * React Hook: `useUnreadCommentAnnotationCountByLocationId()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#getunreadcommentannotationcountbylocationid) #### getCommentAnnotations() Get all the comment annotations for all the specified documents. * Params: [CommentRequestQuery](/api-reference/sdk/models/api-request-objects#commentrequestquery) (optional) * Returns: [GetCommentAnnotationsResponse](/api-reference/sdk/models/api-request-objects#getcommentannotationsresponse) * React Hook: `useGetCommentAnnotations()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#getcommentannotations) #### getSelectedComments() Get currently selected comment annotations. * Params: none * Returns: `Observable` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#getselectedcomments) #### getCommentAnnotationById() Get a specific comment annotation by ID. * Params: `{ annotationId: string, documentId?: string }` * Returns: `Observable` * React Hook: `useCommentAnnotationById()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#getcommentannotationbyid) #### getElementRefByAnnotationId() Get the DOM element reference for a comment annotation. * Params: `annotationId: string` * Returns: `string` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#getelementrefbyannotationid) ### Messages #### addComment() Add a comment to a specific comment annotation. * Params: [AddCommentRequest](/api-reference/sdk/models/api-request-objects#addcommentrequest) * Returns: [AddCommentEvent](/api-reference/sdk/models/api-event-objects#addcommentevent) * React Hook: `useAddComment()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#addcomment) #### updateComment() Update a comment in a specific comment annotation. * Params: [UpdateCommentRequest](/api-reference/sdk/models/api-request-objects#updatecommentrequest) * Returns: [UpdateCommentEvent](/api-reference/sdk/models/api-event-objects#updatecommentevent) * React Hook: `useUpdateComment()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#updatecomment) #### deleteComment() Delete a comment from a specific comment annotation. * Params: [DeleteCommentRequest](/api-reference/sdk/models/api-request-objects#deletecommentrequest) * Returns: [DeleteCommentEvent](/api-reference/sdk/models/api-event-objects#deletecommentevent) * React Hook: `useDeleteComment()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#deletecomment) #### getComment() Get comments from a specific comment annotation. * Params: [GetCommentRequest](/api-reference/sdk/models/api-request-objects#getcommentrequest) * Returns: [Comment\[\]](/api-reference/sdk/models/api-event-objects#comment) * React Hook: `useGetComment()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#getcomment) #### getUnreadCommentCountOnCurrentDocument() Get the number of unread comments on the current document. * Params: none * Returns: `Observable` * React Hook: `useUnreadCommentCountOnCurrentDocument()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#getunreadcommentcountoncurrentdocument) #### getUnreadCommentCountByLocationId() Get the number of unread comments by location ID. * Params: `locationId: string` * Returns: `Observable` * React Hook: `useUnreadCommentCountByLocationId()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#getunreadcommentcountbylocationid) #### getUnreadCommentCountByAnnotationId() Get the number of unread comments by annotation ID. * Params: `annotationId: string` * Returns: `Observable` * React Hook: `useUnreadCommentCountByAnnotationId()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#getunreadcommentcountbyannotationid) ### @Mentions #### updateContactList() Update the contact list for the current user session. * Params: `contacts: Array<{userId: string, name: string, email: string}>, options?: {merge: boolean}` * Returns: `void` * React Hook: `useContactUtils()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#updatecontactlist) #### updateContactListScopeForOrganizationUsers() Restrict which contacts are shown in the dropdown for organization users. * Params: `scopes: Array<'all' | 'organization' | 'organizationUserGroup' | 'document'>` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#updatecontactlistscopefororganizationusers) #### assignUser() Assign a user to a comment annotation. * Params: [AssignUserRequest](/api-reference/sdk/models/api-request-objects#assignuserrequest) * Returns: [AssignUserEvent](/api-reference/sdk/models/api-event-objects#assignuserevent) * React Hook: `useAssignUser()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#assignuser) #### enableUserMentions() Enable or disable user @mentions. * Params: none * Returns: `void` * React Hook: `useContactUtils()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enableusermentions) #### onContactSelected() Listen for when a contact is selected from the dropdown. * Params: none * Returns: `Observable` * React Hook: `useContactSelected()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#oncontactselected) #### enableAtHere() Enable or disable @here mentions. * Params: none * Returns: `void` * React Hook: `useContactUtils()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enableathere) #### setAtHereLabel() Customize the @here label text. * Params: `label: string` * Returns: `void` * React Hook: `useContactUtils()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#setatherelabel) #### setAtHereDescription() Customize the @here description text. * Params: `description: string` * Returns: `void` * React Hook: `useContactUtils()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#setatheredescription) #### subscribeCommentAnnotation() Subscribe to a comment annotation. * Params: [SubscribeCommentAnnotationRequest](/api-reference/sdk/models/api-request-objects#subscribecommentannotationrequest) * Returns: [SubscribeCommentAnnotationEvent](/api-reference/sdk/models/api-event-objects#subscribecommentannotationevent) * React Hook: `useSubscribeCommentAnnotation()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#subscribecommentannotation) #### unsubscribeCommentAnnotation() Unsubscribe from a comment annotation. * Params: [UnsubscribeCommentAnnotationRequest](/api-reference/sdk/models/api-request-objects#unsubscribecommentannotationrequest) * Returns: [UnsubscribeCommentAnnotationEvent](/api-reference/sdk/models/api-event-objects#unsubscribecommentannotationevent) * React Hook: `useUnsubscribeCommentAnnotation()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#unsubscribecommentannotation) #### enableCustomAutocompleteSearch() Enable custom autocomplete search for contact list. * Params: `none` * Returns: `void` * React Hook: `useContactUtils()` or `useCommentUtils()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#enablecustomautocompletesearch) #### disableCustomAutocompleteSearch() Disable custom autocomplete search for contact list. * Params: `none` * Returns: `void` * React Hook: `useContactUtils()` or `useCommentUtils()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#enablecustomautocompletesearch) ### Metadata #### addContext() Add custom metadata to a comment annotation. * Params: `{ [key: string]: any }` * Returns: `void` * React Hook: `useCommentEventCallback('addCommentAnnotation')` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#addcontext) #### updateContext() Update custom metadata on a comment annotation. * Params: `annotationId: string, context: { [key: string]: any }, config?: { merge: boolean }` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#updatecontext) ### Custom Lists #### addCustomListDataOnAnnotation() Add a custom dropdown list at the Comment Annotation level. * Params: `{ type: 'multi' | 'single', placeholder: string, data: Array<{ id: string, label: string }> }` * Returns: `void` * React Hook: `useCommentUtils()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#createcustomlistdataoncomment) #### addCustomListDataOnComment() Add a custom dropdown list that appears when a hotkey is pressed in the comment composer. * Params: `{ hotkey: string, type: 'custom', data: Array }` * Returns: `void` * React Hook: `useCommentUtils()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#createcustomlistdataoncomment) #### onAutocompleteChipClick() Listen for clicks on autocomplete chips in comments. * Params: none * Returns: `Observable` * React Hook: `useAutocompleteChipClick()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#createcustomlistdataoncomment) #### enableCustomAutocompleteSearch() Enable custom autocomplete search for custom list. * Params: `none` * Returns: `void` * React Hook: `useCommentUtils()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#enablecustomautocompletesearch) #### disableCustomAutocompleteSearch() Disable custom autocomplete search for custom list. * Params: `none` * Returns: `void` * React Hook: `useCommentUtils()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#enablecustomautocompletesearch) ### Event Subscription #### on() Subscribe to comment events. * Params: `CommentEventType`. [Here](/async-collaboration/comments/customize-behavior/customize-behavior#on) is the list of event types you can subscribe to. * Returns: `Observable`. [Here](/api-reference/sdk/models/api-event-objects#comment) is the list of events object types you can expect to receive. * React Hook: `useCommentEventCallback(CommentEventType)` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#on) ### Attachments #### enableAttachments() Enable file attachments in comments. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enableattachments) #### addAttachment() Add an attachment to a specific comment annotation. * Params: [AddAttachmentRequest](/api-reference/sdk/models/api-request-objects#addattachmentrequest) * Returns: `Promise` * React Hook: `useAddAttachment()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#addattachment) #### deleteAttachment() Delete an attachment from a specific comment annotation. * Params: [DeleteAttachmentConfig](/api-reference/sdk/models/api-request-objects#deleteattachmentconfig) * Returns: `Promise` * React Hook: `useDeleteAttachment()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#deleteattachment) #### getAttachment() Get attachments from a specific comment annotation. * Params: [GetAttachmentRequest](/api-reference/sdk/models/api-request-objects#getattachmentrequest) * Returns: `Promise` * React Hook: `useGetAttachment()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#getattachment) ### Reactions #### enableReactions() Enable emoji reactions in comments. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablereactions) #### setCustomReactions() Set custom reactions by passing a map containing reaction information. * Params: `{[reactionId: string]: {url?: string, emoji?: string}}` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#setcustomreactions) #### addReaction() Add a reaction to a specific comment annotation. * Params: [AddReactionRequest](/api-reference/sdk/models/api-request-objects#addreactionrequest) * Returns: `Promise` * React Hook: `useAddReaction()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#addreaction) #### deleteReaction() Delete a reaction from a specific comment annotation. * Params: [DeleteReactionRequest](/api-reference/sdk/models/api-request-objects#deletereactionrequest) * Returns: `Promise` * React Hook: `useDeleteReaction()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#deletereaction) #### toggleReaction() Toggle a reaction for a specific comment annotation. * Params: [ToggleReactionRequest](/api-reference/sdk/models/api-request-objects#togglereactionrequest) * Returns: `Promise` * React Hook: `useToggleReaction()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#togglereaction) ### Status & Priority #### enableStatus() Enable status dropdown & filters in comments. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablestatus) #### setCustomStatus() Set custom statuses by passing an array of status objects. * Params: `StatusConfig[]` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#setcustomstatus) #### enableResolveButton() Enable resolve button on comments. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enableresolvebutton) #### updateStatus() Update the status of a comment annotation. * Params: [UpdateStatusRequest](/api-reference/sdk/models/api-request-objects#updatestatusrequest) * Returns: `Promise` * React Hook: `useUpdateStatus()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#updatestatus) #### resolveCommentAnnotation() Resolve a comment annotation. * Params: [ResolveCommentAnnotationRequest](/api-reference/sdk/models/api-request-objects#resolvecommentannotationrequest) * Returns: `Promise` * React Hook: `useResolveCommentAnnotation()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#resolvecommentannotation) #### enablePriority() Enable priority settings in comments. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablepriority) #### setCustomPriority() Set custom priorities by passing an array of priority objects. * Params: `PriorityConfig[]` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#setcustompriority) #### updatePriority() Update the priority of a comment annotation. * Params: [UpdatePriorityRequest](/api-reference/sdk/models/api-request-objects#updatepriorityrequest) * Returns: `Promise` * React Hook: `useUpdatePriority()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#updatepriority) ### Recordings #### deleteRecording() Delete a recording from a comment. * Params: [DeleteRecordingRequest](/api-reference/sdk/models/api-request-objects#deleterecordingrequest) * Returns: `Promise` * React Hook: `useDeleteRecording()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#deleterecording) #### getRecording() Get recordings from a comment. * Params: [GetRecordingRequest](/api-reference/sdk/models/api-request-objects#getrecordingrequest) * Returns: `Promise` * React Hook: `useGetRecording()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#getrecording) #### setAllowedRecordings() Set allowed recording types (audio, video, screen). * Params: `string` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#setallowedrecordings) #### enableRecordingCountdown() Enable countdown before recording starts. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablerecordingcountdown) #### enableRecordingTranscription() Enable AI transcription for recordings. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablerecordingtranscription) ### Deep Link #### getLink() Get a link to a specific comment annotation. * Params: [GetLinkRequest](/api-reference/sdk/models/api-request-objects#getlinkrequest) * Returns: [GetLinkResponse](/api-reference/sdk/models/api-event-objects#getlinkresponse) * React Hook: `useGetLink()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#getlink) #### copyLink() Copy a link to a specific comment annotation to clipboard. * Params: [CopyLinkRequest](/api-reference/sdk/models/api-request-objects#copylinkrequest) * Returns: [CopyLinkEvent](/api-reference/sdk/models/api-event-objects#copylinkevent) * React Hook: `useCopyLink()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#copylink) ### Navigation #### scrollToCommentByAnnotationId() Scroll the page to a comment's location. * Params: `annotationId: string` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#scrolltocommentbyannotationid) #### selectCommentByAnnotationId() Programmatically select a comment annotation. * Params: `annotationId: string` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#selectcommentbyannotationid) #### onCommentSelectionChange() Subscribe to comment selection changes. * Params: none * Returns: `Observable` * React Hook: `useCommentSelectionChangeHandler()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#oncommentselectionchange) #### enablescrollToComment() Enable automatic scrolling to comments. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablescrolltocomment) ### DOM Controls #### allowedElementIds() Set allowed element IDs for commenting. * Params: `elementIds: string[]` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#allowedelementids) #### allowedElementClassNames() Set allowed element class names for commenting. * Params: `classNames: string[]` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#allowedelementclassnames) #### allowedElementQuerySelectors() Set allowed element query selectors for commenting. * Params: `selectors: string[]` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#allowedelementqueryselectors) ### AI Categorization #### enableAutoCategorize() Enable AI auto-categorization of comments. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enableautocategorize) #### setCustomCategory() Set custom categories for comment categorization. * Params: `categories: Array<{id: string, name: string, color: string}>` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#setcustomcategory) ### UI #### updateCommentDialogPosition() Update position of comment dialog relative to pin. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#updatecommentdialogposition) #### enableSidebarButtonOnCommentDialog() Enable sidebar button on comment dialogs. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablesidebarbuttononcommentdialog) #### onSidebarButtonOnCommentDialogClick() Subscribe to clicks on comment dialog sidebar button. * Params: none * Returns: `Observable` * React Hook: `useCommentDialogSidebarClickHandler()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#onsidebarbuttononcommentdialogclick) #### enableDeleteReplyConfirmation() Enable confirmation dialog before deleting replies. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enabledeletereplyconfirmation) #### enableMobileMode() Enable mobile-optimized comment UI. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablemobilemode) #### enableCommentPinHighlighter() Enable highlighting outline around comment pins. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablecommentpinhighlighter) #### showCommentsOnDom() Show comments on the DOM. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#showCommentsOnDom) #### enableDialogOnHover() Enable showing comment dialog on hover. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enabledialogonhover) #### enableFloatingCommentDialog() Enable floating comment dialog next to pins. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablefloatingcommentdialog) #### showResolvedCommentsOnDom() Show resolved comments on the DOM. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#showresolvedcommentsondom) #### enableCollapsedComments() Enable collapsing of comments in annotations. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablecollapsedcomments) #### enableShortUserName() Enable shortening of long user names. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enableshortusername) #### enableSignInButton() Enable sign in button on comment dialog when user is anonymous or signed out. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablesigninbutton) #### onSignIn() Handle sign in button click event. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#onsignin) ### Extra Information #### enableCommentIndex() Enable comment index indicators on pins and sidebar. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablecommentindex) #### enableDeviceInfo() Enable device type indicators in comment threads. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enabledeviceinfo) #### enableDeviceIndicatorOnCommentPins() Enable device type indicators on comment pins. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enabledeviceindicatoroncommentpins) #### enableGhostComments() Enable showing ghost comments on the DOM. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enableghostcomments) #### enableGhostCommentsIndicator() Enable ghost comment labels in the sidebar. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enableghostcommentsindicator) ### Keyboard Controls #### enableHotkey() Enable hotkeys for comments (e.g. 'c' to enable comment mode). * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablehotkey) #### enableEnterKeyToSubmit() Enable using Enter key to submit comments. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enableentertosubmit) #### enableDeleteOnBackspace() Enable deleting comments with backspace key. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enabledeleteonbackspace) ### Moderation #### enableModeratorMode() Enable moderator mode for comments requiring approval. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablemoderatormode) #### enableResolveStatusAccessAdminOnly() Restrict resolve action to admin users and comment authors. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enableresolvestatusaccessadminonly) #### approveCommentAnnotation() Approve a comment annotation in moderator mode. * Params: `ApproveCommentAnnotationRequest` * Returns: `Promise` * React Hook: `useApproveCommentAnnotation()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#approvecommentannotation) #### acceptCommentAnnotation() Accept a comment annotation in suggestion mode. * Params: `AcceptCommentAnnotationRequest` * Returns: `Promise` * React Hook: `useAcceptCommentAnnotation()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#acceptcommentannotation) #### rejectCommentAnnotation() Reject a comment annotation in suggestion mode. * Params: `RejectCommentAnnotationRequest` * Returns: `Promise` * React Hook: `useRejectCommentAnnotation()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#rejectcommentannotation) #### enableSuggestionMode() Enable suggestion mode for accepting/rejecting comments. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablesuggestionmode) #### updateAccess() Update access permissions for a comment annotation. * Params: `UpdateAccessRequest` * Returns: `Promise` * React Hook: `useUpdateAccess()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#updateaccess) #### enablePrivateCommentMode() Enable private comment mode for admin-only comments. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enableprivatecomments) ### Comment Read Status #### enableSeenByUsers() Enable "Seen By" feature to show which users have seen each comment. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enableseenbyusers) #### setUnreadIndicatorMode() Set unread indicator mode to either minimal (dot) or verbose (badge). * Params: `mode: "minimal" | "verbose"` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#setunreadindicatormode) ### Toggle Comment Types #### enableAreaComment() Enable area comments that allow drawing rectangles with comments. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enableareacomment) #### enableInboxMode() Enable inbox mode for comments. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enableinboxmode) #### enablePopoverMode() Enable popover mode for comments. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablepopovermode) #### enableStreamMode() Enable stream mode for comments. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablestreammode) #### enableTextMode() Enable text mode for comments. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enabletextmode) #### enableInlineCommentMode() Enable inline comment mode to show comments under associated text. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enableinlinecommentmode) #### enableMultithread() Enable multithreaded comments. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablemultithread) ### Comment Tool #### enableCommentMode() Enable comment mode to allow attaching comments to DOM elements. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablecommentmode) #### onCommentModeChange() Subscribe to changes in comment mode state. * Params: none * Returns: `Observable` * React Hook: `useCommentModeState()` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#oncommentmodechange) #### enableCommentTool() Enable/disable the comment tool button. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablecommenttool) #### enableChangeDetectionInCommentMode() Enable DOM change detection while in comment mode. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablechangedetectionincommentmode) #### enablePersistentCommentMode() Enable persistent comment mode to continue leaving comments after finishing one. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablepersistentcommentmode) #### setPinCursorImage() Set custom cursor image for comment mode. * Params: `base64ImageString: string` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#setpincursorimage) ### Minimap #### enableMinimap() Enable minimap showing comment locations on screen edge. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enableminimap) ### Popover Comments #### enableDialogOnTargetElementClick() Enable opening comment dialog on target element click in popover mode. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enabledialogontargetelementclick) #### enablePopoverTriangleComponent() Enable triangle indicator on popover comments. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablepoovertrianglecomponent) ### Video Timeline Comments #### setTotalMediaLength() Set the total length of media (in frames or seconds) for the timeline. * Params: `length: number` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#settotalmediallength) ### Comment Pin #### enableBubbleOnPin() Show a Comment Bubble when hovering/clicking on Comment Pin instead of Comment Dialog. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablebubbleonpin) #### enableBubbleOnPinHover() Show Comment Bubble on hover vs click for Comment Pins. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments/customize-behavior/customize-behavior#enablebubbleonpinhover) # Comments Sidebar ### Custom filtering, sorting and grouping #### enableSidebarCustomActions() Enable custom filtering, sorting and grouping actions in the comments sidebar. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments-sidebar/customize-behavior#custom-filtering-sorting-and-grouping) #### setCommentSidebarData() Set filtered/sorted/grouped data in the comments sidebar. * Params: `data: CommentSidebarData[], options?: {grouping?: boolean}` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments-sidebar/customize-behavior#custom-filtering-sorting-and-grouping) ### Navigation #### onCommentClick() Listen for comment click events in the sidebar. * Params: `(event: {documentId: string, location: Object, targetElementId: string, context: Object, annotation: CommentAnnotation}) => void` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments-sidebar/customize-behavior#oncommentclick) #### enableSidebarUrlNavigation() Enable automatic URL navigation when clicking comments in the sidebar. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments-sidebar/customize-behavior#enablesidebarurlnavigation) ### UI #### openCommentSidebar() Open the comments sidebar. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments-sidebar/customize-behavior#opencommentsidebar) #### closeCommentSidebar() Close the comments sidebar. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments-sidebar/customize-behavior#openCommentSidebar) #### toggleCommentSidebar() Toggle the comments sidebar open/closed state. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments-sidebar/customize-behavior#togglecommentsidebar) #### excludeLocationIdsFromSidebar() Filter out comments from specified locations in the sidebar. * Params: `locationIds: string[]` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments-sidebar/customize-behavior#excludelocationidsfromsidebar) ### System Filters, Sorting and Grouping #### setCommentSidebarFilters() Set filters for the comments sidebar programmatically. * Params: `filters: {location?: {id: string}[], people?: ({userId: string} | {email: string})[], priority?: string[], status?: string[], category?: string[]}` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/comments-sidebar/customize-behavior#setcommentsidebarfilters) # Notifications #### getNotificationsData() Get the notifications data for the current user. * Params: none * Returns: `Observable` * React Hook: `useNotificationsData()` * [Full Documentation →](/async-collaboration/notifications/customize-behavior#getnotificationsdata) #### onNotificationClick() Listen for notification click events in the Notifications Panel. * Params: `(notification: Notification) => void` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/notifications/customize-behavior#onnotificationclick) #### setTabConfig() Customize notification tab names and visibility. * Params: `tabConfig: TabConfig` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/notifications/customize-behavior#settabconfig) #### setMaxDays() Set maximum age in days for displayed notifications. * Params: `days: number` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/notifications/customize-behavior#setmaxdays) #### enableReadNotificationsOnForYouTab() Show read notifications in the "For You" tab. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/notifications/customize-behavior#enablereadnotificationsontheforyoutab) #### getUnreadNotificationsCount() Get count of unread notifications by tab. * Params: none * Returns: `Observable<{forYou: number, all: number}>` * React Hook: `useUnreadNotificationsCount()` * [Full Documentation →](/async-collaboration/notifications/customize-behavior#getunreadnotificationscount) #### setAllNotificationsAsRead() Mark all notifications as read globally or by tab. * Params: `options?: {tabId?: string}` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/notifications/customize-behavior#setallnotificationsasread) #### markNotificationAsReadById() Mark a specific notification as read. * Params: `notificationId: string` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/notifications/customize-behavior#marknotificationasreadbyid) # Recorder #### enableRecordingCountdown() Controls whether to display a countdown timer before a recording starts. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/recorder/customize-behavior#enablerecordingcountdown) #### enableRecordingTranscription() Controls whether to enable AI transcription for recordings. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/recorder/customize-behavior#enablerecordingtranscription) #### getRecordingData() Fetches recording data (transcript, summary, and URLs) for the given recording IDs. * Params: [RecorderRequestQuery](/api-reference/sdk/models/api-request-objects#recorderrequestquery) * Returns: [`Promise`](/api-reference/sdk/models/api-request-objects#getrecordingdataresponse) * React Hook: `n/a` * [Full Documentation →](/async-collaboration/recorder/customize-behavior#getrecordingdata) ### Event Subscription #### on() Subscribe to Recorder events. * Params: `RecorderEventType`. [Here](/api-reference/sdk/models/api-event-types-enum#recorder) is the list of events you can subscribe to. * Returns: `Observable`. [Here](/api-reference/sdk/models/api-event-objects#recorder) is the list of events object types you can expect to receive. * React Hook: `useRecorderEventCallback(RecorderEventType)` * [Full Documentation →](/async-collaboration/recorder/customize-behavior#on) #### onDelete() Handle deletion events for recordings. * Params: `(data: {id: string}) => void` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/recorder/customize-behavior#ondelete) #### onRecordedData() Subscribe to recording completion events. * Params: none * Returns: `Observable` * React Hook: `useRecorderAddHandler()` * [Full Documentation →](/async-collaboration/recorder/customize-behavior#onrecordeddata) # Inline Reactions #### setCustomReactions() Set custom reaction emojis for inline reactions. * Params: `customReactions: { [reactionId: string]: { url?: string, emoji?: string } }` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/async-collaboration/reactions/customize-behavior#setcustomreactions) # View Analytics #### getUniqueViewsByUser() Get unique views by user, optionally filtered by location. * Params: `locationId?: string` * Returns: `Observable` * React Hook: `useUniqueViewsByUser()` * [Full Documentation →](/async-collaboration/view-analytics/customize-behavior#getuniqueviewsbyuser) #### getUniqueViewsByDate() Get unique views by date, optionally filtered by location. * Params: `locationId?: string` * Returns: `Observable` * React Hook: `useUniqueViewsByDate()` * [Full Documentation →](/async-collaboration/view-analytics/customize-behavior#getuniqueviewsbydate) # Live State Sync #### getLiveStateData() Retrieves live state data as an observable based on the provided ID. * Params: `liveStateDataId?: string` * Returns: `Observable` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/live-state-sync/setup) #### setLiveStateData() Sets live state data for the provided ID and data. * Params: `liveStateDataId: string, liveStateData: any` * Returns: `any` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/live-state-sync/setup) # Single Editor Mode #### enableSingleEditorMode() Enables the single editor mode with an optional configuration. * Params: `config?: SingleEditorConfig` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/single-editor-mode/setup) #### disableSingleEditorMode() Disables the single editor mode. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/single-editor-mode/setup) #### isUserEditor() Checks if the current user is an editor. Returns an observable. * Params: none * Returns: `Observable` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/single-editor-mode/setup) #### getEditor() Retrieves the current editor information. * Params: none * Returns: `Observable` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/single-editor-mode/setup) #### setUserAsEditor() Sets the current user as an editor. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/single-editor-mode/setup) #### resetUserAccess() Resets the user access. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/single-editor-mode/setup) #### singleEditorModeContainerIds() Disables elements inside specific elements only when single editor mode is on. * Params: `elementIds: string[]` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/single-editor-mode/setup) #### enableAutoSyncState() Enables the autosync state feature. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/single-editor-mode/setup) #### requestEditorAccess() Initiates a request for editor access. * Params: none * Returns: `Observable` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/single-editor-mode/setup) #### isEditorAccessRequested() Checks if editor access has been requested. * Params: none * Returns: `Observable<{ requestStatus: string, requestedBy: User } | null>` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/single-editor-mode/setup) #### acceptEditorAccessRequest() Accepts an editor access request. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/single-editor-mode/setup) #### rejectEditorAccessRequest() Rejects an editor access request. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/single-editor-mode/setup) #### cancelEditorAccessRequest() Cancels an editor access request. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/single-editor-mode/setup) #### editCurrentTab() Edits the current tab. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/single-editor-mode/setup) #### setEditorAccessTimeout() Sets a timeout for editor access. (in milliseconds) * Params: `timeout: number` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/single-editor-mode/setup) #### enableEditorAccessTransferOnTimeOut() Enables the transfer of editor access on timeout. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/single-editor-mode/setup) #### enableDefaultSingleEditorUI() Enables the default UI for single editor mode. * Params: none * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/single-editor-mode/setup) # Cursors #### setInactivityTime() Set the time it takes for a user's cursor to be marked as inactive. * Params: `milliseconds: number` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/cursors/customize-behavior#setinactivitytime) #### allowedElementIds() Set specific element IDs where cursors should be shown. * Params: `elementIds: string[]` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/cursors/customize-behavior#allowedelementids) #### onCursorUserChange() Subscribe to cursor position changes for all users. * Params: `callback: (cursorUsers: CursorUser[]) => void` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/cursors/customize-behavior#oncursoruserchange) # Presence #### setInactivityTime() Set the time it takes for a user to be marked as inactive. * Params: `milliseconds: number` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/presence/customize-behavior#setinactivitytime) #### enableSelf() Include the current user in the list of presence users. * Params: `none` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/presence/customize-behavior#self) #### onPresenceUserChange() Subscribe to presence changes for all users. * Params: `callback: (presenceUsers: PresenceUser[]) => void` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/presence/customize-behavior#onpresenceuserchange) #### onPresenceUserClick() Handle click events on presence avatar circles. * Params: `callback: (user: User) => void` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/presence/customize-behavior#onpresenceuserclick) #### getOnlineUsersOnCurrentDocument() Subscribe to a list of all online users who are either active or inactive on the current document. * Params: `none` * Returns: `Observable` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/presence/customize-behavior#getonlineusersoncurrentdocument) # Follow Mode #### enableFlockMode() Enable Follow Me mode globally wherever Presence is shown. * Params: `none` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/presence/customize-behavior#flockmode) #### startFollowingUser() Start following a specific user. * Params: `userId: string` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/flock-mode/customize-behavior#startfollowinguser) #### stopFollowingUser() Stop following the current user. * Params: `none` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/flock-mode/customize-behavior#stopfollowinguser) #### onNavigate() Handle navigation events during Follow Me sessions. * Params: `callback: (pageInfo: PageInfo) => void` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/flock-mode/customize-behavior#onnavigate) # Huddle #### enableChat() Enable the ephemeral chat feature in Huddle. * Params: `none` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/huddle/customize-behavior#chat) #### enableFlockModeOnAvatarClick() Enable Follow Me mode when clicking on a user's avatar in Huddle. * Params: `none` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/huddle/customize-behavior#flockmodedonavatarclick) # Live Selection #### enableDefaultElementsTracking() Enable automatic tracking of user presence on default element types (input, textarea, button, contenteditable). * Params: `none` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/live-selection/customize-behavior#enabledefaultelementstracking) #### enableUserIndicator() Enable the user indicator (avatar/name label) that appears near selected elements. * Params: `none` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/live-selection/customize-behavior#enableuserindicator) #### setUserIndicatorPosition() Set the position of the user indicator globally. * Params: `position: 'start' | 'end'` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/live-selection/customize-behavior#setuserindicatorposition) #### setUserIndicatorType() Set the type of user indicator globally. * Params: `type: 'avatar' | 'label'` * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/realtime-collaboration/live-selection/customize-behavior#setuserindicatortype) #### getLiveSelectionData() Get the live selection data for the current document. * Params: `none` * Returns: `Observable` * React Hook: `useLiveSelectionDataHandler()` * [Full Documentation →](/realtime-collaboration/live-selection/customize-behavior#getliveselectiondata) # AI #### enableRewriter() Enable the rewriter. * **Signature**: `enableRewriter()` * **Params**: `n/a` * **Returns**: `void` * **React Hook**: `n/a` # Core ### Client #### initConfig() Set up initial configurations for the Velt SDK. * Params: `apiKey: string, config?: Config` * Returns: `void` * React Hook: `n/a` {/* - [Full Documentation →](/get-started/setup/initialize) */} #### getVeltInitState() Subscribe to detect whether Velt is initialized. * Params: `void` * Returns: `Observable` * React Hook: `useVeltInitState()` {/* - [Full Documentation →](/api-reference/api-methods/velt-client) */} #### getMetadata() Get the currently set organization, document and location objects. * Params: none * Returns: `Promise` * React Hook: `n/a` {/* - [Full Documentation →](/api-reference/api-methods/velt-client) */} ### Authentication #### identify() Authenticate the client's user with the Velt SDK. * Params: `user: User, userOptions?: UserOptions` * Returns: `Promise` * React Hook: `useIdentify()` {/* - [Full Documentation →](/get-started/setup/authenticate) */} #### signOutUser() To sign out a user. * Params: `void` * Returns: `any` * React Hook: `n/a` {/* - [Full Documentation →](/api-reference/api-methods/velt-client) */} #### getUser() Get the current authenticated user in Velt. * Params: `void` * Returns: `User` * React Hook: `n/a` {/* - [Full Documentation →](/api-reference/api-methods/velt-client) */} ### Folders #### fetchFolders() Fetch folder metadata and subfolders by organizationId, folderId with pagination. * Params: `fetchFoldersRequest: FetchFoldersRequest` * Returns: `Observable` * React Hook: `n/a` * [Full Documentation →](/api-reference/api-methods/velt-client) ### Documents #### setDocuments() Initialize and subscribe to multiple Documents at once. * Params: * `documents`: [Document\[\]](/api-reference/sdk/models/data-models#document) * `options?`: [SetDocumentsRequestOptions](/api-reference/sdk/models/data-models#setdocumentsrequestoptions) * Returns: `void` * React Hook: `useSetDocuments()` * [Full Documentation →](/key-concepts/documents/set-document#set-multiple-documents) #### setDocument() Initialize and subscribe to a single Document. * Params: * `documentId`: string * `metadata?`: [DocumentMetadata](/api-reference/sdk/models/data-models#documentmetadata) * Returns: `void` * React Hook: `useSetDocument()` * [Full Documentation →](/key-concepts/documents/set-document#set-a-single-document) #### unsetDocuments() Use this to unsubscribe from all documents at once. * Params: `void` * Returns: `void` * React Hook: `useUnsetDocuments()` * [Full Documentation →](/key-concepts/documents/set-document#unset-multiple-documents) #### fetchDocuments() Fetch document metadata by organizationId, folderId or documentIds with pagination. * Params: `void` * Returns: `Observable` * React Hook: `n/a` * [Full Documentation →](/key-concepts/documents/set-document#get-document-metadata) ### Location #### setLocation() Set the current location context. Used to define specific areas within a document. * Params: `location: Location, isAdditional?: boolean` * `location`: Location object with: * `id`: Required unique identifier * `locationName?`: Optional display name for UI components * `version?`: Optional version object with: * `id`: Version identifier * `name`: Version display name * Additional custom key/value pairs * `isAdditional?`: Boolean to add additional locations * `false` (default): Set this as the root location * `true`: Add as additional location * Returns: `void` * React Hook: `useSetLocation()` * [Full Documentation →](/key-concepts/locations/set-location#set-the-location) #### removeLocation() Remove locations from the current document context. * Params: `location?: Location` * If no location provided, removes all locations * If location object provided, removes that specific location * Returns: `void` * React Hook: `n/a` * [Full Documentation →](/key-concepts/locations/remove-locations) ### Event Subscription #### on() Subscribe to Velt core events * Params: `eventType: string`. [Here](/api-reference/sdk/models/api-event-types-enum#core) is the list of events you can subscribe to. * Returns: `Observable`. It will return one of the objects from [here](/api-reference/sdk/models/api-event-objects#core) * React Hook: `useVeltEventCallback()` ### UI #### setUiState() Set custom state data that can be used in Velt wireframes, Velt if and Velt data components. * Params: `Record` * Object containing key-value pairs of custom state data * Returns: `void` * React Hook: `n/a` #### getUiState() Get the custom UI state data. * Params: `void` * Returns: `Observable>` * Observable that emits the current UI state object * React Hook: `n/a` #### injectCustomCss() To inject custom CSS within Components with Shadow DOM enabled. * Params: `customCss: CustomCss` * Returns: `void` * React Hook: `n/a` {/* - [Full Documentation →](/api-reference/api-methods/velt-client) */} #### removeVeltContent() To remove Velt specific content from provided html content. This is useful when using Velt on a text editor or editable element. * Params: `htmlContent: string` * Returns: `string` * React Hook: `n/a` {/* - [Full Documentation →](/api-reference/api-methods/velt-client) */} ### Feature Utilities #### getPresenceElement() Get the Presence Element Object to access the raw presence data. * Params: `void` * Returns: `PresenceElement` * React Hook: `n/a` {/* - [Full Documentation →](/api-reference/api-methods/velt-client) */} #### getCursorElement() Get the Cursor Element Object to access the raw cursor data. * Params: `void` * Returns: `CursorElement` * React Hook: `n/a` {/* - [Full Documentation →](/api-reference/api-methods/velt-client) */} #### getCommentElement() Get the Comment Element Object to access the raw comment data. * Params: `void` * Returns: `CommentElement` * React Hook: `useCommentUtils()` {/* - [Full Documentation →](/api-reference/api-methods/velt-client) */} #### getSelectionElement() Get the Selection Object to enable/disable the feature. * Params: `void` * Returns: `SelectionElement` * React Hook: `n/a` {/* - [Full Documentation →](/api-reference/api-methods/velt-client) */} #### getRecorderElement() Get the Recorder Object. * Params: `void` * Returns: `RecorderElement` * React Hook: `n/a` {/* - [Full Documentation →](/api-reference/api-methods/velt-client) */} #### getContactElement() Get the Contact Object. * Params: `void` * Returns: `ContactElement` * React Hook: `n/a` {/* - [Full Documentation →](/api-reference/api-methods/velt-client) */} #### getRewriterElement() Get the Rewriter Object. * Params: `void` * Returns: `RewriterElement` * React Hook: `n/a` {/* - [Full Documentation →](/api-reference/api-methods/velt-client) */} #### getLiveStateSyncElement() Get the LiveStateSync Object. * Params: `void` * Returns: `LiveStateSyncElement` * React Hook: `n/a` {/* - [Full Documentation →](/api-reference/api-methods/velt-client) */} #### getArrowElement() Get the Arrow Object. * Params: `void` * Returns: `ArrowElement` * React Hook: `n/a` {/* - [Full Documentation →](/api-reference/api-methods/velt-client) */} ### Feature Gating #### isUserAllowed\$() To check if user is allowed in provided document or not. * Params: `void` * Returns: `Observable` * React Hook: `n/a` {/* - [Full Documentation →](/api-reference/api-methods/velt-client) */} #### disableFeatures() Provide a list of features to disable. Provide an empty array to enable all the features. * Params: `features: Array` * Returns: `void` * React Hook: `n/a` {/* - [Full Documentation →](/api-reference/api-methods/velt-client) */} #### isPlanExpired\$() To check if plan is expired or not. * Params: `void` * Returns: `Observable` * React Hook: `n/a` {/* - [Full Documentation →](/api-reference/api-methods/velt-client) */} ### Localization #### setLanguage() To set the language. * Params: `language: string` * Returns: `void` * React Hook: `n/a` {/* - [Full Documentation →](/api-reference/api-methods/velt-client) */} #### setTranslations() To set the translations for the language. * Params: `language: string, translations: { [key: string]: string }` * Returns: `void` * React Hook: `n/a` {/* - [Full Documentation →](/api-reference/api-methods/velt-client) */} #### enableAutoTranslation() To enable automatic translation of text in Velt Components based on User's language preference. * Params: `void` * Returns: `void` * React Hook: `n/a` {/* - [Full Documentation →](/api-reference/api-methods/velt-client) */} ### DOM Control #### setScrollableElementsIds() Tell us about the scrollable document ids to keep track on its scroll changes. * Params: `ids: string[]` * Returns: `void` * React Hook: `n/a` {/* - [Full Documentation →](/api-reference/api-methods/velt-client) */} #### removeScrollableElementsIds() To remove document params from a User. * Params: `void` * Returns: `void` * React Hook: `n/a` {/* - [Full Documentation →](/api-reference/api-methods/velt-client) */} # React Hooks Index Source: https://docs.velt.dev/api-reference/sdk/api/react-hooks # Comments #### useCommentUtils() Hook to access comment utilities * Params: `void` * Returns: `CommentElement` * Related API Method: `client.getCommentElement()` * [Full Documentation →](/api-reference/api-methods/velt-client) ### Threads #### useAddCommentAnnotation() Hook to add a comment annotation * Params: [AddCommentAnnotationRequest](/api-reference/sdk/models/api-request-objects#addcommentannotationrequest) * Returns: `addCommentAnnotation()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#addcommentannotation) #### useDeleteCommentAnnotation() Hook to delete a comment annotation * Params: [DeleteCommentAnnotationRequest](/api-reference/sdk/models/api-request-objects#deletecommentannotationrequest) * Returns: `deleteCommentAnnotation()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#deletecommentannotation) #### useCommentAnnotationsCount() Hook to get total and unread comment annotations count * Params: [CommentRequestQuery](/api-reference/sdk/models/api-request-objects#commentrequestquery) (optional) * Returns: [GetCommentAnnotationsCountResponse](/api-reference/sdk/models/api-request-objects#getcommentannotationscountresponse) * [Full Documentation →](/async-collaboration/comments/customize-behavior#getcommentannotationscount) #### useUnreadCommentAnnotationCountByLocationId() Hook to get unread comment annotation count by location * Params: `locationId: string` * Returns: `UnreadCommentsCount | null` * [Full Documentation →](/async-collaboration/comments/customize-behavior#getunreadcommentannotationcountbylocationid) #### useGetCommentAnnotations() Hook to get all the comment annotations for all the specified documents * Params: [CommentRequestQuery](/api-reference/sdk/models/api-request-objects#commentrequestquery) (optional) * Returns: [GetCommentAnnotationsResponse](/api-reference/sdk/models/api-request-objects#getcommentannotationsresponse) * [Full Documentation →](/async-collaboration/comments/customize-behavior#getcommentannotations) #### useCommentAnnotationById() Hook to get a specific comment annotation * Params: `{ annotationId: string, documentId?: string }` * Returns: `CommentAnnotation` * [Full Documentation →](/async-collaboration/comments/customize-behavior#getcommentannotationbyid) ### Messages #### useAddComment() Hook to add a comment to a specific annotation * Params: [AddCommentRequest](/api-reference/sdk/models/api-request-objects#addcommentrequest) * Returns: `addComment()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#addcomment) #### useUpdateComment() Hook to update a comment in a specific annotation * Params: [UpdateCommentRequest](/api-reference/sdk/models/api-request-objects#updatecommentrequest) * Returns: `updateComment()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#updatecomment) #### useDeleteComment() Hook to delete a comment from a specific annotation * Params: [DeleteCommentRequest](/api-reference/sdk/models/api-request-objects#deletecommentrequest) * Returns: `deleteComment()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#deletecomment) #### useGetComment() Hook to get comments from a specific annotation * Params: [GetCommentRequest](/api-reference/sdk/models/api-request-objects#getcommentrequest) * Returns: `getComment()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#getcomment) #### useUnreadCommentCountOnCurrentDocument() Hook to get number of unread comments on current document * Params: `void` * Returns: `UnreadCommentsCount | null` * [Full Documentation →](/async-collaboration/comments/customize-behavior#getunreadcommentcountoncurrentdocument) #### useUnreadCommentCountByLocationId() Hook to get number of unread comments by location * Params: `locationId: string` * Returns: `UnreadCommentsCount | null` * [Full Documentation →](/async-collaboration/comments/customize-behavior#getunreadcommentcountbylocationid) #### useUnreadCommentCountByAnnotationId() Hook to get number of unread comments by annotation * Params: `annotationId: string` * Returns: `number` * [Full Documentation →](/async-collaboration/comments/customize-behavior#getunreadcommentcountbyannotationid) ### @Mentions #### useContactUtils() Hook to access contact utility methods * Returns: `ContactElement` with methods for managing contacts * [Full Documentation →](/async-collaboration/comments/customize-behavior#updatecontactlist) #### useAssignUser() Hook to assign a user to a comment annotation * Params: [AssignUserRequest](/api-reference/sdk/models/api-request-objects#assignuserrequest) * Returns: `assignUser()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#assignuser) #### useContactSelected() Hook to handle contact selection events * Returns: `User` * [Full Documentation →](/async-collaboration/comments/customize-behavior#oncontactselected) #### useSubscribeCommentAnnotation() Hook to subscribe to a comment annotation * Params: [SubscribeCommentAnnotationRequest](/api-reference/sdk/models/api-request-objects#subscribecommentannotationrequest) * Returns: `subscribeCommentAnnotation()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#subscribecommentannotation) #### useUnsubscribeCommentAnnotation() Hook to unsubscribe from a comment annotation * Params: [UnsubscribeCommentAnnotationRequest](/api-reference/sdk/models/api-request-objects#unsubscribecommentannotationrequest) * Returns: `unsubscribeCommentAnnotation()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#unsubscribecommentannotation) ### Custom Lists #### useAutocompleteUtils() Hook to access autocomplete utilities for custom lists in comments * Returns: `AutocompleteElement` * [Full Documentation →](/async-collaboration/comments/customize-behavior#createcustomlistdataoncomment) #### useAutocompleteChipClick() Hook to handle clicks on autocomplete chips in comments * Returns: `AutocompleteItem` data when a chip is clicked * [Full Documentation →](/async-collaboration/comments/customize-behavior#createcustomlistdataoncomment) ### Event Subscription #### useCommentEventCallback() Hook to subscribe to comment events * Params: `eventType: string`. [Here](/async-collaboration/comments/customize-behavior/customize-behavior#on) is the list of events you can subscribe to. * Returns: Comment Event Object. It will return one of the objects from [here](/api-reference/sdk/models/api-event-objects#comments) * [Full Documentation →](/async-collaboration/comments/customize-behavior#on) ### Attachments #### useAddAttachment() Hook to add an attachment to a comment annotation * Params: [AddAttachmentRequest](/api-reference/sdk/models/api-request-objects#addattachmentrequest) * Returns: `addAttachment()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#addattachment) #### useDeleteAttachment() Hook to delete an attachment from a comment annotation * Params: [DeleteAttachmentConfig](/api-reference/sdk/models/api-request-objects#deleteattachmentconfig) * Returns: `deleteAttachment()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#deleteattachment) #### useGetAttachment() Hook to get attachments from a comment annotation * Params: [GetAttachmentRequest](/api-reference/sdk/models/api-request-objects#getattachmentrequest) * Returns: `getAttachment()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#getattachment) ### Reactions #### useAddReaction() Hook to add a reaction to a comment * Params: [AddReactionRequest](/api-reference/sdk/models/api-request-objects#addreactionrequest) * Returns: `addReaction()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#addreaction) #### useDeleteReaction() Hook to delete a reaction from a comment * Params: [DeleteReactionRequest](/api-reference/sdk/models/api-request-objects#deletereactionrequest) * Returns: `deleteReaction()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#deletereaction) #### useToggleReaction() Hook to toggle a reaction on a comment * Params: [ToggleReactionRequest](/api-reference/sdk/models/api-request-objects#togglereactionrequest) * Returns: `toggleReaction()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#togglereaction) ### Status & Priority #### useUpdateStatus() Hook to update the status of a comment annotation * Params: [UpdateStatusRequest](/api-reference/sdk/models/api-request-objects#updatestatusrequest) * Returns: `updateStatus()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#updatestatus) #### useResolveCommentAnnotation() Hook to resolve a comment annotation * Params: [ResolveCommentAnnotationRequest](/api-reference/sdk/models/api-request-objects#resolvecommentannotationrequest) * Returns: `resolveCommentAnnotation()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#resolvecommentannotation) #### useUpdatePriority() Hook to update the priority of a comment annotation * Params: [UpdatePriorityRequest](/api-reference/sdk/models/api-request-objects#updatepriorityrequest) * Returns: `updatePriority()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#updatepriority) ### Recording #### useDeleteRecording() Hook to delete a recording from a comment annotation * Params: [DeleteRecordingRequest](/api-reference/sdk/models/api-request-objects#deleterecordingrequest) * Returns: `deleteRecording()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#deleterecording) #### useGetRecording() Hook to get recordings from a comment annotation * Params: [GetRecordingRequest](/api-reference/sdk/models/api-request-objects#getrecordingrequest) * Returns: `getRecording()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#getrecording) ### Deep Link #### useGetLink() Hook to get a link to a specific comment annotation * Params: [GetLinkRequest](/api-reference/sdk/models/api-request-objects#getlinkrequest) * Returns: `getLink()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#getlink) #### useCopyLink() Hook to copy a comment annotation link to clipboard * Params: [CopyLinkRequest](/api-reference/sdk/models/api-request-objects#copylinkrequest) * Returns: `copyLink()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#copylink) ### Navigation #### useCommentSelectionChangeHandler() Hook to subscribe to comment selection changes * Returns: `CommentSelectionChangeData` with: * `selected: boolean` * `annotation: CommentAnnotation` * [Full Documentation →](/async-collaboration/comments/customize-behavior#oncommentselectionchange) ### UI #### useCommentDialogSidebarClickHandler() Hook to handle clicks on the sidebar button in the comment dialog * Returns: Event data * [Full Documentation →](/async-collaboration/comments/customize-behavior#onsidebarbuttononcommentdialogclick) ### Moderation #### useApproveCommentAnnotation() Hook to approve comment annotations in moderator mode * Params: [ApproveCommentAnnotationRequest](/api-reference/sdk/models/api-request-objects#approvecommentannotationrequest) * Returns: `approveCommentAnnotation()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#approvecommentannotation) #### useAcceptCommentAnnotation() Hook to accept comment annotations in suggestion mode * Params: [AcceptCommentAnnotationRequest](/api-reference/sdk/models/api-request-objects#acceptcommentannotationrequest) * Returns: `acceptCommentAnnotation()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#acceptcommentannotation) #### useRejectCommentAnnotation() Hook to reject comment annotations in suggestion mode * Params: [RejectCommentAnnotationRequest](/api-reference/sdk/models/api-request-objects#rejectcommentannotationrequest) * Returns: `rejectCommentAnnotation()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#rejectcommentannotation) #### useUpdateAccess() Hook to update access permissions for comment annotations * Params: [UpdateAccessRequest](/api-reference/sdk/models/api-request-objects#updateaccessrequest) * Returns: `updateAccess()` * [Full Documentation →](/async-collaboration/comments/customize-behavior#updateaccess) ### Comment Tool #### useCommentModeState() Hook to track the current state of comment mode * Returns: `boolean` indicating if comment mode is active * Automatically updates when comment mode changes * [Full Documentation →](/async-collaboration/comments/customize-behavior#oncommentmodechange) # Notifications #### useNotificationUtils() Hook to access notification element for utility methods * Returns: `NotificationElement` * [Full Documentation →](/async-collaboration/notifications/customize-behavior#settabconfig) #### useNotificationsData() Hook to access notifications data for the current user * Returns: Array of [`Notification`](/api-reference/models/Notification) objects * Automatically updates when notifications change * [Full Documentation →](/async-collaboration/notifications/customize-behavior#getnotificationsdata) #### useUnreadNotificationsCount() Hook to get count of unread notifications * Returns: Object with counts by tab ```typescript { forYou: number, // Unread in "For You" tab all: number // Unread in "All" tab } ``` * Automatically updates when unread status changes * [Full Documentation →](/async-collaboration/notifications/customize-behavior#getunreadnotificationscount) # Inline Reactions #### useReactionElement() Hook to access reaction element for utility methods * Returns: `ReactionElement` * [Full Documentation →](/async-collaboration/reactions/customize-behavior#setcustomreactions) # Recorder #### useRecorderUtils() Hook to access recorder element for utility methods * Returns: `RecorderElement` * [Full Documentation →](/async-collaboration/recorder/customize-behavior#enablerecordingcountdown) #### useRecorderAddHandler() Hook to handle new recording events * Returns: Object containing: * `id`: string - Unique identifier for the recording * `tag`: string - HTML tag to embed the recording player * Automatically updates when new recordings are added * [Full Documentation →](/async-collaboration/recorder/customize-behavior#onrecordeddata) ### Event Subscription #### useRecorderEventCallback() Hook to subscribe to recorder events * Params: `eventType: string`. [Here](/api-reference/sdk/models/api-event-types-enum#recorder) is the list of events you can subscribe to. * Returns: Recorder Event Object. It will return one of the objects from [here](/api-reference/sdk/models/api-event-objects#recorder) * [Full Documentation →](/async-collaboration/recorder/customize-behavior#on) # View Analytics #### useViewsElement() Hook to access views element for utility methods * Returns: `ViewsElement` * [Full Documentation →](/async-collaboration/view-analytics/customize-behavior) #### useUniqueViewsByUser() Hook to get unique views grouped by user * Params: `locationId: string` * Returns: Array of view analytics data by user * [Full Documentation →](/async-collaboration/view-analytics/customize-behavior#getuniqueviewsbyuser) #### useUniqueViewsByDate() Hook to get unique views grouped by date * Params: `locationId: string` * Returns: Array of view analytics data by date * [Full Documentation →](/async-collaboration/view-analytics/customize-behavior#getuniqueviewsbydate) # Live State Sync #### useLiveStateSyncUtils() Hook to access live state sync utilities * Params: `void` * Returns: `LiveStateSyncElement` * Related API Method: `client.getLiveStateSyncElement()` * [Full Documentation →](/realtime-collaboration/single-editor-mode/setup) #### useLiveStateData() Hook to get live state data * Params: `string` * Returns: `any` * Related API Method: `liveStateSyncElement.getLiveStateData()` * [Full Documentation →](/realtime-collaboration/live-state-sync/setup) #### useSetLiveStateData() Hook to set live state data * Params: `string, any` * Returns: `void` * Related API Method: `liveStateSyncElement.setLiveStateData()` * [Full Documentation →](/realtime-collaboration/live-state-sync/setup) #### useLiveState() Hook to sync state variables across clients in real-time (similar to React's useState) * Params: * `uniqueId`: string - Unique identifier to sync across screens * `initialValue`: any - Initial value of the state * `options?`: object * `syncDuration`: number - Debounce duration in ms (default: 50) * `resetLiveState`: boolean - Reset state on init (default: false) * `listenToNewChangesOnly`: boolean - Only listen to new changes (default: false) * Returns: `[value, setValue, serverConnectionState]` * `value`: Current state value * `setValue`: Function to update state * `serverConnectionState`: Current server connection state * [Full Documentation →](/realtime-collaboration/live-state-sync/setup) #### useServerConnectionStateChangeHandler() Hook to listen to server connection state changes * Params: none * Returns: `ServerConnectionState` - One of: * `'online'` - Server connection is active * `'offline'` - Server connection is lost * `'pendingInit'` - Connection initialization pending * `'pendingData'` - Waiting for data from server * Related API Method: `liveStateSyncElement.onServerConnectionStateChange()` * [Full Documentation →](/realtime-collaboration/live-state-sync/setup) # Single Editor Mode #### useUserEditorState() Hook to check if current user is the editor * Returns: `UserEditorAccess` object with: * `isEditor`: boolean indicating if user is editor * `isEditorOnCurrentTab`: boolean indicating if user is editor on current tab * [Full Documentation →](/realtime-collaboration/single-editor-mode/setup) #### useEditor() Hook to get the current editor * Returns: `User` object with editor details (email, name, photoUrl, userId) * [Full Documentation →](/realtime-collaboration/single-editor-mode/setup) #### useEditorAccessRequestHandler() Hook to handle editor access requests * Returns: Object with: * `requestStatus`: 'requested' when access is requested * `requestedBy`: User object of requester * Returns `null` if user is not editor or request is canceled * [Full Documentation →](/realtime-collaboration/single-editor-mode/setup) #### useEditorAccessTimer() Hook to track editor access request timer state * Returns: Object with: * `state`: 'idle' | 'inProgress' | 'completed' * `durationLeft`: number of seconds remaining * Useful for building custom UI for access requests * [Full Documentation →](/realtime-collaboration/single-editor-mode/setup) # Presence #### usePresenceUtils() Hook to access presence element for presence control methods * Returns: `PresenceElement` * [Full Documentation →](/realtime-collaboration/presence/customize-behavior#setinactivitytime) #### usePresenceUsers() Hook to get online users on the current document * Returns: `User[]` * Related API Method: `presenceElement.getOnlineUsersOnCurrentDocument()` * [Full Documentation →](/realtime-collaboration/presence/customize-behavior#getonlineusersoncurrentdocument) Note: Most presence functionality can also be controlled through `` props: * `inactivityTime`: Set user inactivity timeout (default: 300000ms) * `location`: Show presence for specific locations * `maxUsers`: Limit number of displayed avatars * `self`: Control visibility of current user (default: true) # Cursor #### useCursorUtils() Hook to access cursor element for cursor utility methods * Returns: `CursorElement` #### useCursorUsers() Hook to get online users with cursors activated * Params: `void` * Returns: `User[]` * Related API Method: `cursorElement.getOnlineUsersOnCurrentDocument()` * [Full Documentation →](/realtime-collaboration/cursors/customize-behavior#getonlineusersoncurrentdocument) # Live Selection #### useLiveSelectionUtils() Hook to access live selection element for control methods * Returns: `LiveSelectionElement` * [Full Documentation →](/realtime-collaboration/live-selection/customize-behavior#enabledefaultelementsTracking) #### useLiveSelectionDataHandler() Hook to get live selection data for the current document * Returns: `LiveSelectionData` * Related API Method: `liveSelectionElement.getLiveSelectionData()` * [Full Documentation →](/realtime-collaboration/live-selection/customize-behavior#getliveselectiondata) # Huddle #### useHuddleUtils() Hook to access huddle utilities * Params: `void` * Returns: `HuddleElement` * Related API Method: `client.getHuddleElement()` * [Full Documentation →](/realtime-collaboration/huddle/customize-behavior) # AI #### useAIRewriterUtils() Hook to access AI rewriter utilities * Params: `void` * Returns: `RewriterElement` * Related API Method: `client.getRewriterElement()` # Core ### Client #### useVeltClient() Hook to access the Velt client instance * Returns: Object with: * `client`: Velt #### useVeltInitState() Hook to get Velt initialization state * Params: `void` * Returns: `boolean` * Related API Method: `client.getVeltInitState()` * [Full Documentation →](/get-started/setup/advanced) ### Authentication #### useIdentify() Hook to authenticate a user with Velt * Params: * `user`: `User` * `options?`: Object: * `authToken?`: JWT token for additional security * `forceReset?`: Force re-login (default: false) * Must be called within a child component of VeltProvider * Asynchronous operation * [Full Documentation →](/get-started/setup/authenticate) ### Document #### useSetDocuments() Hook to initialize multiple documents at once * Params: * `documents`: [Document\[\]](/api-reference/sdk/models/data-models#document) * `options?`: [SetDocumentsRequestOptions](/api-reference/sdk/models/data-models#setdocumentsrequestoptions) * [Full Documentation →](/key-concepts/documents/set-document#set-multiple-documents) #### useSetDocument() Hook to initialize a document for collaboration * Params: * `documentId`: string * `metadata?`: [DocumentMetadata](/api-reference/sdk/models/data-models#documentmetadata) * [Full Documentation →](/key-concepts/documents/set-document#set-a-single-document) #### useUnsetDocuments() Hook to unsubscribe from all documents at once. * Use when Velt features are not needed * Cleans up document-specific resources * [Full Documentation →](/key-concepts/documents/set-document#unset-multiple-documents) ### Location #### useSetLocation() Hook to set the current location context. Used to define specific areas within a document. * Params: * `location`: Location object with: * `id`: Required unique identifier * `locationName?`: Optional display name for UI components * `version?`: Optional version object with: * `id`: Version identifier * `name`: Version display name * Additional custom key/value pairs * `isAdditional?`: Boolean to add additional locations * `false` (default): Set this as the root location * `true`: Add as additional location * [Full Documentation →](/key-concepts/locations/set-location#set-the-location) ### Event Subscription #### useVeltEventCallback() Hook to subscribe to Velt core events * Params: `eventType: string`. [Here](/api-reference/sdk/models/api-event-types-enum#core) is the list of events you can subscribe to. * Returns: `VeltEventTypesMap[T]`. It will return one of the objects from [here](/api-reference/sdk/models/api-event-objects#core) # API Event Objects Source: https://docs.velt.dev/api-reference/sdk/models/api-event-objects # Comments ### Threads #### AddCommentAnnotationEvent *** | Property | Type | Required | Description | | ------------------- | ------------------------ | -------- | ----------------------------------------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentAnnotation` | `CommentAnnotation` | Yes | Comment annotation object | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | | `addContext` | `(context: any) => void` | Yes | Function to add custom metadata | | `elementRef` | `{ xpath: string }` | No | Reference to DOM element where comment annotation was added | #### DeleteCommentAnnotationEvent *** | Property | Type | Required | Description | | ------------------- | ------------------- | -------- | ------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentAnnotation` | `CommentAnnotation` | Yes | Comment annotation object | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | ### Messages #### AddCommentEvent *** | Property | Type | Required | Description | | ------------------- | ------------------- | -------- | ------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentAnnotation` | `CommentAnnotation` | Yes | Comment annotation object | | `commentId` | `number` | Yes | ID of the comment | | `comment` | `Comment` | Yes | Comment Object | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | #### UpdateCommentEvent *** | Property | Type | Required | Description | | ------------------- | ------------------- | -------- | ------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentAnnotation` | `CommentAnnotation` | Yes | Comment annotation object | | `commentId` | `number` | Yes | ID of the comment | | `comment` | `Comment` | Yes | Comment Object | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | #### DeleteCommentEvent *** | Property | Type | Required | Description | | ------------------- | ------------------- | -------- | ------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentAnnotation` | `CommentAnnotation` | Yes | Comment annotation object | | `commentId` | `number` | Yes | ID of the comment | | `comment` | `Comment` | Yes | Comment Object | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | ### @Mentions #### AssignUserEvent *** | Property | Type | Required | Description | | ------------------- | ------------------- | -------- | ------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `assignedTo` | `UserContact` | Yes | User being assigned | | `commentAnnotation` | `CommentAnnotation` | Yes | Comment annotation object | | `metadata` | `VeltEventMetadata` | No | Event metadata | #### SubscribeCommentAnnotationEvent *** | Property | Type | Required | Description | | ------------------- | ------------------- | -------- | ------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentAnnotation` | `CommentAnnotation` | Yes | Comment annotation object | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | #### UnsubscribeCommentAnnotationEvent *** | Property | Type | Required | Description | | ------------------- | ------------------- | -------- | ------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentAnnotation` | `CommentAnnotation` | Yes | Comment annotation object | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | #### AutocompleteSearchEvent *** | Property | Type | Required | Description | | ------------ | -------------------------------------- | -------- | -------------------------------------------------------------------- | | `event` | `KeyboardEvent \| InputEvent \| Event` | Yes | The triggering event | | `searchText` | `string` | Yes | The search text entered | | `type` | `'contact' \| 'custom'` | No | Type of autocomplete search. Whether is the @mentions or custom list | | `metadata` | `VeltEventMetadata` | No | Event metadata | ### Custom List #### AutocompleteSearchEvent *** | Property | Type | Required | Description | | ------------ | -------------------------------------- | -------- | -------------------------------------------------------------------- | | `event` | `KeyboardEvent \| InputEvent \| Event` | Yes | The triggering event | | `searchText` | `string` | Yes | The search text entered | | `type` | `'contact' \| 'custom'` | No | Type of autocomplete search. Whether is the @mentions or custom list | | `metadata` | `VeltEventMetadata` | No | Event metadata | ### Attachments #### AddAttachmentEvent *** | Property | Type | Required | Description | | ------------------- | ------------------------- | -------- | ----------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentAnnotation` | `CommentAnnotation` | Yes | Comment annotation object | | `attachments` | `AddAttachmentResponse[]` | Yes | Array of attachment responses | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | #### AddAttachmentResponse *** | Property | Type | Required | Description | | ---------------- | ------------ | -------- | --------------------------- | | `valid` | `boolean` | Yes | Whether attachment is valid | | `file` | `File` | No | File object | | `maxAllowedSize` | `number` | Yes | Maximum allowed file size | | `error` | `string` | No | Error message if invalid | | `attachment` | `Attachment` | No | Attachment object | #### DeleteAttachmentEvent *** | Property | Type | Required | Description | | ------------------- | ------------------- | -------- | ------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentId` | `number` | Yes | ID of the comment | | `commentAnnotation` | `CommentAnnotation` | Yes | Comment annotation object | | `attachment` | `Attachment` | Yes | Attachment Object | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | ### Reactions #### AddReactionEvent *** | Property | Type | Required | Description | | ------------------- | -------------------- | -------- | ------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentAnnotation` | `CommentAnnotation` | Yes | Comment annotation object | | `commentId` | `number` | Yes | ID of the comment | | `reaction` | `ReactionAnnotation` | Yes | Reaction Object | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | #### DeleteReactionEvent *** | Property | Type | Required | Description | | ------------------- | -------------------- | -------- | ------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentAnnotation` | `CommentAnnotation` | Yes | Comment annotation object | | `commentId` | `number` | Yes | ID of the comment | | `reaction` | `ReactionAnnotation` | Yes | Reaction Object | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | #### ToggleReactionEvent *** | Property | Type | Required | Description | | ------------------- | -------------------- | -------- | ------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentAnnotation` | `CommentAnnotation` | Yes | Comment annotation object | | `commentId` | `number` | Yes | ID of the comment | | `reaction` | `ReactionAnnotation` | Yes | Reaction Object | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | ### Status & Priority #### UpdateStatusEvent *** | Property | Type | Required | Description | | ------------------- | ------------------- | -------- | ------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentAnnotation` | `CommentAnnotation` | Yes | Comment annotation object | | `newStatus` | `CustomStatus` | Yes | New status object | | `oldStatus` | `CustomStatus` | Yes | Previous status object | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | #### ResolveCommentEvent *** | Property | Type | Required | Description | | ------------------- | ------------------- | -------- | ------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentAnnotation` | `CommentAnnotation` | Yes | Comment annotation object | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | #### UpdatePriorityEvent *** | Property | Type | Required | Description | | ------------------- | ------------------- | -------- | ------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentAnnotation` | `CommentAnnotation` | Yes | Comment annotation object | | `newPriority` | `CustomPriority` | No | New Priority object | | `oldPriority` | `CustomPriority` | No | Previous Priority object | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | #### ApproveCommentAnnotationEvent *** | Property | Type | Required | Description | | ------------------- | ------------------- | -------- | ------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentAnnotation` | `CommentAnnotation` | Yes | Comment annotation object | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | #### AcceptCommentAnnotationEvent *** | Property | Type | Required | Description | | -------------------- | ------------------- | -------- | ----------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentAnnotation` | `CommentAnnotation` | Yes | Comment annotation object | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | | `actionUser` | `User` | Yes | User who performed the action | | `replaceContentHtml` | `string` | No | HTML content to replace with | | `replaceContentText` | `string` | No | Text content to replace with | #### RejectCommentAnnotationEvent *** | Property | Type | Required | Description | | -------------------- | ------------------- | -------- | ----------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentAnnotation` | `CommentAnnotation` | Yes | Comment annotation object | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | | `actionUser` | `User` | Yes | User who performed the action | | `replaceContentHtml` | `string` | No | HTML content to replace with | | `replaceContentText` | `string` | No | Text content to replace with | ### Recordings #### DeleteRecordingEvent *** | Property | Type | Required | Description | | ------------------- | ------------------- | -------- | ------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentAnnotation` | `CommentAnnotation` | Yes | Comment annotation object | | `commentId` | `number` | Yes | ID of the comment | | `recording` | `RecordedData` | Yes | Recording data | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | ### Deep Links #### CopyLinkEvent *** | Property | Type | Required | Description | | ------------------- | ------------------- | -------- | ------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentAnnotation` | `CommentAnnotation` | Yes | Comment annotation object | | `link` | `string` | Yes | Copied link | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | #### GetLinkResponse *** | Property | Type | Required | Description | | ------------------- | ------------------- | -------- | ------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentAnnotation` | `CommentAnnotation` | Yes | Comment annotation object | | `link` | `string \| null` | Yes | Generated link | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | ### Access #### UpdateAccessEvent *** | Property | Type | Required | Description | | ------------------- | ------------------- | -------- | ------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentAnnotation` | `CommentAnnotation` | Yes | Comment annotation object | | `newAccessMode` | `CommentAccessMode` | No | New access mode | | `oldAccessMode` | `CommentAccessMode` | No | Previous access mode | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | ### UI #### ComposerClickedEvent *** | Property | Type | Required | Description | | ------------------- | ------------------- | -------- | --------------------------------------------------------------------------------------- | | `commentAnnotation` | `CommentAnnotation` | No | Comment annotation object. This is `undefined` if it's a new comment annotation object. | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | ### Comment Sidebar #### CommentSidebarDataInitEvent *** | Property | Type | Required | Description | | ----------------------------- | ------------------------------------------- | -------- | ---------------------------- | | `buttonContext` | `VeltButtonContext` | Yes | Button context | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | | `commentAnnotation` | `CommentAnnotation` | No | Comment annotation object | | `comment` | `Comment` | No | Comment object | | `index` | `number` | No | Index value | | `commentAnnotations` | `CommentAnnotation[]` | No | Array of comment annotations | | `systemFilteredAnnotations` | `CommentAnnotation[]` | No | Filtered comment annotations | | `unreadCommentAnnotationsMap` | `{ [commentAnnotationId: string]: number }` | No | Map of unread comment counts | #### CommentSidebarDataUpdateEvent *** | Property | Type | Required | Description | | ----------------------------- | ------------------------------------------- | -------- | ---------------------------- | | `buttonContext` | `VeltButtonContext` | Yes | Button context | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | | `commentAnnotation` | `CommentAnnotation` | No | Comment annotation object | | `comment` | `Comment` | No | Comment object | | `index` | `number` | No | Index value | | `commentAnnotations` | `CommentAnnotation[]` | No | Array of comment annotations | | `systemFilteredAnnotations` | `CommentAnnotation[]` | No | Filtered comment annotations | | `unreadCommentAnnotationsMap` | `{ [commentAnnotationId: string]: number }` | No | Map of unread comment counts | # Recorder #### TranscriptionDoneEvent *** | Property | Type | Required | Description | | -------------------------- | -------------------------- | -------- | ------------------------------- | | `transcription` | `string` | Yes | The transcribed text | | `id` | `string` | No | Unique identifier | | `tag` | `string` | No | Custom tag | | `type` | `string` | No | Type of transcription | | `thumbnailUrl` | `string` | No | URL of the thumbnail | | `thumbnailWithPlayIconUrl` | `string` | No | URL of thumbnail with play icon | | `videoUrl` | `string` | No | URL of the video | | `audioUrl` | `string` | No | URL of the audio | | `videoPlayerUrl` | `string` | No | URL of the video player | | `getThumbnailTag` | `(url?: string) => string` | No | Function to get thumbnail tag | # Core ### Velt Button #### VeltButtonClickEvent *** | Property | Type | Required | Description | | ----------------------------- | ------------------------------------------- | -------- | -------------------------------------------------------------------------------------- | | `buttonContext` | `VeltButtonContext` | Yes | Button context | | `metadata` | `VeltEventMetadata` | Yes | Event metadata | | `commentAnnotation` | `CommentAnnotation` | No | Comment annotation object | | `comment` | `Comment` | No | Comment object | | `index` | `number` | No | Index of the repeated component the button is in. eg: Comment, Notification component. | | `commentAnnotations` | `CommentAnnotation[]` | No | Array of comment annotations | | `systemFilteredAnnotations` | `CommentAnnotation[]` | No | Filtered comment annotations | | `unreadCommentAnnotationsMap` | `{ [commentAnnotationId: string]: number }` | No | Map of unread comment counts | | `notification` | `Notification` | No | Notification object | | `notifications` | `Notification[]` | No | Array of notifications | # API Event Types Enum Source: https://docs.velt.dev/api-reference/sdk/models/api-event-types-enum # Comments ### Threads | Enum Name | Event Type | Description | | --------------------------- | ------------------------- | ---------------------------- | | `ADD_COMMENT_ANNOTATION` | `addCommentAnnotation` | Add a new comment annotation | | `DELETE_COMMENT_ANNOTATION` | `deleteCommentAnnotation` | Delete a comment annotation | ### Messages | Enum Name | Event Type | Description | | ---------------- | --------------- | -------------------------- | | `ADD_COMMENT` | `addComment` | Add a new comment | | `UPDATE_COMMENT` | `updateComment` | Update an existing comment | | `DELETE_COMMENT` | `deleteComment` | Delete a comment | ### @Mentions | Enum Name | Event Type | Description | | -------------------------------- | ------------------------------ | ------------------------------------------------------------------ | | `ASSIGN_USER` | `assignUser` | Assign a user to a comment | | `SUBSCRIBE_COMMENT_ANNOTATION` | `subscribeCommentAnnotation` | Subscribe to a comment annotation | | `UNSUBSCRIBE_COMMENT_ANNOTATION` | `unsubscribeCommentAnnotation` | Unsubscribe from a comment annotation | | `AUTOCOMPLETE_SEARCH` | `autocompleteSearch` | When user starts searching for a contact in the @mentions dropdown | ### Custom Lists | Enum Name | Event Type | Description | | --------------------- | -------------------- | ---------------------------------------------------------------------- | | `AUTOCOMPLETE_SEARCH` | `autocompleteSearch` | When user starts searching for a list item in the custom list dropdown | ### Attachments | Enum Name | Event Type | Description | | ------------------- | ------------------ | ----------------------------------- | | `ADD_ATTACHMENT` | `addAttachment` | Add an attachment to a comment | | `DELETE_ATTACHMENT` | `deleteAttachment` | Delete an attachment from a comment | ### Reactions | Enum Name | Event Type | Description | | ----------------- | ---------------- | -------------------------------- | | `ADD_REACTION` | `addReaction` | Add a reaction to a comment | | `DELETE_REACTION` | `deleteReaction` | Delete a reaction from a comment | | `TOGGLE_REACTION` | `toggleReaction` | Toggle a reaction on a comment | ### Status & Priority | Enum Name | Event Type | Description | | ---------------------------- | -------------------------- | -------------------------------- | | `UPDATE_STATUS` | `updateStatus` | Update the status of a comment | | `RESOLVE_COMMENT` | `resolveComment` | Resolve a comment | | `UPDATE_PRIORITY` | `updatePriority` | Update the priority of a comment | | `APPROVE_COMMENT_ANNOTATION` | `approveCommentAnnotation` | Approve a comment annotation | | `ACCEPT_COMMENT_ANNOTATION` | `acceptCommentAnnotation` | Accept a comment annotation | | `REJECT_COMMENT_ANNOTATION` | `rejectCommentAnnotation` | Reject a comment annotation | ### Recordings | Enum Name | Event Type | Description | | ------------------ | ----------------- | --------------------------------- | | `DELETE_RECORDING` | `deleteRecording` | Delete a recording from a comment | ### Deep Links | Enum Name | Event Type | Description | | ----------- | ---------- | ----------------------------- | | `COPY_LINK` | `copyLink` | Copy a deep link to a comment | ### Access | Enum Name | Event Type | Description | | --------------- | -------------- | ------------------------------------ | | `UPDATE_ACCESS` | `updateAccess` | Update access settings for a comment | ### Comment Sidebar | Enum Name | Event Type | Description | | ----------------------------- | -------------------------- | --------------------------------------------------- | | `COMMENT_SIDEBAR_DATA_INIT` | `commentSidebarDataInit` | Triggered when comment sidebar data is first loaded | | `COMMENT_SIDEBAR_DATA_UPDATE` | `commentSidebarDataUpdate` | Triggered when comment sidebar data is updated | ### UI | Enum Name | Event Type | Description | | ------------------ | ----------------- | ------------------------------------------ | | `COMPOSER_CLICKED` | `composerClicked` | Triggered when comment composer is clicked | # Recorder | Enum Name | Event Type | Description | | -------------------- | ------------------- | ----------------------------------------------------- | | `TRANSCRIPTION_DONE` | `transcriptionDone` | Triggered when a transcription is generated and ready | # Core ### Velt Button | Enum Name | Event Type | Description | | ------------------- | ----------------- | --------------------------------------- | | `VELT_BUTTON_CLICK` | `veltButtonClick` | Triggered when a Velt Button is clicked | # API Request Objects Source: https://docs.velt.dev/api-reference/sdk/models/api-request-objects # Comments ### Threads #### AddCommentAnnotationRequest *** | Property | Type | Required | Description | | ------------ | ------------------- | -------- | ------------------ | | `annotation` | `CommentAnnotation` | Yes | Comment annotation | | `options` | `RequestOptions` | No | Request options | #### DeleteCommentAnnotationRequest *** | Property | Type | Required | Description | | -------------- | ---------------- | -------- | -------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `options` | `RequestOptions` | No | Request options | #### CommentRequestQuery *** | Property | Type | Required | Description | | ------------- | ---------- | -------- | ---------------------------------- | | `documentIds` | `string[]` | Yes | Array of document IDs to query | | `locationIds` | `string[]` | No | Array of location IDs to filter by | | `statusIds` | `string[]` | No | Array of status IDs to filter by | #### GetCommentAnnotationsCountResponse *** | Property | Type | Required | Description | | -------- | ------------------------------------------------- | -------- | --------------------------------------------------------------- | | `data` | `Record \| null` | Yes | Map of document IDs to their comment counts. Null while loading | #### GetCommentAnnotationsResponse *** | Property | Type | Required | Description | | -------- | --------------------------------------------- | -------- | ------------------------------------------------------------ | | `data` | `Record \| null` | Yes | Map of document IDs to their annotations. Null while loading | #### FetchCommentAnnotationsRequest *** | Property | Type | Required | Description | | ---------------- | ----------------- | -------- | ------------------------------------------------ | | `createdAfter` | `number` | No | Filter annotations created after this timestamp | | `createdBefore` | `number` | No | Filter annotations created before this timestamp | | `updatedAfter` | `number` | No | Filter annotations updated after this timestamp | | `updatedBefore` | `number` | No | Filter annotations updated before this timestamp | | `statusIds` | `string[]` | No | Filter annotations by status IDs | | `order` | `'asc' \| 'desc'` | No | Sort order for annotations | | `pageToken` | `string` | No | Token for fetching next page of results | | `allDocuments` | `boolean` | No | Whether to fetch annotations from all documents | | `pageSize` | `number` | No | Number of results per page | | `organizationId` | `string` | No | Organization ID to fetch annotations from | | `locationId` | `string` | No | Location ID to filter annotations by | | `documentIds` | `string[]` | No | Array of specific document IDs to fetch from | | `folderId` | `string` | No | Folder ID to fetch annotations from | #### FetchCommentAnnotationsResponse *** | Property | Type | Required | Description | | --------------- | --------------------------------------------- | -------- | -------------------------------------------------------------- | | `data` | `Record \| null` | Yes | Map of document IDs to their annotations. `Null` while loading | | `nextPageToken` | `string` | Yes | Token for fetching next page of results | ### Messages #### AddCommentRequest *** | Property | Type | Required | Description | | -------------- | ---------------- | -------- | -------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `comment` | `Comment` | Yes | Comment object | | `assignedTo` | `User` | No | Assigned user | | `options` | `RequestOptions` | No | Request options | #### UpdateCommentRequest *** | Property | Type | Required | Description | | -------------- | ---------------- | -------- | -------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `comment` | `Comment` | Yes | Comment object | | `merge` | `boolean` | No | Merge comments | | `options` | `RequestOptions` | No | Request options | #### DeleteCommentRequest *** | Property | Type | Required | Description | | ------------------------------ | ---------------- | -------- | ------------------------ | | `annotationId` | `string` | Yes | ID of the annotation | | `commentId` | `number` | Yes | ID of the comment | | `skipDeleteThreadConfirmation` | `boolean` | No | Skip delete confirmation | | `options` | `RequestOptions` | No | Request options | #### GetCommentRequest *** | Property | Type | Required | Description | | -------------- | ---------------- | -------- | -------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `options` | `RequestOptions` | No | Request options | ### @Mentions #### AssignUserRequest *** | Property | Type | Required | Description | | -------------- | ---------------- | -------- | -------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `assignedTo` | `UserContact` | Yes | User to assign | | `options` | `RequestOptions` | No | Request options | #### SubscribeCommentAnnotationRequest *** | Property | Type | Required | Description | | -------------- | ---------------- | -------- | -------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `options` | `RequestOptions` | No | Request options | #### UnsubscribeCommentAnnotationRequest *** | Property | Type | Required | Description | | -------------- | ---------------- | -------- | -------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `options` | `RequestOptions` | No | Request options | ### Attachments #### AddAttachmentRequest *** | Property | Type | Required | Description | | -------------- | ---------------- | -------- | -------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `files` | `File[]` | Yes | Array of files | | `options` | `RequestOptions` | No | Request options | #### DeleteAttachmentRequest *** | Property | Type | Required | Description | | -------------- | ---------------- | -------- | -------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentId` | `number` | Yes | ID of the comment | | `attachmentId` | `number` | Yes | ID of the attachment | | `options` | `RequestOptions` | No | Request options | #### GetAttachmentRequest *** | Property | Type | Required | Description | | -------------- | ---------------- | -------- | -------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentId` | `number` | Yes | ID of the comment | | `options` | `RequestOptions` | No | Request options | #### AddAttachmentResponse *** | Property | Type | Required | Description | | ---------------- | ------------ | -------- | ----------------- | | `valid` | `boolean` | Yes | Validity status | | `file` | `File` | No | File object | | `maxAllowedSize` | `number` | Yes | Max allowed size | | `error` | `string` | No | Error message | | `attachment` | `Attachment` | No | Attachment object | ### Reactions #### AddReactionRequest *** | Property | Type | Required | Description | | -------------- | -------------------------------------------------------- | -------- | ----------------------------------------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentId` | `number` | Yes | ID of the comment | | `reaction` | `{ reactionId: string; customReaction?: ReactionItem; }` | Yes | Reaction object with reactionId and optional customReaction | | `options` | `RequestOptions` | No | Request options | #### DeleteReactionRequest *** | Property | Type | Required | Description | | -------------- | -------------------------------------------------------- | -------- | ----------------------------------------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentId` | `number` | Yes | ID of the comment | | `reaction` | `{ reactionId: string; customReaction?: ReactionItem; }` | Yes | Reaction object with reactionId and optional customReaction | | `options` | `RequestOptions` | No | Request options | #### ToggleReactionRequest *** | Property | Type | Required | Description | | -------------- | -------------------------------------------------------- | -------- | ----------------------------------------------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentId` | `number` | Yes | ID of the comment | | `reaction` | `{ reactionId: string; customReaction?: ReactionItem; }` | Yes | Reaction object with reactionId and optional customReaction | | `options` | `RequestOptions` | No | Request options | #### ReactionItem *** | Property | Type | Required | Description | | -------- | -------- | -------- | ------------------------- | | `url` | `string` | No | URL of the reaction image | | `emoji` | `string` | No | Emoji character | ### Status & Priority #### UpdateStatusRequest *** | Property | Type | Required | Description | | -------------- | ---------------- | -------- | -------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `status` | `CustomStatus` | Yes | Status value | | `options` | `RequestOptions` | No | Request options | #### ResolveCommentAnnotationRequest *** | Property | Type | Required | Description | | -------------- | ---------------- | -------- | -------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `options` | `RequestOptions` | No | Request options | #### UpdatePriorityRequest *** | Property | Type | Required | Description | | -------------- | ---------------- | -------- | -------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `priority` | `CustomPriority` | No | Priority object | | `options` | `RequestOptions` | No | Request options | #### ApproveCommentAnnotationRequest *** | Property | Type | Required | Description | | -------------- | ---------------- | -------- | -------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `options` | `RequestOptions` | No | Request options | #### AcceptCommentAnnotationRequest *** | Property | Type | Required | Description | | -------------- | ---------------- | -------- | -------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `options` | `RequestOptions` | No | Request options | #### RejectCommentAnnotationRequest *** | Property | Type | Required | Description | | -------------- | ---------------- | -------- | -------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `options` | `RequestOptions` | No | Request options | ### Recordings #### GetRecordingRequest *** | Property | Type | Required | Description | | -------------- | ---------------- | -------- | -------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentId` | `number` | Yes | ID of the comment | | `options` | `RequestOptions` | No | Request options | #### DeleteRecordingRequest *** | Property | Type | Required | Description | | -------------- | ---------------- | -------- | -------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `commentId` | `number` | Yes | ID of the comment | | `recorderId` | `string` | Yes | ID of the recorder | | `options` | `RequestOptions` | No | Request options | ### Deep Links #### GetLinkRequest *** | Property | Type | Required | Description | | -------------- | ---------------- | -------- | -------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `options` | `RequestOptions` | No | Request options | #### CopyLinkRequest *** | Property | Type | Required | Description | | -------------- | ---------------- | -------- | -------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `options` | `RequestOptions` | No | Request options | ### Access #### UpdateAccessRequest *** | Property | Type | Required | Description | | -------------- | ------------------- | -------- | -------------------- | | `annotationId` | `string` | Yes | ID of the annotation | | `accessMode` | `CommentAccessMode` | Yes | Access mode | | `options` | `RequestOptions` | No | Request options | ### RequestOptions *** | Property | Type | Required | Description | | ------------ | -------- | -------- | ----------- | | `documentId` | `string` | No | Document ID | # Recorder ### Recorder Data #### RecorderRequestQuery *** | Property | Type | Required | Description | | ------------- | ---------- | -------- | ------------------------------ | | `recorderIds` | `string[]` | Yes | Array of recorder IDs to query | #### GetRecordingDataResponse *** | Property | Type | Required | Description | | -------- | -------------------------------------- | -------- | --------------------------------------------------------------- | | `data` | `Record \| null` | Yes | Map of recorder IDs to their recording data. Null while loading | # Core ### Folders #### FetchFoldersRequest *** | Property | Type | Required | Description | | ---------------- | -------- | -------- | -------------------------------------------- | | `organizationId` | `string` | Yes | Organization ID to fetch folders from | | `folderId` | `string` | No | Parent folder ID to fetch child folders from | #### FetchFoldersResponse *** | Property | Type | Required | Description | | --------------- | ---------------------------------------- | -------- | --------------------------------------------------------- | | `data` | `Record \| null` | Yes | Map of folder IDs to their metadata. `Null` while loading | | `nextPageToken` | `string` | Yes | Token for fetching next page of results | ### Documents ### SetDocumentsRequestOptions *** | Property | Type | Required | Description | | ---------------- | --------- | -------- | ---------------------------------------------------------------------------- | | `organizationId` | `string` | No | Organization ID for the documents | | `folderId` | `string` | No | Subscribe to all or provided documents in the given folder | | `locationId` | `string` | No | Filter and subscribe to document data for a specific location | | `allDocuments` | `boolean` | No | Subscribe to all documents in the folder. Use this when folderId is provided | #### FetchDocumentsRequest *** | Property | Type | Required | Description | | ---------------- | ---------- | -------- | ------------------------------------------ | | `organizationId` | `string` | Yes | Organization ID to fetch documents from | | `documentIds` | `string[]` | No | Array of specific document IDs to fetch | | `folderId` | `string` | No | Folder ID to fetch documents from | | `allDocuments` | `boolean` | No | Whether to fetch all documents from folder | #### FetchDocumentsResponse *** | Property | Type | Required | Description | | --------------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------- | | `data` | `Record \| null` | Yes | Map of document IDs to their [metadata](/api-reference/sdk/models/data-models#documentmetadata). Null while loading | | `nextPageToken` | `string` | Yes | Token for fetching next page of results. Default page size is 1000. | # null Source: https://docs.velt.dev/api-reference/sdk/models/data-models ### AutocompleteItem *** | Property | Type | Required | Description | | ------------- | -------- | -------- | ------------------------- | | `id` | `string` | Yes | Unique identifier | | `name` | `string` | Yes | Name of the item | | `description` | `string` | No | Optional description | | `icon` | `object` | No | Optional icon information | | `icon.url` | `string` | No | URL of the icon | | `link` | `string` | No | Link associated with item | ### Comment *** | Property | Type | Required | Description | | ----------------------- | -------------------------------------- | -------- | ----------------------------------------------------------------------- | | `commentId` | `number` | Yes | Unique identifier for the comment pin annotation. Auto generated. | | `type` | `'text' \| 'voice'` | Yes | This determines the comment content type. Default is 'text'. | | `commentText` | `string` | Yes | The actual text content of the comment. | | `commentHtml` | `string` | No | Same comment text but formatted in HTML. | | `replaceContentHtml` | `string` | No | HTML content to replace the comment text when user accepts the comment. | | `replaceContentText` | `string` | No | Text content to replace the comment text when user accepts the comment. | | `commentVoiceUrl` | `string` | No | URL of the voice recording for the comment, if available. | | `from` | `User` | Yes | The user who created this comment. | | `to` | `User[]` | No | List of users that were @mentioned in this comment. | | `lastUpdated` | `Date` | No | Timestamp of when this comment was last updated. Auto generated. | | `editedAt` | `any` | No | Timestamp of when this comment was edited. Auto generated. | | `createdAt` | `any` | No | Timestamp of when this comment was created. Auto generated. | | `isEdited` | `boolean` | No | Whether the comment has been edited. Auto generated. | | `status` | `'added' \| 'updated'` | Yes | Status of the comment indicating whether it was newly added or updated. | | `attachments` | `Attachment[]` | Yes | List of attachments associated with the comment. | | `recorders` | `RecordedData[]` | Yes | List of recorded data associated with the comment. | | `reactionAnnotationIds` | `string[]` | Yes | List of annotation IDs for reactions to the comment. | | `taggedUserContacts` | `AutocompleteUserContactReplaceData[]` | Yes | List of users that were @mentioned in this comment with UI metadata. | | `customList` | `AutocompleteReplaceData[]` | Yes | List of custom list items added to the comment. | | `isDraft` | `boolean` | Yes | Whether the comment is in draft state. | ### AutocompleteUserContactReplaceData *** | Property | Type | Required | Description | | --------- | -------- | -------- | ----------------------------------------------------------------- | | `text` | `string` | Yes | The text displayed in the comment that represents the tagged user | | `userId` | `string` | Yes | The user ID of the tagged user | | `contact` | `User` | No | The user object of the tagged user | ### AutocompleteReplaceData *** | Property | Type | Required | Description | | -------- | ------------------ | -------- | ----------------------------------------------------------------- | | `text` | `string` | Yes | The text displayed in the comment that represents the custom item | | `custom` | `AutocompleteItem` | Yes | The custom item object associated with this text | ### AutocompleteItem *** | Property | Type | Required | Description | | ------------- | ------------------ | -------- | --------------------------------------------------- | | `id` | `string` | Yes | Unique identifier for the autocomplete item | | `name` | `string` | Yes | Name or label of the autocomplete item | | `description` | `string` | No | Additional description of the autocomplete item | | `icon` | `{ url?: string }` | No | Icon associated with the autocomplete item | | `link` | `string` | No | Optional link associated with the autocomplete item | ### AutocompleteData *** | Property | Type | Required | Description | | ------------- | ---------------------------------- | -------- | -------------------------------------------------- | | `hotkey` | `string` | Yes | The hotkey or trigger for this autocomplete data | | `description` | `string` | No | Optional description of the autocomplete data | | `type` | `'custom' \| 'contact' \| 'group'` | Yes | The type of autocomplete data. Default is 'custom' | | `data` | `AutocompleteItem[]` | Yes | An array of AutocompleteItem objects | ### Attachment *** | Property | Type | Required | Description | | -------------------------- | -------- | -------- | ---------------------------------------------------- | | `attachmentId` | `number` | Yes | Unique identifier for the attachment. Auto-generated | | `name` | `string` | No | File name of the attachment | | `size` | `number` | No | File size of the attachment | | `type` | `string` | No | File type of the attachment | | `url` | `string` | No | Download URL of the attachment | | `thumbnail` | `string` | No | Thumbnail image in base64 format | | `thumbnailWithPlayIconUrl` | `string` | No | URL of the thumbnail with a play icon overlay | | `metadata` | `any` | No | Additional metadata of the attachment | | `mimeType` | `any` | No | MIME type of the attachment | ### CommentAnnotation *** | Property | Type | Required | Description | | ------------------------- | ------------------------------------ | -------- | ------------------------------------------------------------------------------------ | | `annotationId` | `string` | Yes | Unique identifier for the comment pin annotation. Auto generated | | `comments` | `Comment[]` | Yes | The list of all comments part of this annotation | | `commentCategories` | `CustomCategory[]` | Yes | The list of categories that this comment pin annotation belongs to | | `from` | `User` | Yes | The user who created this comment pin annotation | | `color` | `string` | No | Color used for the comment pin annotation | | `resolved` | `boolean` | No | Whether the comment annotation is marked resolved. Deprecated | | `inProgress` | `boolean` | No | Whether the comment annotation is marked as in progress. Deprecated | | `lastUpdated` | `any` | No | Timestamp when the comment annotation was last updated. Auto generated | | `createdAt` | `any` | No | Timestamp when the comment annotation was created. Auto generated | | `position` | `CursorPosition \| null` | No | Cursor position relative to the comment annotation | | `locationId` | `number \| null` | No | Unique location id generated from provided location | | `location` | `Location \| null` | No | Set location to identify user on sub document | | `type` | `string` | No | Type of the comment annotation | | `selectAllContent` | `boolean` | No | If true, sets text comment annotation on all the text content | | `approved` | `boolean` | No | Whether the comment annotation is approved | | `status` | `CustomStatus` | Yes | Status of the comment annotation. Default: CommentAnnotationStatusMap.OPEN | | `annotationIndex` | `number` | No | Index of current annotation in the list | | `pageInfo` | `PageInfo` | No | Page information related to the comment annotation | | `assignedTo` | `User` | No | User to whom the comment annotation is assigned | | `priority` | `CustomPriority` | No | Priority level of the comment annotation | | `ghostComment` | `GhostComment \| null` | No | Placeholder for a non-existing comment | | `context` | `any` | No | Custom context data provided by the user | | `resolvedByUserId` | `string` | No | ID of the user who resolved the comment | | `subscribedUsers` | `CommentAnnotationSubscribedUsers` | No | Users who explicitly subscribe to the comment | | `unsubscribedUsers` | `CommentAnnotationUnsubscribedUsers` | No | Users who explicitly unsubscribe to the comment | | `multiThreadAnnotationId` | `string` | No | ID of the multithread annotation group it belongs to, if created in multithread mode | | `isDraft` | `boolean` | No | Indicates if the comment annotation is in draft state | | `customList` | `CustomAnnotationDropdownItem[]` | No | Custom list of items for the comment annotation | ### CommentAnnotationSubscribedUsers *** | Property | Type | Required | Description | | ------------ | -------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `userIdHash` | `string` | Yes | The user ID of the subscribed user | | `user` | `User` | Yes | The user object of the subscribed user | | `type` | `'manual' \| 'auto'` | Yes | Manual: if the user used the UI option to subscribe; Auto: When the system automatically adds the user to the subscribed list. eg: when the user creates a comment annotation | ### CommentAnnotationUnsubscribedUsers *** | Property | Type | Required | Description | | ------------ | -------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `userIdHash` | `string` | Yes | The user ID of the unsubscribed user | | `user` | `User` | Yes | The user object of the unsubscribed user | | `type` | `'manual' \| 'auto'` | Yes | Manual: if the user used the UI option to unsubscribe; Auto: When the system automatically removes the user from the unsubscribed list. eg: when the comment where user was tagged is deleted | ### CustomFilter *** | Property | Type | Required | Description | | -------- | -------- | -------- | --------------------------------------- | | `id` | `string` | Yes | Unique identifier for the custom filter | | `color` | `string` | Yes | Color associated with the custom filter | | `name` | `string` | Yes | Name or label of the custom filter | ### CustomPriority *** | Property | Type | Required | Description | | ------------ | -------- | -------- | ------------------------------------------- | | `id` | `string` | Yes | Unique identifier for the custom priority | | `color` | `string` | Yes | Color associated with the custom priority | | `name` | `string` | Yes | Name or label of the custom priority | | `lightColor` | `string` | No | Light color variant for the custom priority | ### CustomStatus *** | Property | Type | Required | Description | | ------------ | ------------ | -------- | -------------------------------------------------------- | | `id` | `string` | Yes | Unique identifier for the custom status | | `color` | `string` | Yes | Color associated with the custom status | | `name` | `string` | Yes | Name or label of the custom status | | `type` | `StatusType` | Yes | Type of the status (`default`, `ongoing`, or `terminal`) | | `lightColor` | `string` | No | Light color for the custom status | | `iconUrl` | `string` | No | URL to an icon image for the custom status | ### CustomCategory *** | Property | Type | Required | Description | | -------- | -------- | -------- | ----------------------------------------- | | `id` | `string` | Yes | Unique identifier for the custom category | | `color` | `string` | Yes | Color associated with the custom category | | `name` | `string` | Yes | Name or label of the custom category | ### CustomAnnotationDropdownData *** | Property | Type | Required | Description | | ------------- | -------------------------------- | -------- | ----------------------------------------------------------- | | `type` | `'multi' \| 'single'` | Yes | The type of the custom annotation dropdown | | `placeholder` | `string` | Yes | The placeholder text for the dropdown. Defaults to 'Select' | | `data` | `CustomAnnotationDropdownItem[]` | Yes | An array of dropdown items | ### CustomAnnotationDropdownItem *** | Property | Type | Required | Description | | -------- | -------- | -------- | ------------------------------------------- | | `id` | `string` | Yes | The unique identifier for the dropdown item | | `label` | `string` | Yes | The display text for the dropdown item | ### Default Status Object The default status object is defined in the `CommentAnnotationStatusMap` constant. It includes three predefined statuses: OPEN, IN\_PROGRESS, and RESOLVED. Each status is an object with the following structure: ```js { OPEN: { id: 'OPEN', name: 'Open', color: '#625DF5', lightColor: '#E7E8FA', type: 'default', iconUrl: 'url' }, IN_PROGRESS: { id: 'IN_PROGRESS', name: 'In Progress', color: '#ECB000', lightColor: '#FEFCEA', type: 'ongoing', iconUrl: 'url' }, RESOLVED: { id: 'RESOLVED', name: 'Resolved', color: '#00C48C', lightColor: '#E7FAF2', type: 'terminal', iconUrl: 'url' }, } ``` ### CommentSelectionChangeData *** | Property | Type | Required | Description | | ------------ | ------------------- | -------- | -------------------------------------- | | `selected` | `boolean` | Yes | Whether a comment is selected | | `annotation` | `CommentAnnotation` | Yes | Object data of the selected annotation | ### CommentSidebarFilterConfig *** | Property | Type | Required | Description | | ------------- | ------------------ | -------- | ------------------------------------------- | | `location` | `FilterTypeConfig` | No | Configuration for the location filter type. | | `people` | `FilterTypeConfig` | No | Configuration for the people filter type. | | `priority` | `FilterTypeConfig` | No | Configuration for the priority filter type. | | `category` | `FilterTypeConfig` | No | Configuration for the category filter type. | | `commentType` | `FilterTypeConfig` | No | Configuration for the comment type filter. | | `version` | `FilterTypeConfig` | No | Configuration for the version filter type. | | `status` | `FilterTypeConfig` | No | Configuration for the status filter type. | ### FilterTypeConfig *** | Property | Type | Required | Description | | ---------------- | --------- | -------- | ------------------------------------------------------ | | `name` | `string` | No | The name of the filter type | | `enable` | `boolean` | No | Enables or disables the filter type | | `multiSelection` | `boolean` | No | Allows multiple selections if set to true | | `enableGrouping` | `boolean` | No | Enables grouping within the filter type if set to true | ### CommentSidebarGroupConfig *** | Property | Type | Required | Description | | -------- | --------- | -------- | ---------------------------- | | `enable` | `boolean` | No | Enables or disables grouping | | `name` | `string` | No | The name of the group | ### CommentSidebarFilters *** | Property | Type | Required | Description | | ---------- | ------------ | -------- | ---------------------------------------------------------------------- | | `location` | `Location[]` | No | Array of `Location` objects for the location filters | | `people` | `Object[]` | No | Array of objects with `userId`, `email`, and `name` for people filters | | `priority` | `string[]` | No | Array of priority filters | | `status` | `string[]` | No | Array of status filters | | `category` | `string[]` | No | Array of category filters | | `version` | `Object[]` | No | Array of objects with `id` and optional `name` for version filters | ### CommentSidebarData *** | Property | Type | Required | Description | | ------------- | --------------------- | -------- | ----------------------------------------------- | | `groupId` | `string` | No | ID of the group. Defaults to 'others' | | `groupName` | `string` | No | Name of the group. Defaults to 'Others' | | `isExpanded` | `boolean` | No | Whether the group is expanded. Defaults to true | | `annotations` | `CommentAnnotation[]` | Yes | List of CommentAnnotations in the group | ### Options *** | Property | Type | Required | Description | | ---------- | --------- | -------- | ------------------------------------------- | | `grouping` | `boolean` | No | Whether to group the data. Defaults to true | ### Config | Property | Type | Required | Description | | ----------------------- | -------------- | -------- | ------------------------------------------------------------------------------------------------------------------------ | | `urlAllowList` | string\[] | No | Restricts Velt features to specific pages by specifying partial URL strings. | | `featureAllowList` | FeatureType\[] | No | Only allows the provided Velt features to run. | | `userPlanAllowList` | string\[] | No | Restricts Velt features to specific user plans. | | `userIdAllowList` | string\[] | No | Restricts Velt features to specific users. | | `usePrefersColorScheme` | boolean | No | If set to true, listens to changes on the `prefers-color-scheme` media query to set the global theme of Velt components. | ### ContactListScopeForOrganizationUsers Enum *** | Enum Name | Event Type | Description | | ------------------------- | ----------------------- | ------------------------------ | | `ALL` | `all` | Show all the contacts | | `ORGANIZATION` | `organization` | Show organization contacts. | | `ORGANIZATION_USER_GROUP` | `organizationUserGroup` | Show organization user groups. | | `DOCUMENT` | `document` | Show document contacts. | ### CursorUser *** | Property | Type | Required | Description | | -------------- | ------------------------ | -------- | --------------------------------------------------------------------------------------- | | `userId` | `string` | Yes | Unique user identifier that you use to identify your user. | | `name` | `string` | No | Your user's full name. Default: Random avatar name. | | `email` | `string` | No | Your user's email address. | | `photoUrl` | `string` | No | Your user's display picture URL. Default: Random avatar image. | | `comment` | `string` | No | Short comment that user can add to their live cursor. | | `onlineStatus` | `string` | Yes | User's online status (active, inactive, offline). Auto generated. | | `color` | `string` | No | A random color assigned to the user for the session, used on avatar border/live cursor. | | `timestamp` | `any` | Yes | Server Timestamp. | | `type` | `string` | No | User type. | | `locationId` | `number \| null` | No | Unique location id from provided location. | | `location` | `Location \| null` | No | Location to identify user on sub document. | | `position` | `CursorPosition \| null` | No | User's cursor position on their screen. | | `isReadOnly` | `boolean` | No | Indicates if user is readonly. | | `isAnonymous` | `boolean` | No | Indicates if user is anonymous and can only view comments. | ### CustomCss *** | Property | Type | Required | Description | | -------- | ------------------ | -------- | --------------------------------------------------------------------- | | `type` | 'link' \| 'styles' | Yes | The type of custom CSS, either a link to a CSS file or inline styles. | | `value` | string | Yes | The value of the custom CSS, either a URL or CSS styles. | ### CustomFilter *** | Property | Type | Required | Description | | -------- | ------ | -------- | ---------------------------------------- | | `id` | string | Yes | Unique identifier for the custom filter. | | `color` | string | Yes | Color associated with the custom filter. | | `name` | string | Yes | Name or label of the custom filter. | ### CustomPriority *** | Property | Type | Required | Description | | ------------ | ------ | -------- | -------------------------------------------- | | `id` | string | Yes | Unique identifier for the custom priority. | | `color` | string | Yes | Color associated with the custom priority. | | `name` | string | Yes | Name or label of the custom priority. | | `lightColor` | string | No | Light color variant for the custom priority. | ### CustomStatus *** | Property | Type | Required | Description | | ------------ | ---------- | -------- | --------------------------------------------------------- | | `id` | string | Yes | Unique identifier for the custom status. | | `color` | string | Yes | Color associated with the custom status. | | `name` | string | Yes | Name or label of the custom status. | | `type` | StatusType | Yes | Type of the status (`default`, `ongoing`, or `terminal`). | | `lightColor` | string | No | Light color for the custom status. | | `iconUrl` | string | No | URL to an icon image for the custom status. | ### CustomCategory *** | Property | Type | Required | Description | | -------- | ------ | -------- | ------------------------------------------ | | `id` | string | Yes | Unique identifier for the custom category. | | `color` | string | Yes | Color associated with the custom category. | | `name` | string | Yes | Name or label of the custom category. | ### DocumentMetadata *** | Property | Type | Required | Description | | ---------------- | -------------------------------------------- | -------- | ---------------------------------------------------- | | `documentId` | `string` | Yes | Unique document id generated from client document id | | `documentName` | `string` | No | Display name of the document | | `folderId` | `string` | No | ID of the folder containing this document | | `apiKey` | `string` | No | API key associated with the document | | `organizationId` | `string` | Yes | Organization ID that owns this document | | `locations` | `{ [locationId: number]: LocationMetadata }` | No | Location metadata for this document | ### EditorAccessTimer *** | Property | Type | Required | Description | | -------------- | --------------------------------------- | -------- | ---------------------------------------------------------- | | `state` | `'idle' \| 'inProgress' \| 'completed'` | Yes | The state of the Editor Access Request timer | | `durationLeft` | `number` | No | Duration left for the editor access timer to be completed. | ### Features *** | Property | Type | Required | Description | | ----------------- | ----------------- | -------- | -------------------------------------------------- | | `AREA` | `'area'` | No | Area feature for drawing areas/rectangles | | `ARROW` | `'arrow'` | No | Arrow feature for drawing arrows | | `AUDIO_HUDDLE` | `'audioHuddle'` | No | Audio huddle feature for voice conversations | | `COMMENT` | `'comment'` | No | Comment feature for adding comments | | `CURSOR` | `'cursor'` | No | Cursor feature for showing user cursors | | `HUDDLE` | `'huddle'` | No | Huddle feature for video conversations | | `LIVE_STATE_SYNC` | `'liveStateSync'` | No | Live state sync feature | | `PRESENCE` | `'presence'` | No | Presence feature for showing online users | | `TAG` | `'tag'` | No | Tag feature for adding tags | | `RECORDER` | `'recorder'` | No | Recorder feature for recording sessions | | `REWRITER` | `'rewriter'` | No | Rewriter feature for text rewriting | | `LIVE_SELECTION` | `'liveSelection'` | No | Live selection feature for showing user selections | ### FlockOptions *** | Property | Type | Required | Description | | -------------------------- | ------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | `useHistoryAPI` | `boolean` | Yes | Indicates whether the application should use the HTML5 History API for navigation | | `onNavigate` | `(url: PageInfo) => void` | No | A callback function that is called when navigation occurs. It takes a `PageInfo` object as its argument, which contains details about the new page | | `disableDefaultNavigation` | `boolean` | Yes | If `true`, the application's default navigation handling is disabled, perhaps to be managed manually or by another system | | `darkMode` | `boolean` | Yes | A flag indicating whether the application should display in dark mode, a display preference that may be more comfortable for users in low-light conditions | ### LiveStateData *** | Property | Type | Required | Description | | ----------------- | ------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------- | | `id` | `string` | Yes | A unique identifier likely used for quick reference and indexing. It's an MD5 hash of `liveStateDataId` | | `liveStateDataId` | `string` | Yes | A unique identifier for the state data being synced | | `data` | `string \| number \| boolean \| JSON` | Yes | The actual data you want to synchronize across clients | | `lastUpdated` | `any` | Yes | A timestamp or similar data indicating the last time the state data was updated | | `updatedBy` | `User` | Yes | The user who last updated the state data | | `tabId` | `string \| null` | No | An identifier that could be used to associate the state data with a specific tab or instance | ### SingleEditorLiveStateData *** | Property | Type | Required | Description | | --------------------- | ---------------- | -------- | ----------------------------------------- | | `editor` | `User \| null` | No | The user who is currently editing, if any | | `requestEditorAccess` | `Object \| null` | No | Details about a request for editor access | | `tabId` | `string \| null` | No | The identifier of the tab, if applicable | ### RequestEditorAccess *** | Property | Type | Required | Description | | --------------------- | ------------------------------------------------------ | -------- | ------------------------------------------------------- | | `user` | `User` | Yes | The user requesting editor access | | `requestedAt` | `any` | Yes | The timestamp when the access was requested | | `status` | `'pending' \| 'accepted' \| 'rejected' \| 'cancelled'` | Yes | The status of the access request | | `editorAccessTimeout` | `number` | Yes | Timeout duration for the editor access | | `tabId` | `string \| null` | No | The identifier of the tab related to the access request | ### SingleEditorConfig *** | Property | Type | Required | Description | | ----------------- | --------- | -------- | -------------------------------------------------------------------------------------------- | | `customMode` | `boolean` | No | Enables/disables custom mode. In custom mode, input elements are not disabled for the viewer | | `singleTabEditor` | `boolean` | Yes | Enables/disables editor mode on a single tab only | ### UserEditorAccess *** | Property | Type | Required | Description | | ---------------------- | --------- | -------- | ---------------------------------------------------------- | | `isEditor` | `boolean` | No | Indicates whether the user has editor privileges | | `isEditorOnCurrentTab` | `boolean` | No | Indicates whether the user is an editor on the current tab | ### LiveStateDataMap *** | Property | Type | Required | Description | | ------------------------------- | ----------------------------------------------- | -------- | --------------------------------------------------------------------------------------- | | `custom` | `{ [liveStateDataId: string]: LiveStateData; }` | No | Map of all unique LiveStateData set by you on the given document. | | `default` | Object | No | Map of all unique LiveStateData set by the default editor on the given document. | | `default.singleEditor` | `SingleEditorLiveStateData` | No | Part of `default`, representing single editor live state data. | | `default.autoSyncState` | Object | | Part of `default`, representing auto synchronization state. | | `default.autoSyncState.current` | `LiveStateData` | No | Part of `autoSyncState`, current live state data. | | `default.autoSyncState.history` | `[liveStateDataId: string]: LiveStateData` | No | Part of `autoSyncState`, map of historical live state data keyed by live state data ID. | ### LiveStateData *** | Property | Type | Required | Description | | --------------- | ------- | -------- | ----------------------------------------- | | `id` | string | Yes | Unique identifier for the live state data | | `locationName` | string | Yes | Name of the location | | `version` | Version | Yes | Version information | | `[key: string]` | any | Yes | Additional dynamic properties | ### Version *** | Property | Type | Required | Description | | -------- | ------ | -------- | --------------------------------- | | `id` | string | Yes | Unique identifier for the version | | `name` | string | Yes | Name of the version | ### LocationMetadata *** | Property | Type | Required | Description | | ------------ | ------------------ | -------- | ------------------------------------------------------------- | | `locationId` | number | No | Unique location id generated from client location information | | `location` | `Location` \| null | No | Location object provided by a client | ### MediaPreviewConfig *** | Property | Type | Required | Description | | ---------------- | ----------- | -------- | --------------------------------- | | `audio` | Object | No | Configuration for audio preview | | `audio.enabled` | boolean | No | Whether audio preview is enabled | | `audio.deviceId` | string | No | Device ID for audio input | | `video` | Object | No | Configuration for video preview | | `video.enabled` | boolean | No | Whether video preview is enabled | | `video.deviceId` | string | No | Device ID for video input | | `screen` | Object | No | Configuration for screen preview | | `screen.enabled` | boolean | No | Whether screen preview is enabled | | `screen.stream` | MediaStream | No | MediaStream for screen sharing | ### Notification *** | Property | Type | Required | Description | | ------------------------------------ | ----------------------------------- | -------- | ----------------------------------------------------------------------------- | | `id` | `string` | Yes | Notification ID | | `notificationSource` | `string` | Yes | Notification source. e.g., 'comment', 'custom', etc. | | `actionType` | `string` | No | Action that triggered the notification. e.g., 'added' | | `isUnread` | `boolean` | No | Whether the notification is unread for the user | | `actionUser` | `User` | No | The user who triggered the action | | `timestamp` | `number` | No | Timestamp of the notification | | `displayHeadlineMessage` | `string` | No | The headline message of the notification | | `displayBodyMessage` | `string` | No | The body message of the notification | | `displayHeadlineMessageTemplate` | `string` | No | The template of the headline message | | `displayHeadlineMessageTemplateData` | `object` | No | The data used to fill the headline message template | | `forYou` | `boolean` | No | Whether the notification is for the current logged-in user | | `targetAnnotationId` | `string` | No | ID of the annotation that triggered the notification | | `notificationSourceData` | `any` | No | The data of the notification source. e.g., `CommentAnnotation` | | `metadata` | `NotificationMetadata` | No | Metadata for the current notification. e.g., `documentId` | | `notifyUsers` | `{ [emailHash: string]: boolean }` | No | Map of email hashes to boolean values indicating whether to notify the user | | `notifyUsersByUserId` | `{ [userIdHash: string]: boolean }` | No | Map of user ID hashes to boolean values indicating whether to notify the user | ### displayHeadlineMessageTemplateData *** | Property | Type | Required | Description | | --------------- | -------- | -------- | --------------------------------------- | | `actionUser` | `User` | No | The user who performed the action | | `recipientUser` | `User` | No | The user receiving the notification | | `actionMessage` | `string` | No | The message describing the action | | `project` | `string` | No | The project related to the notification | | `[key: string]` | `any` | No | Any additional custom properties | ### NotificationMetadata *** | Property | Type | Required | Description | | ---------------------- | ---------- | -------- | -------------------------------------------------- | | `apiKey` | `string` | No | Your API key | | `clientOrganizationId` | `string` | No | The organization ID that you set | | `organizationId` | `string` | No | The organization ID generated by us | | `clientDocumentId` | `string` | No | The document ID that you set | | `documentId` | `string` | No | The document ID generated by us | | `locationId` | `number` | No | The unique location ID | | `location` | `Location` | No | The location object | | `documentMetadata` | `Object` | No | Contains the complete document metadata object | | `organizationMetadata` | `Object` | No | Contains the complete organization metadata object | ### PageInfo *** | Property | Type | Required | Description | | ------------- | -------- | -------- | -------------------------------------- | | `url` | `string` | No | URL of the webpage | | `path` | `string` | No | Path of the webpage excluding base url | | `baseUrl` | `string` | No | Base URL (domain) of a webpage | | `title` | `string` | No | Title of the webpage | | `commentUrl` | `string` | No | Reference url of a comment annotation | | `recorderUrl` | `string` | No | Reference url of a recorder annotation | | `screenWidth` | `number` | No | User's screen width. Auto generated. | ### PresenceUser *** | Property | Type | Required | Description | | ------------------ | ------------------ | -------- | ---------------------------------------------------------- | | `userId` | `string` | Yes | Unique user identifier | | `name` | `string` | No | User's full name (Default: Random avatar name) | | `email` | `string` | No | User's email address | | `photoUrl` | `string` | No | User's display picture URL (Default: Random avatar image) | | `onlineStatus` | `string` | Yes | Online status (active, inactive, offline) (Auto generated) | | `color` | `string` | No | Assigned color for the user (Auto generated) | | `timestamp` | `any` | Yes | Server Timestamp | | `type` | `string` | No | User type | | `selections` | `any` | No | User selections | | `documentParamsId` | `number \| null` | No | Deprecated unique document params ID | | `documentParams` | `object \| null` | No | Deprecated document params | | `locationId` | `number \| null` | No | Unique location ID | | `location` | `Location \| null` | No | Location of user on sub document | | `isReadOnly` | `boolean` | No | Indicates if user is readonly | | `isAnonymous` | `boolean` | No | If user can only view comments (Anonymous) | | `pageInfo` | `PageInfo` | Yes | Information about the page | ### RecorderConfig *** | Property | Type | Required | Description | | ----------------- | -------------------------------------------------------- | -------- | ------------------------------ | | `type` | `{ audio?: boolean, video?: boolean, screen?: boolean }` | Yes | Types of media to be recorded | | `recorderOptions` | `MediaRecorderOptions` | No | Options for the media recorder | ### RecordedData *** | Property | Type | Required | Description | | -------------------------- | ---------- | -------- | ------------------------------------------------------------------------------------------------- | | `id` | `string` | Yes | Annotation ID of recorder annotation | | `tag` | `string` | Yes | Recorder player tag containing recorder annotation id which can be added anywhere on the DOM | | `type` | `string` | Yes | Type of recorded data. Possible values are 'audio', 'video', and 'screen' | | `thumbnailUrl` | `string` | No | URL of the thumbnail image for the recorded data | | `thumbnailWithPlayIconUrl` | `string` | No | URL of the thumbnail image with a play icon overlay | | `videoUrl` | `string` | No | URL of the recorded video | | `audioUrl` | `string` | No | URL of the recorded audio | | `videoPlayerUrl` | `string` | No | URL of the hosted website to open video in a new tab | | `getThumbnailTag` | `function` | Yes | A method that returns an HTML string for displaying the thumbnail with a link to the video player | ### `getThumbnailTag` Method The `getThumbnailTag` method takes an optional `url` parameter and returns an HTML string. It creates an anchor tag linking to the `videoPlayerUrl` and embeds an image tag using either the provided `url`, `thumbnailWithPlayIconUrl`, or `thumbnailUrl` (in that order of preference). ### RecorderAnnotation *** | Property | Type | Required | Description | | | ----------------- | ------------- | -------- | ----------------------------------------------------------------------- | - | | `annotationId` | String | Yes | Unique identifier for the recorder annotation, automatically generated. | | | `from` | `User` | Yes | The user who created the recorder annotation. | | | `color` | String | No | Color used for the annotation. | | | `lastUpdated` | Any | No | Timestamp of the last update, automatically generated. | | | `locationId` | Number | No | Unique location ID from provided location. | | | `location` | `Location` | No | Location to identify user on sub document. | | | `type` | String | No | Type of annotation. | | | `recordingType` | String | Yes | Type of recording for the annotation. | | | `mode` | String | Yes | Mode of the recorder annotation, 'floating' or 'thread'. | | | `approved` | Boolean | No | Indicates if the annotation is approved. | | | `attachment` | Attachment | No | Attachment for recorded media. Deprecated. | | | `attachments` | Attachment\[] | Yes | List of attachments for the annotation. | | | `annotationIndex` | Number | No | Index of the annotation in a list. | | | `pageInfo` | PageInfo | No | Information about the page where the annotation is made. | | | `recordedTime` | Object | No | Recorded time details. | | | `transcription` | Transcription | No | Transcription of the recorded media. | | ### RecorderDataTranscriptSegment *** | Property | Type | Required | Description | | -------------------- | ------ | -------- | --------------------------------------- | | `startTime` | String | Yes | Start time of the transcription segment | | `endTime` | String | Yes | End time of the transcription segment | | `startTimeInSeconds` | Number | Yes | Start time of the segment in seconds | | `endTimeInSeconds` | Number | Yes | End time of the segment in seconds | | `text` | String | Yes | Transcribed text content of the segment | ### RecorderDataTranscription *** | Property | Type | Required | Description | | -------------------- | --------------------------------- | -------- | ---------------------------------------- | | `transcriptSegments` | `RecorderDataTranscriptSegment[]` | No | Array of transcription segments | | `vttFileUrl` | String | No | URL to the VTT format transcription file | | `contentSummary` | String | No | Summary of the transcribed content | ### RecorderDataAsset *** | Property | Type | Required | Description | | ----------------- | ---------------------------------- | -------- | ---------------------------------- | | `url` | String | Yes | URL to the recorded media | | `mimeType` | String | No | MIME type of the recorded media | | `fileName` | String | No | Name of the recorded file | | `fileSizeInBytes` | Number | No | Size of the recorded file in bytes | | `fileFormat` | 'mp3' \| 'mp4' \| 'webm' \| String | No | The format/extension of the file | | `thumbnailUrl` | String | No | URL to the thumbnail image | ### RecorderData *** | Property | Type | Required | Description | | --------------- | --------------------------- | -------- | ------------------------------------------------- | | `assets` | `RecorderDataAsset[]` | Yes | Array of recording assets with metadata | | `transcription` | `RecorderDataTranscription` | Yes | Transcription data including segments and summary | ### RewriterAnnotation *** | Property | Type | Required | Description | | ------------------------ | ----------------------- | -------- | ------------------------------------------------------------------------------------- | | `annotationId` | String | Yes | Unique identifier for the rewriter annotation, automatically generated. | | `from` | `User` | Yes | The user who created this rewriter annotation. | | `color` | String | No | Color used for the rewriter annotation. | | `lastUpdated` | Any | No | Timestamp when the rewriter annotation was last updated, automatically generated. | | `documentParamsId` | Number \| null | No | Unique document params ID, deprecated, use `locationId` instead. | | `documentParams` | `Location` \| null | No | Document params to identify user on sub document, deprecated, use `location` instead. | | `locationId` | Number \| null | No | Unique location ID generated from provided location. | | `location` | Location \| null | No | Set location to identify user on sub document. | | `type` | String | No | Type of annotation. | | `rewriterType` | String | Yes | Type of rewriter for the annotation, either 'generic' or 'copywriter'. | | `targetTextRange` | TargetTextRange \| null | No | Selected text range of rewriter annotation. | | `annotationIndex` | Number | No | Index of the current annotation in the list of annotations. | | `pageInfo` | `PageInfo` | No | Information about the page where the annotation is made. | | `selectedRewriterOption` | String | No | Selected rewriter option used in the annotation. | ### SyncVideoPlayer *** | Property | Type | Required | Description | | ------------------ | -------------------- | -------- | ----------------------------------------------------- | | `playerId` | String | No | The identifier for the video player instance. | | `src` | String | No | The source URL of the video. | | `sources` | String\[] | No | An array of source URLs for the video. | | `lastUpdated` | Number | No | The timestamp of when the player was last updated. | | `lastUpdatedBy` | `User` | No | The user who last updated the player. | | `lastUpdatedEvent` | String | No | The name of the event that triggered the last update. | | `playerState` | SyncVideoPlayerState | Yes | The state object of the video player. | ### SyncVideoPlayerState *** | Property | Type | Required | Description | | ------------- | ------- | -------- | -------------------------------------------- | | `playing` | Boolean | No | Indicates if the video is currently playing. | | `currentTime` | Number | No | The current playback time of the video. | | `muted` | Boolean | No | Indicates if the video is muted. | | `volume` | Number | No | The volume level of the video. | | `speed` | Number | No | The playback rate of the video. | ### Toast *** | Property | Type | Required | Default Value | Description | | ---------- | -------------------- | -------- | ------------- | ------------------------------------------------------------------------ | | `id` | Number | No | None | A unique identifier for the toast notification. | | `message` | String | Yes | None | The message content displayed in the toast notification. | | `type` | 'success' \| 'error' | Yes | None | The type of toast notification, indicating success or error. | | `duration` | Number | No | 3000 | The length of time the toast notification is displayed, in milliseconds. | ### Transcription *** | Property | Type | Required | Description | | ------------------ | ------ | -------- | ----------------------------------------------------- | | `from` | User | Yes | The user who created the transcription. | | `lastUpdated` | Number | No | Timestamp of when the transcription was last updated. | | `transcriptedText` | String | No | The text that has been transcribed. | ### User *** | Property | Type | Required | Description | | ---------------------- | ------- | -------- | --------------------------------------------------------------------------------------------------------------------------------- | | `userId` | string | Yes | Unique user identifier used to identify your user. | | `name` | string | No | The full name of your user. Defaults to a random avatar name if not provided. | | `photoUrl` | string | No | The display picture URL of your user. Defaults to a random avatar image if not provided. | | `email` | string | No | Required for sending email or Slack notifications to users about comments and mentions. | | `plan` | string | No | The product plan the user is on. | | `organizationId` | string | Yes | Autogenerated organizationId based on the organizationId you provide. | | `clientorganizationId` | string | Yes | The original organizationId provided by you. | | `color` | string | No | A color assigned to the user for the current session, used for avatar border, live cursor, selection etc. | | `textColor` | string | No | Used in the text color of the user's intial when photoUrl is not present. | | `type` | string | No | The type of user. | | `isReadOnly` | boolean | No | Indicates if the user has read-only access. | | `isAnonymous` | boolean | No | Indicates if the user is anonymous and can only view comments. | | `isGuest` | boolean | No | Indicates if the user is a guest. | | `isAdmin` | boolean | No | Use this to set the user as an admin. You also need to ensure that the jwt token you generate also has this property set to true. | | `groupId` | string | No | \[DEPRECATED] A domain name or identifier used to cluster a group of users who work together. | | `clientGroupId` | string | No | \[DEPRECATED] The original groupId provided by the user. | | `initial` | string | No | First letter of the user's first name. | ### UserOptions *** | Property | Type | Required | Description | | ----------------- | ------- | -------- | ---------------------------------------------------------------------------------------------- | | `replaceContacts` | boolean | No | If set to true, it will replace the user's personal and group contacts with the ones provided. | | `authToken` | string | No | The authentication token of the user. | ### UserContactSelectedPayload *** | Property | Type | Required | Description | | ----------------------- | ----------- | -------- | ------------------------------------- | | `contact` | UserContact | Yes | Selected user contact details. | | `isOrganizationContact` | boolean | Yes | Is user part of organization contact. | | `isDocumentContact` | boolean | Yes | Is user part of document contact. | | `documentAccessType` | string | Yes | Document access type. | ### UserContactUs *** | Property | Type | Required | Description | | ------------- | ------------------------ | -------- | ------------------------------------------------ | | `id` | string | No | Unique identifier of the feedback. | | `apiKey` | string \| null | No | API key of the client. | | `emailId` | string | No | Email address of the feedback provider. | | `message` | string | No | Content of the user's feedback message. | | `from` | User \| null | No | User who submitted the feedback. | | `lastUpdated` | any | No | Timestamp of when the feedback was last updated. | | `metadata` | DocumentMetadata \| null | No | Metadata associated with the document. | | `pageInfo` | PageInfo | No | Information about the user's current page. | ### UserFeedback *** | Property | Type | Required | Description | | ------------- | ------------------------ | -------- | ------------------------------------------------ | | `id` | string | No | Unique identifier of the feedback. | | `apiKey` | string \| null | No | API key of the client. | | `emailId` | string | No | Email address of the feedback provider. | | `message` | string | No | Content of the user's feedback message. | | `from` | User \| null | No | User who submitted the feedback. | | `lastUpdated` | any | No | Timestamp of when the feedback was last updated. | | `metadata` | DocumentMetadata \| null | No | Metadata associated with the document. | | `pageInfo` | PageInfo | No | Information about the user's current page. | ### ServerConnectionState *** | Property | Type | Required | Description | | -------------- | ------ | -------- | ----------------------------------------------------------------- | | `ONLINE` | string | Yes | Server connection is online and active. Value: 'online' | | `OFFLINE` | string | Yes | Server connection is offline. Value: 'offline' | | `PENDING_INIT` | string | Yes | Server connection initialization is pending. Value: 'pendingInit' | | `PENDING_DATA` | string | Yes | Server is waiting for data. Value: 'pendingData' | ### VeltEventMetadata *** | Property | Type | Required | Description | | ---------------------- | -------------------------------- | -------- | --------------------- | | `organizationMetadata` | `OrganizationMetadata` \| `null` | No | Organization metadata | | `documentMetadata` | `DocumentMetadata` \| `null` | No | Document metadata | | `location` | `Location` \| `null` | No | Location information | ### VeltButtonContext *** | Property | Type | Required | Description | | ----------------- | ------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------ | | `type` | `'button' \| 'button-toggle' \| 'multi-select' \| 'single-select'` | No | Type of button (default: 'button') | | `groupId` | `string` | No | ID of the button group | | `selections` | `VeltButtonSelectionMap` | No | Map of button selections grouped by button groupIds. For buttons without a group, the groupdId will be 'ungrouped' | | `clickedButtonId` | `string` | No | ID of the clicked button | ### VeltButtonSelectionMap *** | Property | Type | Required | Description | | ------------------- | --------------------------------- | -------- | ------------------------------------ | | `[groupId: string]` | `{ [buttonId: string]: boolean }` | No | Map of button selections for a group | ### UnreadCommentsCount *** | Property | Type | Required | Description | | -------- | -------- | -------- | ----------------------------------------- | | `count` | `number` | Yes | The number of unread comments or threads. | ### Document *** | Property | Type | Required | Description | | ---------- | ------------------ | -------- | ------------------------------------- | | `id` | `string` | Yes | Unique identifier for the document | | `metadata` | `DocumentMetadata` | Yes | Metadata associated with the document | ### SetDocumentsRequestOptions *** | Property | Type | Required | Description | | ---------------- | --------- | -------- | ---------------------------------------------------------------------------- | | `organizationId` | `string` | No | Organization ID for the documents | | `folderId` | `string` | No | Subscribe to all or provided documents in the given folder | | `locationId` | `string` | No | Filter and subscribe to document data for a specific location | | `allDocuments` | `boolean` | No | Subscribe to all documents in the folder. Use this when folderId is provided | ### CommentRequestQuery *** | Property | Type | Required | Description | | ------------- | ---------- | -------- | ------------------------------ | | `documentIds` | `string[]` | Yes | List of document IDs to query | | `locationIds` | `string[]` | Yes | List of location IDs to filter | | `statusIds` | `string[]` | Yes | List of status IDs to filter | ### GetCommentAnnotationsResponse *** | Property | Type | Required | Description | | -------- | ------------------------------------- | -------- | ------------------------------------------------ | | `data` | `Record` | Yes | Map of document IDs to their comment annotations | ### CommentAnnotationsCount *** | Property | Type | Required | Description | | -------- | -------- | -------- | ------------------------- | | `unread` | `number` | Yes | Number of unread comments | | `total` | `number` | Yes | Total number of comments | ### GetCommentAnnotationsCountResponse *** | Property | Type | Required | Description | | -------- | ----------------------------------------- | -------- | ------------------------------------------- | | `data` | `Record` | Yes | Map of document IDs to their comment counts | ### FolderMetadata *** | Property | Type | Required | Description | | ---------------- | -------- | -------- | ------------------------------------------ | | `folderId` | `string` | No | Unique identifier for the folder | | `parentFolderId` | `string` | No | ID of the parent folder | | `folderName` | `string` | No | Display name of the folder | | `createdAt` | `number` | No | Timestamp when folder was created | | `lastUpdated` | `number` | No | Timestamp when folder was last updated | | `apiKey` | `string` | No | API key associated with the folder | | `organizationId` | `string` | No | Organization ID that the folder belongs to | # Customize Behavior Source: https://docs.velt.dev/async-collaboration/arrows/customize-behavior ## 1. Getting the Arrow Element To get access to the Arrow Element APIs, you will first need to get the Arrow Element object from the client. ```jsx const arrowElement = client.getArrowElement(); ``` ```jsx const arrowElement = Velt.getArrowElement(); ``` ## 2. Set which elements Arrows can be added to You can use the `allowedElementIds()` property to set an allowed list of elements the `Arrows` feature can be added to. ```jsx ``` ```jsx ``` API Methods: You can use the `arrowElement.allowedElementIds()` method to set an allowed list of elements the `Arrows` feature can be added to. ```jsx arrowElement.allowedElementIds(['ALLOWED_ID_1', 'ALLOWED_ID_2']); ``` ```jsx arrowElement.allowedElementIds(['ALLOWED_ID_1', 'ALLOWED_ID_2']); ``` ## 3. Dark Mode Whether dark mode is enabled. `Default: false` ```js ``` ```js ``` # Arrows Source: https://docs.velt.dev/async-collaboration/arrows/overview ``` #### data-velt-pdf-viewer ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/pdf-comments.png) To support comments on top of a pdf viewer, add the `data-velt-pdf-viewer="true"` attribute in the container element of the pdf viewer. ```html
``` # Keyboard Controls #### enableHotkey Whether Hotkeys are enabled or not. For now, the only hotkey supported is pressing `c` to enable `comment mode`. `Default: false` **Using Props:** ```jsx ``` **Using API Method:** ```jsx const commentElement = client.getCommentElement(); commentElement.enableHotkey(); commentElement.disableHotkey(); ``` **Using Props:** ```html ``` **Using API Method:** ```jsx const commentElement = Velt.getCommentElement(); commentElement.enableHotkey(); commentElement.disableHotkey(); ``` #### enableEnterKeyToSubmit * By default, pressing `enter` will add a new line and pressing `shift` + `enter` will submit a comment. * You can change this default behavior so that pressing `enter` will submit a comment by setting the `enterKeyToSubmit` property to `true`. **Using Props:** ```jsx ``` **Using API Method:** ```jsx const commentElement = client.getCommentElement(); commentElement.enableEnterKeyToSubmit(); commentElement.disableEnterKeyToSubmit(); ``` **Using Props:** ```jsx ``` **Using API Method:** ```jsx const commentElement = Velt.getCommentElement(); commentElement.enableEnterKeyToSubmit(); commentElement.disableEnterKeyToSubmit(); ``` #### enableDeleteOnBackspace * Use this to enable or disable deleting comments when backpsace key is pressed. Default: `enabled` **Using Props:** ```jsx ``` **Using API:** ```jsx const commentElement = client.getCommentElement(); commentElement.enableDeleteOnBackspace(); commentElement.disableDeleteOnBackspace(); ``` **Using Props:** ```jsx ``` **Using API:** ```jsx const commentElement = client.getCommentElement(); commentElement.enableDeleteOnBackspace(); commentElement.disableDeleteOnBackspace(); ``` # Moderation #### enableModeratorMode ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/moderator-mode.png) Whether comments require moderator approval. `Default: false` By default, when a user adds a comment it is visible to all authenticated users on the same `document`. Moderator mode makes visibility of all comments private to only `admin` users and the comment author. Admin users will see an approve button on the comment dialog. Once approved the comment will be visible to all users who can access the `document`. You can set some users as `admin` by setting the `isAdmin` property in the User object, during the `identify()` call. ```js ``` ```js ``` API Method: ```jsx const commentElement = client.getCommentElement(); commentElement.enableModeratorMode(); commentElement.disableModeratorMode(); ``` ```jsx const commentElement = Velt.getCommentElement(); commentElement.enableModeratorMode(); commentElement.disableModeratorMode(); ``` #### enableResolveStatusAccessAdminOnly * Restrict the resolve action to admin users and the comment author only. **Using props:** ```jsx ``` **Using API:** ```javascript const commentElement = client.getCommentElement(); // To enable resolve status access admin only commentElement.enableResolveStatusAccessAdminOnly(); // To disable resolve status access admin only commentElement.disableResolveStatusAccessAdminOnly(); ``` **Using props:** ```html ``` **Using API:** ```javascript const commentElement = Velt.getCommentElement(); // To enable resolve status access admin only commentElement.enableResolveStatusAccessAdminOnly(); // To disable resolve status access admin only commentElement.disableResolveStatusAccessAdminOnly(); ``` #### approveCommentAnnotation * Approves a comment annotation in moderator mode * Params: [ApproveCommentAnnotationRequest](/api-reference/sdk/models/api-request-objects#approvecommentannotationrequest) * Returns: [ApproveCommentAnnotationEvent](/api-reference/sdk/models/api-event-objects#approvecommentannotationevent) ```jsx const approveCommentAnnotationRequest = { annotationId: 'ANNOTATION_ID' }; // Hook const { approveCommentAnnotation } = useApproveCommentAnnotation(); const approveCommentAnnotationEvent = await approveCommentAnnotation(approveCommentAnnotationRequest); // API Method const commentElement = client.getCommentElement(); const approveCommentAnnotationEvent = await commentElement.approveCommentAnnotation(approveCommentAnnotationRequest); ``` ```js const approveCommentAnnotationRequest = { annotationId: 'ANNOTATION_ID' }; const commentElement = Velt.getCommentElement(); const approveCommentAnnotationEvent = await commentElement.approveCommentAnnotation(approveCommentAnnotationRequest); ``` #### acceptCommentAnnotation * Accepts a comment annotation in suggestion mode * Params: [AcceptCommentAnnotationRequest](/api-reference/sdk/models/api-request-objects#acceptcommentannotationrequest) * Returns: [AcceptCommentAnnotationEvent](/api-reference/sdk/models/api-event-objects#acceptcommentannotationevent) ```jsx const acceptCommentAnnotationRequest = { annotationId: 'ANNOTATION_ID' }; // Hook const { acceptCommentAnnotation } = useAcceptCommentAnnotation(); const acceptCommentAnnotationEventData = await acceptCommentAnnotation(acceptCommentAnnotationRequest); // API Method const commentElement = client.getCommentElement(); const acceptCommentAnnotationEventData = await commentElement.acceptCommentAnnotation(acceptCommentAnnotationRequest); ``` ```js const acceptCommentAnnotationRequest = { annotationId: 'ANNOTATION_ID' }; const commentElement = Velt.getCommentElement(); const acceptCommentAnnotationEventData = await commentElement.acceptCommentAnnotation(acceptCommentAnnotationRequest); ``` #### rejectCommentAnnotation * Rejects a comment annotation in suggestion mode * Params: [RejectCommentAnnotationRequest](/api-reference/sdk/models/api-request-objects#rejectcommentannotationrequest) * Returns: [RejectCommentAnnotationEvent](/api-reference/sdk/models/api-event-objects#rejectcommentannotationevent) ```jsx const rejectCommentAnnotationRequest = { annotationId: 'ANNOTATION_ID' }; // Hook const { rejectCommentAnnotation } = useRejectCommentAnnotation(); const rejectCommentAnnotationEventData = await rejectCommentAnnotation(rejectCommentAnnotationRequest); // API Method const commentElement = client.getCommentElement(); const rejectCommentAnnotationEventData = await commentElement.rejectCommentAnnotation(rejectCommentAnnotationRequest); ``` ```js const rejectCommentAnnotationRequest = { annotationId: 'ANNOTATION_ID' }; const commentElement = Velt.getCommentElement(); const rejectCommentAnnotationEventData = await commentElement.rejectCommentAnnotation(rejectCommentAnnotationRequest); ``` #### enableSuggestionMode ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/accept-reject.png) Whether to enable suggestion mode to accept or reject comments. `Default: false` To accept comments, set the `suggestionMode` attribute to `true`. ```js ``` To accept comments, set the `suggestion-mode` attribute to `true`. ```js ``` API Method: ```jsx const commentElement = client.getCommentElement(); commentElement.enableSuggestionMode(); commentElement.disableSuggestionMode(); ``` ```jsx const commentElement = Velt.getCommentElement(); commentElement.enableSuggestionMode(); commentElement.disableSuggestionMode(); ``` #### updateAccess * Updates access permissions for a comment annotation * Params: [UpdateAccessRequest](/api-reference/sdk/models/api-request-objects#updateaccessrequest) * Returns: [UpdateAccessEvent](/api-reference/sdk/models/api-event-objects#updateaccessevent) ```jsx const updateAccessRequest = { annotationId: 'ANNOTATION_ID', accessMode: 'private'; }; // Hook const { updateAccess } = useUpdateAccess(); const updateAccessEvent = await updateAccess(updateAccessRequest); // API Method const commentElement = client.getCommentElement(); const updateAccessEvent = await commentElement.updateAccess(updateAccessRequest); ``` ```js const updateAccessRequest = { annotationId: 'ANNOTATION_ID', accessMode: 'private'; } }; const commentElement = Velt.getCommentElement(); const updateAccessEvent = await commentElement.updateAccess(updateAccessRequest); ``` #### enablePrivateComments ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/private-comment.png) * Private comment mode enables admin users to add comments that are only visible to other admin users. * Use this to enable or disable private comment mode. Default: `false` To enable private comment mode, set the `privateCommentMode` attribute to `true`: ```html ``` To enable private comment mode, set the `private-comment-mode` attribute to `true`: ```html ``` API Methods: API to enable/disable private comment mode: ```jsx const commentElement = client.getCommentElement(); // To enable private comment mode commentElement.enablePrivateCommentMode(); // To disable private comment mode commentElement.disablePrivateCommentMode(); ``` ```jsx const commentElement = Velt.getCommentElement(); // To enable private comment mode commentElement.enablePrivateCommentMode(); // To disable private comment mode commentElement.disablePrivateCommentMode(); ``` #### enableReadOnly Control whether comments are in read-only mode. When enabled, any features requiring user interaction (e.g., Composer, Reactions, Status) will be removed. Default: `false` Using Props: ```jsx ``` Using API: ```js const commentElement = client.getCommentElement(); commentElement.enableReadOnly(); commentElement.disableReadOnly(); ``` Using Props: ```html ``` Using API: ```js const commentElement = Velt.getCommentElement(); commentElement.enableReadOnly(); commentElement.disableReadOnly(); ``` # Comment Read Status #### enableSeenByUsers Control whether the "Seen By" feature is enabled for comments. When enabled, it shows which users have seen each comment. Default: `true` **Using Props:** ```jsx ``` **Using API:** ```jsx const commentElement = client.getCommentElement(); commentElement.enableSeenByUsers(); commentElement.disableSeenByUsers(); ``` **Using Props:** ```html ``` **Using API:** ```javascript const commentElement = Velt.getCommentElement(); commentElement.enableSeenByUsers(); commentElement.disableSeenByUsers(); ``` #### setUnreadIndicatorMode Whether `verbose` mode is enabled for unread `Comments`. `Default: 'minimal'` Unread `Comments` can be in `minimal` mode or `verbose` mode. In `minimal` mode, a small red dot indicator appears for unread `Comments`. In `verbose` mode, a larger badge with the text "UNREAD" will appear for unread `Comments`. ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/unread-compare.png) ```jsx ``` ```jsx ``` API Method: ```jsx const commentElement = client.getCommentElement(); commentElement.setUnreadIndicatorMode("verbose"); // use badge with text UNREAD commentElement.setUnreadIndicatorMode("minimal"); // use small red dot indicator ``` ```jsx const commentElement = Velt.getCommentElement(); commentElement.setUnreadIndicatorMode("verbose"); // use badge with text UNREAD commentElement.setUnreadIndicatorMode("minimal"); // use small red dot indicator ``` # Toggle Comment Types #### enableAreaComment Area comments allows users to draw a rectangle and attach a comment to it. Use this to enable or disable area comments. Default: `true` ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/enable-disable-area-comments.png) **Using Props:** ```jsx ``` **Using API Method:** ```jsx const commentElement = client.getCommentElement(); commentElement.enableAreaComment(); commentElement.disableAreaComment(); ``` **Using Props:** ```jsx ``` Using API Method: ```jsx const commentElement = client.getCommentElement(); commentElement.enableAreaComment(); commentElement.disableAreaComment(); ``` #### enableInboxMode For a complete setup guide for Inbox mode, [read here](/async-collaboration/comments/setup/inbox). Whether Inbox Mode is enabled. Default: `false` **Using Props:** ```jsx ``` **Using API:** ```jsx const commentElement = client.getCommentElement(); commentElement.enableInboxMode(); commentElement.disableInboxMode(); ``` **Using Props:** ```html ``` **Using API:** ```jsx const commentElement = Velt.getCommentElement(); commentElement.enableInboxMode(); commentElement.disableInboxMode(); ``` #### enablePopoverMode For a complete setup guide for Popover mode, [read here](/async-collaboration/comments/setup/popover). Whether Popover Mode is enabled. Default: `false` ```jsx ``` **Using API:** ```jsx const commentElement = client.getCommentElement(); commentElement.enablePopoverMode(); commentElement.disablePopoverMode(); ``` ```jsx ``` **Using API:** ```jsx const commentElement = Velt.getCommentElement(); commentElement.enablePopoverMode(); commentElement.disablePopoverMode(); ``` #### enableStreamMode For a complete setup guide for Stream mode, [read here](/async-collaboration/comments/setup/stream). Whether Stream Mode is enabled. Default: `false` ```jsx ``` **Using API:** ```jsx const commentElement = client.getCommentElement(); commentElement.enableStreamMode(); commentElement.disableStreamMode(); ``` ```jsx ``` **Using API:** ```jsx const commentElement = Velt.getCommentElement(); commentElement.enableStreamMode(); commentElement.disableStreamMode(); ``` #### enableTextMode For a complete setup guide for Text mode, [read here](/async-collaboration/comments/setup/text). Whether Text Mode is enabled. Default: `true` ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/text-comment.png) **Using Props:** ```jsx ``` **Using API:** ```jsx const commentElement = client.getCommentElement(); commentElement.enableTextComments(); commentElement.disableTextComments(); ``` **Using Props:** ```html ``` **Using API:** ```jsx const commentElement = Velt.getCommentElement(); commentElement.enableTextComments(); commentElement.disableTextComments(); ``` #### enableInlineCommentMode ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/text-comment-opened.png) Whether In-line comment mode is enabled. When In-line comment mode is enabled, comments will appear under the text they are associated with in the DOM, instead of as a pop up window. Default: `false` ```jsx ``` ```jsx const commentElement = client.getCommentElement(); commentElement.enableInlineCommentMode(); commentElement.disableInlineCommentMode(); ``` ```jsx ``` ```jsx const commentElement = Velt.getCommentElement(); commentElement.enableInlineCommentMode(); commentElement.disableInlineCommentMode(); ``` #### enableMultithread * By default comments are single threaded. * You can make it multithreaded by setting `multiThread` prop to `true`. * If you had previously used a wireframe for the comment dialog, you will need to add the [multithread wireframe](/ui-customization/features/async/comments/multithread-comment-dialog/overview). * Default: `false` ```jsx ``` ```html ``` # Comment Tool #### enableCommentMode ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/comment-mode-on-off.png) Turns Comment mode on or off. When you click on the comment tool, it turns on comment mode and user can attach comment to any element on the DOM. Using this method you can programatically turn on the commenting mode. ```jsx const commentElement = client.getCommentElement(); commentElement.enableCommentMode(); commentElement.disableCommentMode(); ``` ```jsx const commentElement = Velt.getCommentElement(); commentElement.enableCommentMode(); commentElement.disableCommentMode(); ``` #### onCommentModeChange ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/onCommentModeChange.png) The comment mode is toggled on and off when you click on the Comment Tool. The `useCommentModeState()` hook can be used to get the Comment mode without having to subscribe to changes. When the Comment mode changes, the hook return value will update. The subscription is automatically unsubscribed when the component dismounts. ```jsx import { useCommentModeState } from '@veltdev/react'; export default function YourDocument() { let commentModeState = useCommentModeState() return (
Comment Mode is turned on: {commentModeState}
) } ```
To subscribe to changes in the comment mode, use the `onCommentModeChange()` method , as a property on `VeltCommentTool`: ```jsx onCommentModeChange(mode)} /> ``` API method: ```jsx let subscription = commentElement.onCommentModeChange().subscribe((mode) => { //mode contains the state after change }); ``` To unsubscribe from the subscription: ```jsx subscription?.unsubscribe() ``` API method: ```jsx const commentElement = Velt.getCommentElement(); let subscription = commentElement.onCommentModeChange().subscribe((mode) => { //mode contains the state after change }); ``` To unsubscribe from the subscription: ```jsx subscription?.unsubscribe() ```
#### enableCommentTool ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/comment-disabled.png) Whether the Comment Tool button is Enabled. `Default: true` When the Comment Tool is disabled, it can not be used to leave comments. Other ways to leave comments, such as highlighting text, will also be disabled. **Using Props:** ```jsx ``` Using API methods: ```jsx const commentElement = client.getCommentElement(); commentElement.enableCommentTool(); commentElement.disableCommentTool(); ``` **Using Props:** ```html ``` **Using API methods:** ```jsx const commentElement = Velt.getCommentElement(); commentElement.enableCommentTool(); commentElement.disableCommentTool(); ``` #### enableChangeDetectionInCommentMode * By default, DOM Change Detection is disabled in Comment Mode for better performance. * You can enable it to automatically reposition comment pins when the DOM changes while in Comment Mode. `Default: false` **Using Props:** ```jsx ``` **Using API Method:** ```jsx const commentElement = client.getCommentElement(); commentElement.enableChangeDetectionInCommentMode(); commentElement.disableChangeDetectionInCommentMode(); ``` **Using Props:** ```html ``` **Using API Method:** ```jsx const commentElement = Velt.getCommentElement(); commentElement.enableChangeDetectionInCommentMode(); commentElement.disableChangeDetectionInCommentMode(); ``` #### enablePersistentCommentMode * When Persistent comment mode is enabled, you can continue leave additional comments after finishing a comment. * When it is disabled, you will need to reclick the Comment Tool every time when you want to make a comment. Default: `false` ```jsx ``` ```jsx const commentElement = client.getCommentElement(); commentElement.enablePersistentCommentMode(); commentElement.disablePersistentCommentMode(); ``` ```jsx ``` ```jsx const commentElement = Velt.getCommentElement(); commentElement.enablePersistentCommentMode(); commentElement.disablePersistentCommentMode(); ``` #### setPinCursorImage You can set custom mouse cursor when the comment mode is on. The custom cursor image must be **32 x 32 pixels**. ```jsx ``` ```jsx ``` API Methods: ```jsx const commentElement = client.getCommentElement(); commentElement.setPinCursorImage(BASE64_IMAGE_STRING); ``` ```jsx const commentElement = Velt.getCommentElement(); commentElement.setPinCursorImage(BASE64_IMAGE_STRING); ``` # Minimap #### enableMinimap ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/minimap.png) * The minimap shows a bar on the edge of the screen with indicators that show where comments exist. * Use this to enable/disable the minimap. By default it's disabled. * It can be positioned `left` or `right`. By default, it's positioned on the right side of the screen. **Option a. Enable using config:** ```jsx ``` **API Method:** ```jsx const commentElement = client.getCommentElement(); commentElement.enableMinimap(); commentElement.disableMinimap(); ``` ```jsx ``` **API Method:** ```jsx const commentElement = Velt.getCommentElement(); commentElement.enableMinimap(); commentElement.disableMinimap(); ``` **Option b. Enable using Minimap Component:** This offers greater flexibility to customize and position the minimap. ```jsx
{/* scrollable content */}
```
```jsx
```
# Inline Comments #### sortBy and sortOrder * Change the default sorting order of Comments in the Inline Comments Section. * Params: * `sortBy`: The field to sort by. Currently supports `createdAt` and `lastUpdated`. Default: `lastUpdated` for multithread and `createdAt` for single thread. * `sortOrder`: The order to sort by. It can be `asc` or `desc`. Default: `desc` for multithread and `asc` for single thread. ```jsx ``` ```html ``` #### multiThread * By default [inline comment section](/async-collaboration/comments/setup/inline-comments) is multithreaded. * You can make it single threaded by setting `multiThread` prop to `false`. * Default: `true` ```jsx ``` ```html ``` #### composerPosition * Change the position of the comment composer in the inline comments section to `top` or `bottom`. * Default: `bottom` ```jsx ``` ```html ``` # Popover Comments #### enableDialogOnTargetElementClick ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/gifs/hover-cell-comment.gif) Whether the comment dialog opens when target element is clicked. This is relevant only for Popover mode. `Default: true` ```js ``` ```js ``` API Method: ```jsx const commentElement = client.getCommentElement(); commentElement.enableDialogOnTargetElementClick(); commentElement.disableDialogOnTargetElementClick(); ``` ```jsx const commentElement = Velt.getCommentElement(); commentElement.enableDialogOnTargetElementClick(); commentElement.disableDialogOnTargetElementClick(); ``` #### enablePopoverTriangleComponent Whether the popover triangle appears when Popover Mode is enabled. `Default: true` ```jsx ``` ```jsx ``` API Method: ```jsx const commentElement = client.getCommentElement(); commentElement.enablePopoverTriangleComponent(); commentElement.disablePopoverTriangleComponent(); ``` ```jsx const commentElement = Velt.getCommentElement(); commentElement.enablePopoverTriangleComponent(); commentElement.disablePopoverTriangleComponent(); ``` # Comment Bubble #### commentCountType Whether to show unread or total comment replies count on Comment Bubble Component. * `total`: Shows the total number of replies. (default) * `unread`: Shows the number of unread replies. ```jsx ``` ```jsx ``` # Video Timeline Comments #### setTotalMediaLength Set the total length of media (in frames or seconds) for the timeline. **Using Props:** ```jsx ``` **Using API Method:** ```jsx const commentElement = client.getCommentElement(); commentElement.setTotalMediaLength(120); ``` **Using Props:** ```html ``` **Using API Method:** ```jsx const commentElement = Velt.getCommentElement(); commentElement.setTotalMediaLength(120); ``` #### offset * Allows comment bubbles to be positioned relative to both parent and child video clips by specifying an offset value. * Default: `0` ```jsx ``` ```html ``` # Comment Pin #### enableBubbleOnPin Show a Comment Bubble when user hovers or clicks on the Comment Pin vs showing the Comment Dialog. The comment dialog will open only on clicking the comment bubble. `Default: 'false'` **Using Props:** ```jsx ``` **Using API Method:** ```jsx const commentElement = useCommentUtils(); commentElement.enableBubbleOnPin(); commentElement.disableBubbleOnPin(); ``` **Using Props:** ```jsx ``` **Using API Method:** ```jsx const commentElement = client.getCommentElement(); commentElement.enableBubbleOnPin(); commentElement.disableBubbleOnPin(); ``` **Using Props:** ```jsx ``` **Using API Method:** ```jsx const commentElement = Velt.getCommentElement(); commentElement.enableBubbleOnPin(); commentElement.disableBubbleOnPin(); ``` #### enableBubbleOnPinHover Show a Comment Bubble when user hovers on the Comment Pin vs clicks on it. `Default: 'true'` **Using Props:** ```jsx ``` **Using API Method:** ```jsx const commentElement = useCommentUtils(); // To enable/disable showing bubble on pin commentElement.enableBubbleOnPin(); commentElement.disableBubbleOnPin(); // To enable/disable showing bubble on hover commentElement.enableBubbleOnPinHover(); commentElement.disableBubbleOnPinHover(); ``` **Using Props:** ```jsx ``` **Using API Method:** ```jsx const commentElement = client.getCommentElement(); // To enable/disable showing bubble on pin commentElement.enableBubbleOnPin(); commentElement.disableBubbleOnPin(); // To enable/disable showing bubble on hover commentElement.enableBubbleOnPinHover(); commentElement.disableBubbleOnPinHover(); ``` **Using Props:** ```jsx ``` **Using API Method:** ```jsx const commentElement = Velt.getCommentElement(); // To enable/disable showing bubble on pin commentElement.enableBubbleOnPin(); commentElement.disableBubbleOnPin(); // To enable/disable showing bubble on hover commentElement.enableBubbleOnPinHover(); commentElement.disableBubbleOnPinHover(); ``` # Comments Notifications Source: https://docs.velt.dev/async-collaboration/comments/notifications There are several options to send notifications to your users. Add notifications component within your app. Send email notifications to your users. Send notifications to other channels like Slack. # Comments Source: https://docs.velt.dev/async-collaboration/comments/overview Your users can add comments in context to ask questions, leave feedback, report bugs etc. We handle all complexity to ensure the comments are robust against content changes. We support many types of comment UX patterns as illustrated below. With `Freestyle` comments, you can pin `Comments` on any elements on the page or draw area comments. [Open in larger window](https://landing-page-demo-velt.vercel.app/?feature=comments\&type=freestyle) */} */} Check out this guide on [how to set up Velt with your existing app](/get-started/setup/install) ```jsx App.js import { VeltProvider, VeltComments, VeltPresence } from '@veltdev/react'; import YourAuthComponent from './YourAuthComponent'; import YourDocument from './YourDocument'; export default function App() { return ( ); } ``` ```jsx YourAuthComponent.js import { useIdentify} from "@veltdev/react"; import { useState } from "react"; export default function YourAuthComponent() { const userService = () => { return { uid: "user1", displayName: "User 1", email: "user1@velt.dev", photoURL: "https://i.pravatar.cc/301" }; }; // Fetch user data from user service let yourAuthenticatedUser = userService(); const { uid, displayName, email, photoURL } = yourAuthenticatedUser; // Create the Velt user object let veltUser = { userId: uid, name: displayName, email: email, photoUrl: photoURL, }; //identify Velt user useIdentify(veltUser) let [user,setUser] = useState(veltUser) return
User: {user?.userId}
; } ``` ```jsx YourDocument.js import { useSetDocumentId, VeltCommentTool, VeltPresence } from '@veltdev/react'; import { useEffect, useState } from 'react'; export default function YourDocument() { useSetDocumentId('my-document-id') return (
); } ```
# Advanced Setup Options Source: https://docs.velt.dev/get-started/setup/advanced ## Advanced Set Up options This section includes a list of optional advanced set up options. ## Location Users logged into the same **Document** ID can see each other's `Presence`, `Cursors`, `Comments` etc. However, if you want to add another layer of categorization to organize users together, you can use **Location**. If a **Document** is like a house, a **Location** is like a room within the house. To learn more about `Locations`, check out its dedicated section [here](/key-concepts/overview#locations). ## Contacts When you reply to a comment, you can `@mention` other teammates that are added to a `User's Contacts List`. To learn more about creating a `User's Contacts List`, [read here](/key-concepts/users/contact-list). ## Detect if Velt SDK is initialized To detect if the Velt SDK is initialized, subscribe using the following method: ```jsx let subscription = client.getVeltInitState().subscribe((veltInitState: boolean | undefined) => { console.log('Velt Init State:', veltInitState); }); ``` To unsubscribe from the subscription: ```jsx subscription?.unsubscribe() ``` You can also the use `useVeltInitState()` hook: ```jsx import { useVeltInitState } from '@veltdev/react'; function YourComponent() { const veltInitState = useVeltInitState(); useEffect(() => { console.log('Velt Init State:', veltInitState); if (veltInitState) { // Velt state is initialized, so user can perform any action here } }, [veltInitState]); } ``` ## Advanced Set Up options This section includes a list of optional advanced set up options. ## Location Users logged into the same **Document** ID can see each other's `Presence`, `Cursors`, `Comments` etc. However, if you want to add another layer of categorization to organize users together, you can use **Location**. If a **Document** is like a house, a **Location** is like a room within the house. To learn more about `Locations`, check out its dedicated section [here](/key-concepts/overview#locations). ## Contacts When you reply to a comment, you can `@mention` other teammates that are added to a `User's Contacts List`. To learn more about creating a `User's Contacts List`, [read here](/key-concepts/users/contact-list). ## Detect if Velt SDK is initialized To detect if the Velt SDK is initialized, subscribe using the following method: ```jsx let subscription = client.getVeltInitState().subscribe((veltInitState: boolean | undefined) => { console.log('Velt Init State:', veltInitState); }); ``` To unsubscribe from the subscription: ```jsx subscription?.unsubscribe() ``` ## Advanced Set Up options This section includes a list of optional advanced set up options. ## Location Users logged into the same **Document** ID can see each other's `Presence`, `Cursors`, `Comments` etc. However, if you want to add another layer of categorization to organize users together, you can use **Location**. If a **Document** is like a house, a **Location** is like a room within the house. To learn more about `Locations`, check out its dedicated section [here](/key-concepts/overview#locations). ## Contacts When you reply to a comment, you can `@mention` other teammates that are added to a `User's Contacts List`. To learn more about creating a `User's Contacts List`, [read here](/key-concepts/users/contact-list). ## Detect if Velt SDK is initialized To detect if the Velt SDK is initialized, subscribe using the following method: ```jsx let subscription = Velt.getVeltInitState().subscribe((veltInitState: boolean | undefined) => { console.log('Velt Init State:', veltInitState); }); ``` To unsubscribe from the subscription: ```jsx subscription?.unsubscribe() ``` ## Advanced Set Up options This section includes a list of optional advanced set up options. ## Location Users logged into the same **Document** ID can see each other's `Presence`, `Cursors`, `Comments` etc. However, if you want to add another layer of categorization to organize users together, you can use **Location**. If a **Document** is like a house, a **Location** is like a room within the house. To learn more about `Locations`, check out its dedicated section [here](/key-concepts/overview#locations). ## Contacts When you reply to a comment, you can `@mention` other teammates that are added to a `User's Contacts List`. To learn more about creating a `User's Contacts List`, [read here](/key-concepts/users/contact-list). ## Detect if Velt SDK is initialized To detect if the Velt SDK is initialized, subscribe using the following method: ```jsx let subscription = this.client.getVeltInitState().subscribe((veltInitState: boolean | undefined) => { console.log('Velt Init State:', veltInitState); }); ``` To unsubscribe from the subscription: ```jsx subscription?.unsubscribe() ``` ## Advanced Set Up options This section includes a list of optional advanced set up options. ## Location Users logged into the same **Document** ID can see each other's `Presence`, `Cursors`, `Comments` etc. However, if you want to add another layer of categorization to organize users together, you can use **Location**. If a **Document** is like a house, a **Location** is like a room within the house. To learn more about `Locations`, check out its dedicated section [here](/key-concepts/overview#locations). ## Contacts When you reply to a comment, you can `@mention` other teammates that are added to a `User's Contacts List`. To learn more about creating a `User's Contacts List`, [read here](/key-concepts/users/contact-list). ## Detect if Velt SDK is initialized To detect if the Velt SDK is initialized, subscribe using the following method: ```jsx let subscription = client.getVeltInitState().subscribe((veltInitState: boolean | undefined) => { console.log('Velt Init State:', veltInitState); }); ``` To unsubscribe from the subscription: ```jsx subscription?.unsubscribe() ``` # 2. Authenticate Source: https://docs.velt.dev/get-started/setup/authenticate Autheticate your logged in users with the SDK. It is critical that you do the following steps within a child component and not within the same root component where you placed the VeltProvider. Realistically, these steps should be done inside your component that handles authentication. Import the `useIdentify` hook. ```js import { useIdentify } from '@veltdev/react' ``` Create a Velt `User` object. ```js // Fetch the relevant user info from `yourAuthenticatedUser` const { uid, displayName, email, photoURL, organizationId, colorCode } = yourAuthenticatedUser; // Create the Velt user object const user = { userId: uid, organizationId: organizationId, // this is the organization id the user belongs to. You should always use this. name: displayName, email: email, photoUrl: photoURL, color: colorCode, // Use valid Hex code value. Used in the background color of the user's avatar. textColor: textColor // Use valid Hex code value. Used in the text color of the user's intial when photoUrl is not present. }; ``` To enable `@mention` in the comments, you need to pass the user's contacts. Learn more about how it works [here](/key-concepts/users/contact-list). Call the `useIdentify()` hook and pass in the Velt `User` object. ```js useIdentify(user); ``` The `useIdentify()` method is asynchronous. You must call `useIdentify` within a child component of the `VeltProvider`, or else it will not work. Provide an initial within the user object. If the initial is not provided in the identify call, then we will automatically create it using the name. The second parameter of the `useIdentify()` method is an optional configuration object that has a `JWT Token` as a field. This can be used to add an additional layer of security to prevent user impersonation. ```js useIdentify(user, { authToken: authToken, }); ``` See [JWT Tokens](/security/jwt-tokens) for more information on how to generate a `JWT Token` with the Velt SDK. `Default: false` By default when you identify a **User**, we maintain the user auth in the browser unless you explicitly sign out the logged in user. If you are changing a User's access or any metadata and want those changes to be reflected immediately, then you should re-call the `identify` method with `forceReset` option set to `true`. ```js useIdentify(user, { forceReset: true }); ``` We recommend following the setup guide that uses `React / Next.js with Hooks` for a cleaner experience. It is critical that you do the following steps within a child component and not within the same root component where you placed the VeltProvider. Realistically, these steps should be done inside your component that handles authentication. Import the `useVeltClient` React hook. You can use this hook within your component to fetch the Velt client. ```js import { useVeltClient } from '@veltdev/react'; ``` ```js const { client } = useVeltClient(); ``` The code in the following steps will go inside this `useEffect` hook. ```js useEffect(() => { if (client && yourAuthenticatedUser) { // Fetch the relevant user info from your authenticated user object. } }, [client, yourAuthenticatedUser]); ``` Create a Velt `User` object by taking the relevant fields from `yourAuthenticatedUser`. ```js // Fetch the relevant user info from `yourAuthenticatedUser` const { uid, displayName, email, photoURL, organizationId, colorCode } = yourAuthenticatedUser; // Create the Velt user object const user = { userId: uid, organizationId: organizationId, // this is the organization id the user belongs to. You should always use this. name: displayName, email: email, photoUrl: photoURL, color: colorCode, // Use valid Hex code value. Used in the background color of the user's avatar. textColor: textColor // Use valid Hex code value. Used in the text color of the user's intial when photoUrl is not present. }; ``` To enable `@mention` in the comments, you need to pass the user's contacts. Learn more about how it works [here](/key-concepts/users/contact-list). Call the `identify()` method and pass in the Velt `User` object. ```js await client.identify(user); ``` The `client.identify()` method is asynchronous. You must call `client.identify` within a child component of the `VeltProvider`, or else it will not work. Provide an initial within the user object. If the initial is not provided in the identify call, then we will automatically create it using the name. The second parameter of the `client.identify()` method is an optional configuration object that has a `JWT Token` as a field. This can be used to add an additional layer of security to prevent user impersonation. ```js await client.identify(user, { authToken: authToken, }); ``` We will use the `email` address and `organizationId` passed in the identify call to validate the user later to prevent unauthorized access. See [JWT Tokens](/security/jwt-tokens) for more information on how to generate a `JWT Token` with the Velt SDK. `Default: false` By default when you identify a **User**, we maintain the user auth in the browser unless you explicitly sign out the logged in user. If you are changing a User's access or any metadata and want those changes to be reflected immediately, then you should re-call the `identify` method with `forceReset` option set to `true`. ```js await client.identify(user, { forceReset: true }); ``` Create a Velt `User` object. ```js // Fetch the relevant user info from `yourAuthenticatedUser` const { uid, displayName, email, photoURL, organizationId, colorCode } = yourAuthenticatedUser; // Create the Velt user object const user = { userId: uid, organizationId: organizationId, // this is the organization id the user belongs to. You should always use this. name: displayName, email: email, photoUrl: photoURL, color: colorCode, // Use valid Hex code value. Used in the background color of the user's avatar. textColor: textColor // Use valid Hex code value. Used in the text color of the user's intial when photoUrl is not present. }; ``` To enable `@mention` in the comments, you need to pass the user's contacts. Learn more about how it works [here](/key-concepts/users/contact-list). Call this function in the component where you authenticate your `Users` once your Velt client and your `User` object is available. If your `.js` files are all in one file, you will need to include the `.js` file on every html page you want the features to be enabled on. Make sure you pass the `User` with the fields defined in the `User` object or refer to the example below. ```js await Velt.identify(yourLoggedInUser) ``` The `Velt.identify()` method is asynchronous You must call `client.identify` within a child component of the `VeltProvider`, or else it will not work. Provide an initial within the user object. If the initial is not provided in the identify call, then we will automatically create it using the name. The second parameter of the `client.identify()` method is an optional configuration object that has a `JWT Token` as a field. This can be used to add an additional layer of security to prevent user impersonation. ```js await Velt.identify(user, { authToken: authToken, }); ``` See [JWT Tokens](/security/jwt-tokens) for more information on how to generate a `JWT Token` with the Velt SDK. `Default: false` By default when you identify a **User**, we maintain the user auth in the browser unless you explicitly sign out the logged in user. If you are changing a User's access or any metadata and want those changes to be reflected immediately, then you should re-call the `identify` method with `forceReset` option set to `true`. ```js await Velt.identify(user, { forceReset: true }); ``` It is critical that you do the following steps within a child component and not within the same root component where you placed the VeltProvider. Realistically, these steps should be done inside your component that handles authentication. Create a Velt User object. ```jsx // Fetch the relevant user info from `yourAuthenticatedUser` const { uid, displayName, email, photoURL, organizationId, colorCode } = yourAuthenticatedUser; // Create the Velt user object const user = { userId: uid, organizationId: organizationId, // this is the organization id the user belongs to. You should always use this. name: displayName, email: email, photoUrl: photoURL, color: colorCode, // Use valid Hex code value. Used in the background color of the user's avatar. textColor: textColor // Use valid Hex code value. Used in the text color of the user's intial when photoUrl is not present. }; ``` ```jsx this.client.identify(user); ``` The `this.client.identify()` method is asynchronous. Provide an initial within the user object. If the initial is not provided in the identify call, then we will automatically create it using the name. The second parameter of the `useIdentify()` method is an optional configuration object that has a `JWT Token` as a field. This can be used to add an additional layer of security to prevent user impersonation. ```js this.client.identify(user, { authToken: authToken, }); ``` See [JWT Tokens](/security/jwt-tokens) for more information on how to generate a `JWT Token` with the Velt SDK. `Default: false` By default when you identify a **User**, we maintain the user auth in the browser unless you explicitly sign out the logged in user. If you are changing a User's access or any metadata and want those changes to be reflected immediately, then you should re-call the `identify` method with `forceReset` option set to `true`. ```js this.client.identify(user, { forceReset: true }); ``` It is critical that you do the following steps within a child component and not within the same root component where you placed the VeltProvider. Realistically, these steps should be done inside your component that handles authentication. Create a Velt User object. ```jsx // Fetch the relevant user info from `yourAuthenticatedUser` const { uid, displayName, email, photoURL, organizationId, colorCode } = yourAuthenticatedUser; // Create the Velt user object const user = { userId: uid, organizationId: organizationId, // this is the organization id the user belongs to. You should always use this. name: displayName, email: email, photoUrl: photoURL, color: colorCode, // Use valid Hex code value. Used in the background color of the user's avatar. textColor: textColor // Use valid Hex code value. Used in the text color of the user's intial when photoUrl is not present. }; ``` ```jsx client.identify(user); ``` The `client.identify()` method is asynchronous. You must call `client.identify()` within a child component of the `VeltProvider`, or else it will not work. Provide an initial within the user object. If the initial is not provided in the identify call, then we will automatically create it using the name. The second parameter of the `useIdentify()` method is an optional configuration object that has a `JWT Token` as a field. This can be used to add an additional layer of security to prevent user impersonation. ```js client.identify(user, { authToken: authToken, }); ``` See [JWT Tokens](/security/jwt-tokens) for more information on how to generate a `JWT Token` with the Velt SDK. `Default: false` By default when you identify a **User**, we maintain the user auth in the browser unless you explicitly sign out the logged in user. If you are changing a User's access or any metadata and want those changes to be reflected immediately, then you should re-call the `identify` method with `forceReset` option set to `true`. ```js client.identify(user, { forceReset: true }); ``` ```js React / Next.js with Hooks //Warning: Make sure this is a child component to VeltProvider //and not within the same file where VeltProvider is placed. // 1) Import the useIdentify hook import { useIdentify } from '@veltdev/react'; export default function YourAuthComponent() { const userService = () => { return { uid:"123", organizationId: "organizationId123", // this is the organization id the user belongs to. You should always use this. displayName:"Bob", email:"bob@gmail.com", photoURL:'https://i.pravatar.cc/300', color: colorCode, // Use valid Hex code value. Used in the background color of the user's avatar. textColor: textColor // Use valid Hex code value. Used in the text color of the user's intial when photoUrl is not present. } } let yourAuthenticatedUser = userService() // 2) Fetch the relevant User info from yourAuthenticatedUser const { uid, displayName, email, photoURL, organizationId, colorCode } = yourAuthenticatedUser; // Create the Velt user object const user = { userId: uid, organizationId: organizationId, // this is the organization id the user belongs to. You should always use this. name: displayName, email: email, photoUrl: photoURL, color: colorCode, // Use valid Hex code value. Used in the background color of the user's avatar. textColor: textColor // Use valid Hex code value. Used in the text color of the user's intial when photoUrl is not present. }; //3) Pass the user object to the SDK useIdentify(user) return (
// Your auth component template
); } ``` ```js React / Next.js //Warning: Make sure this is a child component to VeltProvider //and not within the same file where VeltProvider is placed. // 1) Get the Velt Client import { useVeltClient } from '@veltdev/react'; import { useEffect } from 'react'; export default function YourAuthComponent() { const userService = () => { return { uid:"123", organizationId: "organizationId123", // this is the organization id the user belongs to. You should always use this. displayName:"Bob", email:"bob@gmail.com", photoURL:'https://i.pravatar.cc/300', color: colorCode, // Use valid Hex code value. Used in the background color of the user's avatar. textColor: textColor // Use valid Hex code value. Used in the text color of the user's intial when photoUrl is not present. } } let yourAuthenticatedUser = userService() const { client } = useVeltClient(); // 2) Create a useEffect hook useEffect(() => { const initVelt = async () => { if (client && yourAuthenticatedUser) { // 3) Fetch the relevant user info from yourAuthenticatedUser const { uid, displayName, email, photoURL, organizationId, colorCode } = yourAuthenticatedUser; // Create the Velt user object const user = { userId: uid, organizationId: organizationId, // this is the organization id the user belongs to. You should always use this. name: displayName, email: email, photoUrl: photoURL, color: colorCode, // Use valid Hex code value. Used in the background color of the user's avatar. textColor: textColor, // Use valid Hex code value. Used in the text color of the user's intial when photoUrl is not present. }; //4) Pass the user object to the SDK await client.identify(user) } } initVelt().catch(console.error) }, [client, yourAuthenticatedUser]); return (
// Your auth component template
); } ``` ```html HTML Collaboration App ``` ```jsx Angular import { Component } from '@angular/core'; import { initVelt } from '@veltdev/client'; import { Velt } from '@veltdev/types'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { client?: Velt; constructor() { this.initVelt(); } // Initialize velt sdk async initVelt() { this.client = await initVelt('YOUR_APIKEY'); this.setUser(); } // login with your user in velt setUser() { if (this.client) { const user = { userId: uid, organizationId: 'organizationId123', // this is the organization id the user belongs to. You should always use this. name: displayName, email: email, photoUrl: photoURL, color: colorCode, // Use valid Hex code value. Used in the background color of the user's avatar. textColor: textColor // Use valid Hex code value. Used in the text color of the user's intial when photoUrl is not present. }; // Your user object here this.client.identify(user); } } } ``` ```html Vue.js ```
# 3. Initialize Document Source: https://docs.velt.dev/get-started/setup/initialize-document A **Document** represents a shared collaborative space where users can interact. Documents live inside the Organization. Learn more about documents [here](/key-concepts/documents). The Set Document method takes two parameters: * `documentId`: The unique identifier for the document. * `metadata`: (optional) This is a key/value pair object where you can set metadata about the document such as `documentName`. documentName is a special field that we use to display the document name in some Velt Components. The SDK will not work without this call. ## 1. Initialize Document for the current Organization * By default, users can only access documents within their own organization. Use this to set the document for the current organization the user is logged into. It is critical that you do the following steps within a child component and not within the same root component where you placed the VeltProvider. Realistically, these steps should be done inside your component that represents your document. ```jsx import { useSetDocument } from '@veltdev/react'; useSetDocument('unique-document-id', {documentName: 'Document Name'}); ``` It is critical that you do the following steps within a child component and not within the same root component where you placed the VeltProvider. Realistically, these steps should be done inside your component that represents your document. ```jsx const { client } = useVeltClient(); useEffect(() => { if (client) { client.setDocument('unique-document-id', {documentName: 'Document Name'}); } }, [client]); ``` ```jsx if(Velt){ Velt.setDocument('unique-document-id', {documentName: 'Document Name'}); } ``` ```jsx if (this.client) { this.client.setDocument('unique-document-id', {documentName: 'Document Name'}); } ``` ```jsx if (client) { client.setDocument('unique-document-id', {documentName: 'Document Name'}); } ``` ## 2. Initialize Document for a different Organization * Use this to access a document from an organization different than the one the user is logged into. * You can enable cross-organization access by specifying the `organizationId` of the target document in the document metadata. * Ensure that the user has access to the target document in the target organization. It is critical that you do the following steps within a child component and not within the same root component where you placed the VeltProvider. Realistically, these steps should be done inside your component that represents your document. ```jsx import { useSetDocument } from '@veltdev/react'; useSetDocument('unique-document-id', {organizationId: 'ANOTHER_ORGANIZATION_ID'}); ``` It is critical that you do the following steps within a child component and not within the same root component where you placed the VeltProvider. Realistically, these steps should be done inside your component that represents your document. ```jsx const { client } = useVeltClient(); useEffect(() => { if (client) { client.setDocument('unique-document-id', {organizationId: 'ANOTHER_ORGANIZATION_ID'}); } }, [client]); ``` ```jsx if(Velt){ Velt.setDocument('unique-document-id', {organizationId: 'ANOTHER_ORGANIZATION_ID'}); } ``` ```jsx if (this.client) { this.client.setDocument('unique-document-id', {organizationId: 'ANOTHER_ORGANIZATION_ID'}); } ``` ```jsx if (client) { client.setDocument('unique-document-id', {organizationId: 'ANOTHER_ORGANIZATION_ID'}); } ``` ```js React / Next.js with Hooks // 1) Create a component that will represent your document //Warning: Make sure this is a child component to VeltProvider //and not within the same file where VeltProvider is placed. // 2) Import the useSetDocument hook import { useSetDocument } from '@veltdev/react'; export default function YourDocument() { // 3) Set a document ID useSetDocument('unique-document-id', {documentName: 'Document Name'}); return (
//your document template - add Velt Components here
); } ``` ```js React / Next.js // 1) Create a component that will represent your document //Warning: Make sure this is a child component to VeltProvider //and not within the same file where VeltProvider is placed. // 2) Get the Velt client import { useVeltClient } from '@veltdev/react'; import { useEffect, useState } from 'react'; export default function YourDocument() { const { client } = useVeltClient(); // 3) Create a useEffect hook useEffect(() => { if (client) { // 4) Set a document ID client.setDocument('unique-document-id', {documentName: 'Document Name'}); } }, [client]); return (
//your document template - add Velt Components here
); } ``` ```html HTML Collaboration App //your document template - add Velt Components here ``` ```jsx Angular import { Component } from '@angular/core'; import { initVelt } from '@veltdev/client'; import { Velt } from '@veltdev/types'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { client?: Velt; constructor() { this.initVelt(); } // Initialize velt sdk async initVelt() { this.client = await initVelt('YOUR_APIKEY'); this.setDocument(); } // set document in velt setDocument() { if (this.client) { this.client.setDocument('YOUR_DOCUMENT_ID', {documentName: 'Document Name'}); } } } // Your HTML File //
// to add comments (ideally add to root component ex: AppComponent) // comment tool // comment sidebar // Add other feature tags ...
``` ```html Vue.js ```
# 1. Install Source: https://docs.velt.dev/get-started/setup/install Steps to integrate Velt into an existing app npm: ```bash npm install @veltdev/react ``` yarn: ```bash $ yarn add @veltdev/react ``` If you're using TypeScript, you can install the types package. ```bash npm install --save-dev @veltdev/types ``` Go to [console.velt.dev](https://console.velt.dev) and grab your Velt API Key ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/velt-console-api-key.png) In the Velt console, add the URL where your app is deployed to the list of Managed Domains. ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/velt-console-add-website.png) Add the VeltProvider component to the root of your app. Add your Velt API key. ```js import { VeltProvider } from '@veltdev/react'; ``` ```js ``` ```js 'use client' import { VeltProvider } from '@veltdev/react'; ``` We recommend following the setup guide that uses `React / Next.js with Hooks` for a cleaner experience. npm: ```bash npm install @veltdev/react ``` yarn: ```bash $ yarn add @veltdev/react ``` If you're using TypeScript, you can install the types package. ```bash npm install --save-dev @veltdev/types ``` Go to [console.velt.dev](https://console.velt.dev) and grab your Velt API Key ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/velt-console-api-key.png) In the Velt console, add the URL where your app is deployed to the list of Managed Domains. ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/velt-console-add-website.png) Add the VeltProvider component to the root of your app. Add your Velt API key. ```js import { VeltProvider } from '@veltdev/react'; ``` ```js ``` ```js 'use client' import { VeltProvider } from '@veltdev/react'; ``` Go to [console.velt.dev](https://console.velt.dev) and grab your Velt API Key ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/velt-console-api-key.png) In the Velt console, add the URL where your app is deployed to the list of Managed Domains. ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/velt-console-add-website.png) ```html ``` Put this in your root app script: ```js async function loadVelt() { await Velt.init("YOUR_VELT_API_KEY"); } ``` ```jsx npm i @veltdev/client ``` If you are using Typescript, install the types library: ```jsx npm i @veltdev/types --save-dev ``` Go to [console.velt.dev](https://console.velt.dev) and grab your Velt API Key ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/velt-console-api-key.png) In the Velt console, add the URL where your app is deployed to the list of Managed Domains. ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/velt-console-add-website.png) Add `schemas: [CUSTOM_ELEMENTS_SCHEMA]` to your App Module: ```jsx import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], // Add this line }) export class AppModule { } ``` ```jsx import { initVelt } from '@veltdev/client'; ``` ```jsx this.client = await initVelt('YOUR_APIKEY'); ``` ```jsx npm i @veltdev/client ``` If you are using Typescript, install the types library: ```jsx npm i @veltdev/types --save-dev ``` Go to [console.velt.dev](https://console.velt.dev) and grab your Velt API Key ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/velt-console-api-key.png) In the Velt console, add the URL where your app is deployed to the list of Managed Domains. ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/velt-console-add-website.png) In main.js, add the following code to allow Velt elements in your Vue app: ```html Vue.config.ignoredElements = [ /velt-*/ ] ``` ```jsx import { initVelt } from '@veltdev/client'; ``` ```jsx client = await initVelt("YOUR_APIKEY"); ``` ```jsx React / Next.js with Hooks 'use client' // Add this line for Next.js only import { VeltProvider } from '@veltdev/react'; export default function App() { return ( ); } ``` ```jsx React / Next.js 'use client' // Add this line for Next.js only import { VeltProvider } from '@veltdev/react'; export default function App() { return ( ); } ``` ```html HTML Collaboration App ``` ```jsx Angular import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], // Add this line }) export class AppModule { } // App Component import { initVelt } from '@veltdev/client'; @Component({ selector: 'app-root', }) export class AppComponent implements OnInit { client: any; ngOnInit() { this.client = await initVelt('YOUR_APIKEY'); } } ``` ```js Vue.js // main.js Vue.config.ignoredElements = [ /velt-*/ ] // App.vue import { initVelt } from '@veltdev/client'; export default { name: 'App', async mounted() { client = await initVelt('YOUR_APIKEY'); } } ``` # AG Grid Source: https://docs.velt.dev/integrations/ag-grid ## How to add Velt attributes to AG Grid cells? Some Velt features like live selection require adding Velt specific attributes to the cell elements. Here's how you can do it: 1. In your AG Grid column definitions, use the `cell renderer` property to customize the cell rendering. 2. Within the `cell renderer`, add the necessary Velt attributes to the cell element. Here's a code sample that shows how to add the `data-velt-live-selection-enabled` attribute and other required attributes to AG Grid cell div tags: ```jsx colDefs: ColDef[] = [ { field: "FIELD_NAME", cellRenderer: (params: any) => { // Let AG Grid render the default cell, then modify the outer div setTimeout(() => { const cellElement = params.eGridCell; // Add Velt attributes to the parent cell div cellElement.setAttribute('data-velt-live-selection-enabled', 'true'); // Add other Velt attributes as required }, 0); // Timeout to wait for the DOM to be ready return params.value; // Use the default renderer, which is the text value }, editable: true, // Set to true if the column is editable }, ]; ``` # null Source: https://docs.velt.dev/key-concepts/access-control/overview ### Overview Access Control is maintained at two levels: 1. Organization level 2. Document level ### 1. Organization Level Here are some properties of Organization level access control: * Access to an Organization can be granted or revoked by adding or removing a User from an organization. A user can be added to multiple organizations but can only log in to one organization at a time. * By default all organization users have access to all organization data including documents, locations and user contacts. * Access to documents can be restricted by setting permissions at the document level. (more below) ### 2. Document Level ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/key-concepts/document-access.png) Here are some properties of Organization level access control: * A document has three types of access: * `public`: `default` Any user who logs into the given document id can access the document whether or not they are part of the organization or the document. * `organizationPrivate`: Only all organization users have access to the document. * `restricted`: Only users explicitly added to the document have access. Organization users not explicitly added will not have access. * Access to a Document can be granted or revoked by adding or removing a User from a document. Document level access overrides organization level access. Eg: if a document is restricted, only users explicitly added to the document will have access to it. * Access can also be granted or revoked by adding or removing organization user groups. `(coming soon)` * Organization users can access the entire Organization contact list in the Document. * Guest (Non-organization) users who have access to the document cannot access the Organization contact list. If you want to show some organization contacts to these guest users, then you need to explicitly add those contacts to the document. # Setup Source: https://docs.velt.dev/key-concepts/documents/set-document A **Document** represents a shared collaborative space where users can interact. Documents live inside the Organization. Documents contain: * All feature data (e.g., Comments, Presence, Cursors, etc.). * Locations * Users: These are different from Organization Users. (more details in Access Control section) Users logged into the same `Document ID` can see each other's `Presence`, `Cursors`, `Comments` etc. For example, in a slide presentation application, the entire slide deck is a document. ## Set a Single Document * Use this to initialize and subscribe to a single Document. * Once you set the document, you will start receiving realtime updates from the document. * Params: * `documentId`: The unique identifier for the document. * `metadata`: (optional) This is a key/value pair object where you can set metadata about the document such as `documentName`. documentName is a special field that we use to display the document name in some Velt Components. **Using Hooks:** ```jsx useSetDocument('unique-document-id', {documentName: 'Document Name'}); ``` **Using API:** ```jsx const { client } = useVeltClient(); useEffect(() => { if (client) { client.setDocument('unique-document-id', {documentName: 'Document Name'}); } }, [client]); ``` ```jsx if(Velt){ Velt.setDocument('unique-document-id', {documentName: 'Document Name'}); } ``` ```jsx this.client.setDocument('unique-document-id', {documentName: 'Document Name'}); ``` ```jsx client.setDocument('unique-document-id', {documentName: 'Document Name'}); ``` ## Set Multiple Documents * Use this to set and subscribe to multiple documents at the same time. * You can specify 30 documents at a time. * The first document in the list will be considered as the root document. * For features like comments, notifications, recorder, reactions etc. you will be able to read and write to multiple documents at the same time. * For features like cursors, presence, huddle, live state sync etc. it will default to the root document. * Sidebar will automatically show data from all the documents. Params: * `documents`: [Document\[\]](/api-reference/sdk/models/data-models#document) * `options?`: [SetDocumentsRequestOptions](/api-reference/sdk/models/data-models#setdocumentsrequestoptions) **Using Hooks:** ```jsx const documents = [ { id: 'document-1', metadata: { documentName: 'Document 1' } }, { id: 'document-2', metadata: { documentName: 'Document 2' } } ]; const { setDocuments } = useSetDocuments(); setDocuments(documents); ``` **Using API:** ```jsx const documents = [ { id: 'document-1', metadata: { documentName: 'Document 1' } }, { id: 'document-2', metadata: { documentName: 'Document 2' } } ]; client.setDocuments(documents); ``` **Using API:** ```js const documents = [ { id: 'document-1', metadata: { documentName: 'Document 1' } }, { id: 'document-2', metadata: { documentName: 'Document 2' } } ]; Velt.setDocuments(documents); ``` ### Read/Write data from multiple documents on the same page * If you want to display data (eg: comments) from multiple documents on the same page, add `data-velt-document-id` attribute to the container that contains the `document`. * It will be used to identify which part of the DOM belongs to which document. ```html
...
...
...
``` ## Unset a Single Document * Use this to unsubscribe from the root Document * Once you unset the document, you will no longer receive realtime updates from the document. * For some parts of your app, you may not need Velt. In such cases, you can unset the document. **Using Hooks:** ```jsx useUnsetDocumentId(); ``` **Using API:** ```jsx const { client } = useVeltClient(); useEffect(() => { if (client) { client.unsetDocumentId(); } }, [client]); ``` ```jsx Velt.unsetDocumentId(); ``` ```jsx this.client.unsetDocumentId(); ``` ```jsx client.unsetDocumentId(); ``` ## Unset Multiple Documents * Use this to unsubscribe from all documents at once. **Using Hooks:** ```jsx useUnsetDocuments(); ``` **Using API:** ```jsx const { client } = useVeltClient(); useEffect(() => { if (client) { client.unsetDocuments(); } }, [client]); ``` ```jsx Velt.unsetDocuments(); ``` ```jsx this.client.unsetDocuments(); ``` ```jsx client.unsetDocuments(); ``` ## Get Document Metadata * Use this to get the metadata of a Document. * This is useful when you want to display the document name in your app or any custom metadata that you have set. * This returns a subscription with [`DocumentMetadata`](/api-reference/models/DocumentMetadata) object. ```jsx const { client } = useVeltClient(); useEffect(() => { if (client) { client.getDocumentMetadata().subscribe((documentMetadata) => { console.log("Current document metadata: ", documentMetadata); }); } }, [client]); ``` ```jsx Velt.getDocumentMetadata().subscribe((documentMetadata) => { console.log("Current document metadata: ", documentMetadata); }); ``` ```jsx this.client.getDocumentMetadata().subscribe((documentMetadata) => { console.log("Current document metadata: ", documentMetadata); }); ``` ```jsx client.getDocumentMetadata().subscribe((documentMetadata) => { console.log("Current document metadata: ", documentMetadata); }); ``` ## Access Documents from Other Organizations * By default, users can only access documents within their own organization. * Enable cross-organization access by specifying the `organizationId` of the target document in the document metadata. * Ensure that the user has access to the target document in the target organization. **Using Hook:** ```jsx {/* Single Document */} useSetDocument("DOCUMENT_ID", { organizationId: 'ANOTHER_ORGANIZATION_ID' }); {/* Multiple Documents */} const documents = [ { id: 'document-1', metadata: { documentName: 'Document 1' } }, { id: 'document-2', metadata: { documentName: 'Document 2' } } ]; useSetDocuments(documents, { organizationId: 'ANOTHER_ORGANIZATION_ID' }); ``` **Using API:** ```jsx {/* Single Document */} client.setDocument("DOCUMENT_ID", { organizationId: 'ANOTHER_ORGANIZATION_ID' }); {/* Multiple Documents */} const documents = [ { id: 'document-1', metadata: { documentName: 'Document 1' } }, { id: 'document-2', metadata: { documentName: 'Document 2' } } ]; client.setDocuments(documents, { organizationId: 'ANOTHER_ORGANIZATION_ID' }); ``` ```javascript {/* Single Document */} Velt.setDocument(DOCUMENT_ID, { organizationId: 'ANOTHER_ORGANIZATION_ID' }); {/* Multiple Documents */} const documents = [ { id: 'document-1', metadata: { documentName: 'Document 1' } }, { id: 'document-2', metadata: { documentName: 'Document 2' } } ]; Velt.setDocuments(documents, { organizationId: 'ANOTHER_ORGANIZATION_ID' }); ``` # Use Multiple Locations at once Source: https://docs.velt.dev/key-concepts/locations/multiple-locations There are three main steps to adding multiple locations: 1. Add a root location 2. Add additional locations 3. Bind elements containers to `locations` ```jsx useSetDocument('some_document_id'); useSetLocation({ 'id': 'locationRoot', 'locationName': 'PageWithVideo', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, }) ``` ```jsx client.setDocument('some_document_id'); client.setLocation({ 'id': 'locationRoot', 'locationName': 'PageWithVideo', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, }); ``` ```jsx Velt.setDocument('some_document_id'); Velt.setLocation({ 'id': 'locationRoot', 'locationName': 'PageWithVideo', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, }); ``` ```jsx this.client.setDocument('some_document_id'); this.client.setLocation({ 'id': 'locationRoot', 'locationName': 'PageWithVideo', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, }) ``` ```jsx client.setDocument('some_document_id'); client.setLocation({ 'id': 'locationRoot', 'locationName': 'PageWithVideo', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, }) ``` Add additional locations on the page by using set location with the `true` parameter: ```jsx useSetLocation({ 'id': 'locationId1', 'locationName': 'Scene1LocationName', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, 'videoFrame': '120' }, true) useSetLocation({ 'id': 'locationId2', 'locationName': 'Scene2LocationName', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, 'videoFrame': '50' }, true) useSetLocation({ 'id': 'locationId3', 'locationName': 'Scene3LocationName', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, 'videoFrame': '80' }, true) ``` ```jsx client.setLocation({ 'id': 'locationId1', 'locationName': 'Scene1LocationName', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, 'videoFrame': '120' }, true) client.setLocation({ 'id': 'locationId2', 'locationName': 'Scene2LocationName', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, 'videoFrame': '50' }, true) client.setLocation({ 'id': 'locationId3', 'locationName': 'Scene3LocationName', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, 'videoFrame': '80' }, true) ``` ```jsx Velt.setLocation({ 'id': 'locationId1', 'locationName': 'Scene1LocationName', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, 'page': 'scene1', 'videoFrame': '120' }, true) Velt.setLocation({ 'id': 'locationId2', 'locationName': 'Scene2LocationName', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, 'page': 'scene2', 'videoFrame': '50' }, true) Velt.setLocation({ 'id': 'locationId3', 'locationName': 'Scene3LocationName', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, 'page': 'scene3', 'videoFrame': '80' }, true) ``` ```jsx this.client.setLocation({ 'id': 'locationId1', 'locationName': 'Scene1LocationName', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, 'videoFrame': '120' }, true) this.client.setLocation({ 'id': 'locationId2', 'locationName': 'Scene2LocationName', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, 'videoFrame': '50' }, true) this.client.setLocation({ 'id': 'locationId3', 'locationName': 'Scene3LocationName', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, 'videoFrame': '80' }, true) ``` ```jsx client.setLocation({ 'id': 'locationId1', 'locationName': 'Scene1LocationName', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, 'videoFrame': '120' }, true) client.setLocation({ 'id': 'locationId2', 'locationName': 'Scene2LocationName', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, 'videoFrame': '50' }, true) client.setLocation({ 'id': 'locationId3', 'locationName': 'Scene3LocationName', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, 'videoFrame': '80' }, true) ``` * When you render multiple elements representing different locations on the same page, then you can bind each element container to the correct `location` by adding the `data-velt-location-id` attribute. * This ensures that the comment added within the location is associated with the correct location. ```jsx
// any content
// any content
```
```jsx
// any content
// any content
```
```jsx
// any content
// any content
```
```jsx
// any content
// any content
```
```jsx
// any content
// any content
```
```js React / Next.js with Hooks import { useSetDocument, useSetLocation } from '@veltdev/react'; export default function YourDocument() { //Set Document ID useSetDocument('some_document_id'); //Set Root Location useSetLocation({ 'id': 'locationId1', 'locationName': 'Scene1LocationName', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, 'page': 'mainPage', 'videoFrame': '120' // You can keep adding more field to make the location very specific. // The field names can be anything. }) //Add another Location useSetLocation({ 'id': 'locationId2', 'locationName': 'Scene2LocationName', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, 'page': 'mainPage', 'videoFrame': '240' // You can keep adding more field to make the location very specific. // The field names can be anything. },true) return (
// any content
// any content
); } ``` ```js React / Next.js import { useVeltClient } from '@veltdev/react'; import { useEffect, useState } from 'react'; export default function YourDocument() { const { client } = useVeltClient(); useEffect(() => { if (client) { //Set Document ID client.setDocument('some_document_id'); //Set Root Location client.setLocation({ 'id': 'locationId1', 'locationName': 'Scene1LocationName', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, 'page': 'mainPage', 'videoFrame': '120' // You can keep adding more field to make the location very specific. // The field names can be anything. }) //Add another Location client.setLocation({ 'id': 'locationId2', 'locationName': 'Scene2LocationName', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, 'page': 'mainPage', 'videoFrame': '240' // You can keep adding more field to make the location very specific. // The field names can be anything. },true) } }, [client]); return (
// any content
// any content
); } ``` ```html HTML Collaboration App
// any content
// any content
``` ```js Angular import { Component } from '@angular/core'; import { initVelt } from '@veltdev/client'; import { Velt } from '@veltdev/types'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { client?: Velt; constructor() { this.initVelt(); } // Initialize velt sdk async initVelt() { this.client = await initVelt('YOUR_APIKEY'); this.setDocument(); } // set document id in velt setDocument() { if (this.client) { //Set Document ID this.client.setDocument('some_document_id'); //Set Root Location this.client.setLocation({ 'id': 'locationId1', 'locationName': 'Scene1LocationName', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, 'page': 'mainPage', 'videoFrame': '120' // You can keep adding more field to make the location very specific. // The field names can be anything. }) //Add another Location this.client.setLocation({ 'id': 'locationId2', 'locationName': 'Scene2LocationName', 'version': { 'id': 'v1.0', 'name': 'Version Name' }, 'page': 'mainPage', 'videoFrame': '240' // You can keep adding more field to make the location very specific. // The field names can be anything. },true) } } } // Your HTML File //
// any content
// any content
``` ```js Vue.js ```
# Remove Locations Source: https://docs.velt.dev/key-concepts/locations/remove-locations To remove all locations, use the `client.removeLocation()` method. ```jsx client.removeLocation() ``` If you have added multiple locations and only want to remove one of them, you can remove it by using `client.removeLocation()` and by passing in the exact location object you want to remove. ```jsx // remove specific location const locationToRemove = { // your custom location object } client.removeLocation(locationToRemove); ``` To remove all locations, use the `client.removeLocation()` method. ```jsx Velt.removeLocation() ``` If you have added multiple locations and only want to remove one of them, you can remove it by using `client.removeLocation()` and by passing in the exact location object you want to remove. ```jsx // remove specific location const locationToRemove = { // your custom location object } Velt.removeLocation(locationToRemove); ``` To remove all locations, use the `client.removeLocation()` method. ```jsx this.client.removeLocation() ``` If you have added multiple locations and only want to remove one of them, you can remove it by using `client.removeLocation()` and by passing in the exact location object you want to remove. ```jsx // remove specific location const locationToRemove = { // your custom location object } this.client.removeLocation(locationToRemove); ``` To remove all locations, use the `client.removeLocation()` method. ```jsx client.removeLocation() ``` If you have added multiple locations and only want to remove one of them, you can remove it by using `client.removeLocation()` and by passing in the exact location object you want to remove. ```jsx // remove specific location const locationToRemove = { // your custom location object } client.removeLocation(locationToRemove); ``` ```jsx React / Next.js //Set Location client.setLocation({ 'id': 'locationId1', 'locationName': 'Scene1LocationName' }) //Add another Location client.setLocation({ 'id': 'locationId2', 'locationName': 'Scene2LocationName' },true) //Remove first Location client.removeLocation({ 'id': 'locationId1', 'locationName': 'Scene1LocationName' }); ``` ```jsx HTML //Set Location Velt.setLocation({ 'id': 'locationId1', 'locationName': 'Scene1LocationName', }) //Add another Location Velt.setLocation({ 'id': 'locationId2', 'locationName': 'Scene2LocationName' },true) //Remove first Location Velt.removeLocation({ 'id': 'locationId1', 'locationName': 'Scene1LocationName' }); ``` ```jsx Angular //Set Location this.client.setLocation({ 'id': 'locationId1', 'locationName': 'Scene1LocationName' }) //Add another Location this.client.setLocation({ 'id': 'locationId2', 'locationName': 'Scene2LocationName' },true) //Remove first Location this.client.removeLocation({ 'id': 'locationId1', 'locationName': 'Scene1LocationName' }); ``` ```jsx Vue.js //Set Location client.setLocation({ 'id': 'locationId1', 'locationName': 'Scene1LocationName' }) //Add another Location client.setLocation({ 'id': 'locationId2', 'locationName': 'Scene2LocationName' },true) //Remove first Location client.removeLocation({ 'id': 'locationId1', 'locationName': 'Scene1LocationName' }); ``` # Setup Source: https://docs.velt.dev/key-concepts/locations/set-location A **Location** is a JSON object that represents a specific area or context in your application. Locations can represent: * Pages * Sections * Video frames * Data points on maps/charts * Any other contextual area The location object has three special fields: * `id` (required): A unique identifier for the location that can be used to reference it later * `locationName` (recommended): A human-readable name displayed in Velt components like the `VeltCommentsSideBar` * `version` (optional): An object with `id` and `name` fields to track different versions of the location **Using Hooks:** ```jsx useSetLocation({ 'id': 'locationId1', 'locationName': 'MainVideoPlayer', 'page': 'mainPage', 'version': { 'id': 'v2.3', 'name': 'Version Name' }, 'videoFrame': '120' // You can keep adding more field to make the location very specific. // The field names can be anything. }) ``` **Using API:** ```jsx client.setLocation({ 'id': 'locationId1', 'locationName': 'MainVideoPlayer', 'page': 'mainPage', 'version': { 'id': 'v2.3', 'name': 'Version Name' }, 'videoFrame': '120' // You can keep adding more field to make the location very specific. // The field names can be anything. }) ``` ```jsx Velt.setLocation({ 'id': 'locationId1', 'locationName': 'MainVideoPlayer', 'page': 'mainPage', 'version': { 'id': 'v2.3', 'name': 'Version Name' }, 'videoFrame': '120' // You can keep adding more field to make the location very specific. // The field names can be anything. }) ``` # null Source: https://docs.velt.dev/key-concepts/organizations/setup ### Create an Organization #### Client side When the user signs into an organization as described below, if an organization is not present then it will be created automatically. #### Server side Using our REST APIs, you will be able to create an organization and also set metadata like name, description, etc. ### Add or Remove Users to an Organization to provision access * You will need to explicitly [add](/api-reference/rest-apis/users/add-users) or [delete](/api-reference/rest-apis/users/delete-users) users from the organization to provision or revoke access. * As users are added or removed in your app, you can use our API to sync that information on Velt as well. * Learn more about [User Management](/api-reference/rest-apis/users/add-users). If users are not added to the Organization, they will not be able to access the data inside it. ### Sign in User into an Organization * In the [identify()](/get-started/setup/authenticate) method, set the `organizationId` and also add it to the [auth token](/security/jwt-tokens). * If you want the user to log into another organization, call the identify method again with the new organizationId and new auth token. ### Access Controls for Organizations You can set up granular access controls for users within an organization. Learn more [here](/key-concepts/access-control/overview). # null Source: https://docs.velt.dev/key-concepts/overview ## Overview ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/key-concepts/overview-concepts.png) Velt uses Organizations, Documents, and Locations to organize data and users into the same shared spaces and subspaces, enabling granular access controls. The data hierarchy in Velt follows this structure: Organization -> Documents -> Locations. ## Organizations ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/key-concepts/organizations.png) An **Organization** is the top-level entity. * It contains documents, locations, and users. * Within an organization, you can create multiple documents, and each document can contain several locations. Think of an `organization` as a Google Account belonging to a company (e.g., Company A). This account may have several `users` (Company A employees). A `document` will be any file created within the organization (e.g., document, spreadsheet, slides, etc.). A `location` will be any child section within the document (e.g., slide within a presentation). ## Documents ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/key-concepts/documents.png) A **Document** represents a shared collaborative space where users can interact. Documents live inside the Organization. Documents contain: * All feature data (e.g., Comments, Presence, Cursors, etc.). * Locations * Users: These are different from Organization Users. (more details in Access Control section) Users logged into the same `Document ID` can see each other's `Presence`, `Cursors`, `Comments` etc. For example, in a slide presentation application, the entire slide deck is a document. ## Locations ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/key-concepts/locations.png) **Locations** are optional subspaces within a document, providing finer partitioning of data. For instance: * In a slide presentation, the entire slide presentation will be a document each individual slide will be a location. * In a dashboard, the entire dashboard is a document but various filters applied will be locations; * In a video player, the entire video will be the document and timestamps will be locations. If a **Document** is like a house, a **Location** is like a room within the house. **Locations** are *completely optional*, you can opt to use them or not. If the complexity of your application does not require the use of **Locations**, you can use **Documents** by themselves to group your users together. If you opt to use **Locations**, users in the same **Document** must also be in the same **Location** now to interact. ## Users A `User` represents a person who has been authenticated with the Velt SDK. Once a `User` has been authenticated, their profile can be seen within Velt's collaboration features. For example in the `Comments` feature, the `User's` name is shown by their comment and in `@mentions`. Additionally in the `Presence` and in `Cursors` features, the `User's` name is shown by their avatar bubble and mouse cursors. There can be two categories of users: 1. **Organization Users**: These belong to the organization and by default have access to organization documents and locations. You can control access to documents and locations at a more granular level for these users. 2. **Guest Users**: For some use cases, you may want non-organization users to access and collaborate on a document within the organization. Using our access control features, you can provide access to guest users to only certain documents and user contacts within the organization. ### Contact List for @mention ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/key-concepts/mentions-users.png) When the user is on a document, they can `@mention` other users. By default, the contact list for the @mention feature includes users from: * Organization users. * Guest users explicitly added to the current document. * Organization User Groups. * `@here`: This is a special group that includes only the users explicitly added on the document. This doesn't include organization users or organization user groups. **Contact list is automatically updated:** * as users are added or removed from the organization or the document. * organization user groups are created or updated. **Access Control:** Using the access control features, you can control which users are visible on the contact list on a given document. * Organization users can access the entire Organization contact list on a given organization document. * Guest (Non-organization) users who were granted access to an organization document cannot access the Organization contact list. If you want to show some organization contacts to these guest users, then you need to explicitly add them to the document. ### Organization User Groups ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/key-concepts/mentions-groups.png) You can create custom collection of users such as engineering, marketing etc to group organization users and manage access effectively. * This can be used to @mention a team group versus just individuals (just like in Slack). * This can also be used to provision access to documents. * Organization users can belong to multiple organization user groups. * Non-organization users can't be part of organization user groups. # null Source: https://docs.velt.dev/key-concepts/users/contact-list ### Overview When the user is on a document, they can `@mention` other users. By default, the contact list for the `@mention` feature includes users from: * Organization users. * Guest users explicitly added to the current document. * Organization User Groups. * `@here`: This is a special group that includes only the users explicitly added on the document. This doesn't include organization users or organization user groups. **Contact list is automatically updated:** * as users are [added](/api-reference/rest-apis/users/add-users) or [deleted](/api-reference/rest-apis/users/delete-users) from the organization or the document. * users are [added](/api-reference/rest-apis/organization-user-groups/add-users-to-group) or [deleted](/api-reference/rest-apis/organization-user-groups/delete-users-from-group) from organization user groups. * organization user groups are [added](/api-reference/rest-apis/organization-user-groups/add-groups) or updated. **Access Control:** Using the access control features, you can control which users are visible on the contact list on a given document. * Organization users can access the entire Organization contact list on a given organization document. * Guest (Non-organization) users who were granted access to an organization document cannot access the Organization contact list. If you want to show some organization contacts to these guest users, then you need to explicitly add them to the document. # null Source: https://docs.velt.dev/key-concepts/users/organization-user-groups ### Overview ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/key-concepts/mentions-groups.png) You can create custom collection of users such as engineering, marketing etc to group organization users and manage access effectively. * This can be used to @mention a team group versus just individuals (just like in Slack). * This can also be used to provision access to documents. (coming soon) * Organization users can belong to multiple organization user groups. * Non-organization users can't be part of organization user groups. Learn more: * [Add Organization User Groups](/api-reference/rest-apis/organization-user-groups/add-groups) * [Add Users to Organization User Groups](/api-reference/rest-apis/organization-user-groups/add-users-to-group) * [Delete Users from Organization User Groups](/api-reference/rest-apis/organization-user-groups/delete-users-from-group) # null Source: https://docs.velt.dev/key-concepts/users/sign-in-user To sign in a user call the `identify()` method with the `userId` and `authToken` as described [here](get-started/setup/authenticate). Even though using JWT Auth token is optional, we recommend using it for additional security. Once a `User` has been authenticated, their profile can be seen within Velt's collaboration features. For example in the Comments feature, the User's name is shown by their comment and in `@mentions`. Additionally in the Presence and in Cursors features, the User's name is shown by their avatar bubble and mouse cursors. ### Sign in with force reset By default when you identify a **User**, we maintain the user auth in the browser unless you explicitly sign out the logged in user. If you are changing a User's access or any metadata and want those changes to be reflected immediately, then you should re-call the `identify` method with `forceReset` option set to `true`. Learn more [here](get-started/setup/authenticate). # null Source: https://docs.velt.dev/key-concepts/users/sign-out-user In a given session or browser tab, if you want to switch users, you need to first signout the current user and then sign in using `identify` method again. This will ensure we clean up the current user session and start a new session with the new user. ```jsx client.signOutUser(); ``` # Export Cord Data for Migration Source: https://docs.velt.dev/migration/cord-migration/export-cord-data-for-migration ### Note: * These APIs have pagination built-in and return 1000 entries by default. Either extend the limit or loop over the pages to get all the data. * Send data pulled from each API in a separate JSON file. ## Comments Use the following Cord REST APIs to pull all the comments-related data and export it as a JSON file: • [Threads](https://docs.cord.com/rest-apis/threads) • [Messages](https://docs.cord.com/rest-apis/messages) • [Users](https://docs.cord.com/rest-apis/users) • [Groups](https://docs.cord.com/rest-apis/groups) ## Comment File Attachments When you pull thread and message data using the above APIs, the file attachment URL is also present in the data. However, those URLs expire. You have two options for migration: **Option 1**: You can use the URL to download the files and upload them to your cloud. Send us the new file attachment URLs in the following format in a JSON file: Sample Format: ```jsx [{ "documentId": "", "userId": "", "messageId": "", "type": "file", "fileData": { "id": "", "type": "file", "name": "", "url": "", "mimeType": "MIME_TYPE", "size": 6278949, "uploadStatus": "uploaded" }, "fileUrl": "" }] ``` **Option 2**: Schedule file migration date with us so you can pull the latest comments data, which will have fresh file access tokens. Then we can download/store it on our end, and update the URLs ourselves. ## Notifications Given the ephemeral nature of notifications, we don't think you need to migrate them. However, if you do want us to migrate your notifications data, you could use this API to get the notifications data from Cord: * [Notifications](https://docs.cord.com/rest-apis/notifications) # Overview Source: https://docs.velt.dev/migration/cord-migration/migration-process-overview Cord has shut down their service. We are providing a migration path for all the Cord users to migrate to Velt. ## Migration Process Overview * Download the cord data in JSON format using their REST APls. Send it to us using a secure file-sharing system. * We have an internal service written to transform that data and add it to your Velt account. You need not use our APls for this. We will do it for you. * It will take about a week for the end-to-end migration process. We can expedite it to be 1-2 days if it's more urgent for you. * If you prefer, we can also help you migrate over to Velt on production over a weekend so that your customers don't notice any changes. ## Migration Steps Give us access to a test account in your app where Cord is implemented. It should contain some cord comments. Export the Cord data from the above test account and send it to us. [Learn more](https://docs.velt.dev/migration/cord-migration/export-cord-data-for-migration) We will migrate that small sample first and verify it with you. Once everything looks good, you will send all of the Cord data as JSON files. We will do a test run on the entire dataset. Schedule a migration date: On this date, all your cord production data (as of this date) with Velt implemented in your app will go live. # Overview Source: https://docs.velt.dev/notifications/email/overview You can enable email notifications to send out emails whenever you `@mention` a user in the Comments feature or when another user replies to your comment. There are two ways to trigger email notifications: Webhooks and SendGrid. ### 1. Webhooks To learn how to trigger email notifications via Webhooks please refer [here](https://docs.velt.dev/webhooks/overview). ### 2. SendGrid Integration To enable Email Notifications, go to the Configurations -> Email Service in the Velt Console, or [click here](https://console.velt.dev/dashboard/config/email). For SendGrid integration, provide the following details: * SendGrid API Key * SendGrid Email Template ID for Comments feature * 'From' Email Address The 'From' Email Address needs to be whitelisted from your SendGrid account or else it will not work. ## Email Template Data The following fields are sent to Sendgrid: | Field | Type | Description | | ----------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------- | | firstComment | Object | first message in the thread. Contains `commentId`, `commentText` and `from` properties derived from Comment class. | | latestComment | Object | latest message in the thread that prompted the email. Contains `commentId`, `commentText` and `from` properties derived from Comment class. | | prevComment | Object | the previous message to the latestMessage. Contains `commentId`, `commentText` and `from` properties derived from Comment class. | | commentsCount | string | total number of comments in the comment annotation | | fromUser | string | action user's object | | commentAnnotation | Object | the comment annotation object without the `comments` field | | actionType | Object | the action that resulted in the notification | These are the older fields that will be deprecated soon. These are already contained in the fields above: | Field | Type | Description | | --------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | message | string | the message of the email | | messageFromName | string | the name of whoever wrote the message that the email is referencing. If name is not found then it will contain the email. | | name | string | the name of the person who performed the action that triggered the email. If name is not found then it will contain the email. Sometimes a notification can be triggered without a message. For those cases, you can use this. | | fromEmail | string | email address of the user who performed the action | | photoUrl | string | avatar URL of user | | pageUrl | string | url of the page the comment is on | | pageTitle | string | title of the web page | | deviceInfo | Object | contains browser, OS and device info | | subject | string | subject of the email | ## Sample Email Template ![](https://mintlify.s3.us-west-1.amazonaws.com/velt/images/email-template.png) We have provided this sample HTML email template you can use for your SendGrid email template: \[Download Link (Right click and view source)][https://firebasestorage.googleapis.com/v0/b/snippyly.appspot.com/o/external%2Femail-template.html?alt=media\&token=16a17614-70ca-464c-b6f4-2b2b097b0007](https://firebasestorage.googleapis.com/v0/b/snippyly.appspot.com/o/external%2Femail-template.html?alt=media\&token=16a17614-70ca-464c-b6f4-2b2b097b0007)) ```html Email Template
@here testing here functionality
    
``` # Customize Behavior Source: https://docs.velt.dev/realtime-collaboration/cursors/customize-behavior ## avatarMode * Show the user's avatar floating next to their cursor instead of their name. * Enabling this mode will allow you to show the user's avatar in context with the cursor. ```js ``` ```html ``` ## setInactivityTime * Set the time it takes for a user to go inactive in milliseconds. * By default we mark a user as inactive if they do not take any action on the document within a 5 mins timeframe. * If they unfocus the tab, we mark them inactive immediately. ```js ``` Using API: ```js const cursorElement = client.getCursorElement(); cursorElement.setInactivityTime(300000); ``` ```html ``` Using API: ```js const cursorElement = Velt.getCursorElement(); cursorElement.setInactivityTime(300000); ``` ## allowedElementIds * Provide a list of element IDs where the cursors should show. * If you provide a list of element IDs, we will only show cursors that hover over those specific elements. * For eg: For an app with canvas and tool picker: You can whitelist the canvas ID so that the cursors are only visible on the canvas and not the tool picker. You must pass a string into allowedElementIds instead of an object ```js ``` Using API: ```js const cursorElement = client.getCursorElement(); cursorElement.allowedElementIds(['element-1', 'element-2']); ``` ```html ``` Using API: ```js const cursorElement = Velt.getCursorElement(); cursorElement.allowedElementIds(['element-1', 'element-2']); ``` ## onCursorUserChange * Whenever the cursor for any user changes, we emit this event with the updated list of users currently online on this document with their cursor positions. ```js yourMethod(cursorUsers)} /> ``` ```js if(Velt){ const cursorTag = document.querySelector('velt-cursor'); cursorTag.addEventListener('onCursorUserChange', (event) => { console.log("onCursorUserChange", event.detail); }); } ``` ## getOnlineUsersOnCurrentDocument * Subscribe to a list of all online users who are either active or inactive on the current document. ```jsx const cursorElement = client.getCursorElement(); cursorElement.getOnlineUsersOnCurrentDocument().subscribe((cursorUsers) => { console.log("Online users: ", cursorUsers); }); ``` ```jsx const cursorElement = Velt.getCursorElement(); cursorElement.getOnlineUsersOnCurrentDocument().subscribe((cursorUsers) => { console.log("Online users: ", cursorUsers); }); ``` # Overview Source: https://docs.velt.dev/realtime-collaboration/cursors/overview Your users can view each other's cursors when interacting on the same document. This makes your app more alive. We handle the complexity of adapting the cursors to different screen sizes, differences in content etc.