# null Source: https://docs.velt.dev/CLAUDE # Rewriter Source: https://docs.velt.dev/ai-copilot/design/overview Let AI suggest improvements to your website text ``` #### data-velt-pdf-viewer 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 theme={null}
``` #### svgAsImg * By default, Velt SDK treats SVGs as layered elements. * If you want to treat SVGs as flat images, you can use this. * Default: `false` **Using Props:** ```jsx theme={null} ``` **Using API:** ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enableSvgAsImg(); commentElement.disableSvgAsImg(); ``` **Using Props:** ```html theme={null} ``` **Using API:** ```html theme={null} const commentElement = client.getCommentElement(); commentElement.enableSvgAsImg(); commentElement.disableSvgAsImg(); ``` # 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 theme={null} ``` **Using API Method:** ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enableHotkey(); commentElement.disableHotkey(); ``` **Using Props:** ```html theme={null} ``` **Using API Method:** ```jsx theme={null} 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 theme={null} ``` **Using API Method:** ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enableEnterKeyToSubmit(); commentElement.disableEnterKeyToSubmit(); ``` **Using Props:** ```jsx theme={null} ``` **Using API Method:** ```jsx theme={null} 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 theme={null} ``` **Using API:** ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enableDeleteOnBackspace(); commentElement.disableDeleteOnBackspace(); ``` **Using Props:** ```jsx theme={null} ``` **Using API:** ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enableDeleteOnBackspace(); commentElement.disableDeleteOnBackspace(); ``` # Moderation #### enableModeratorMode 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 theme={null} ``` ```js theme={null} ``` API Method: ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enableModeratorMode(); commentElement.disableModeratorMode(); ``` ```jsx theme={null} const commentElement = Velt.getCommentElement(); commentElement.enableModeratorMode(); commentElement.disableModeratorMode(); ``` #### enableResolveStatusAccessAdminOnly * Restrict the resolve action to admin users and the comment author only. **Using props:** ```jsx theme={null} ``` **Using API:** ```javascript theme={null} 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 theme={null} ``` **Using API:** ```javascript theme={null} 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/data-models#approvecommentannotationrequest) * Returns: [ApproveCommentAnnotationEvent](/api-reference/sdk/models/data-models#approvecommentannotationevent) ```jsx theme={null} 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 theme={null} 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/data-models#acceptcommentannotationrequest) * Returns: [AcceptCommentAnnotationEvent](/api-reference/sdk/models/data-models#acceptcommentannotationevent) ```jsx theme={null} 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 theme={null} 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/data-models#rejectcommentannotationrequest) * Returns: [RejectCommentAnnotationEvent](/api-reference/sdk/models/data-models#rejectcommentannotationevent) ```jsx theme={null} 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 theme={null} const rejectCommentAnnotationRequest = { annotationId: 'ANNOTATION_ID' }; const commentElement = Velt.getCommentElement(); const rejectCommentAnnotationEventData = await commentElement.rejectCommentAnnotation(rejectCommentAnnotationRequest); ``` #### enableSuggestionMode Whether to enable suggestion mode to accept or reject comments. `Default: false` To accept comments, set the `suggestionMode` attribute to `true`. ```js theme={null} ``` To accept comments, set the `suggestion-mode` attribute to `true`. ```js theme={null} ``` API Method: ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enableSuggestionMode(); commentElement.disableSuggestionMode(); ``` ```jsx theme={null} const commentElement = Velt.getCommentElement(); commentElement.enableSuggestionMode(); commentElement.disableSuggestionMode(); ``` #### updateAccess * Updates access permissions for a comment annotation * Params: [UpdateAccessRequest](/api-reference/sdk/models/data-models#updateaccessrequest) * Returns: [UpdateAccessEvent](/api-reference/sdk/models/data-models#updateaccessevent) ```jsx theme={null} 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 theme={null} const updateAccessRequest = { annotationId: 'ANNOTATION_ID', accessMode: 'private'; } }; const commentElement = Velt.getCommentElement(); const updateAccessEvent = await commentElement.updateAccess(updateAccessRequest); ``` #### enablePrivateComments * 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 theme={null} ``` To enable private comment mode, set the `private-comment-mode` attribute to `true`: ```html theme={null} ``` API Methods: API to enable/disable private comment mode: ```jsx theme={null} const commentElement = client.getCommentElement(); // To enable private comment mode commentElement.enablePrivateCommentMode(); // To disable private comment mode commentElement.disablePrivateCommentMode(); ``` ```jsx theme={null} 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 theme={null} ``` Using API: ```js theme={null} const commentElement = client.getCommentElement(); commentElement.enableReadOnly(); commentElement.disableReadOnly(); ``` Using Props: ```html theme={null} ``` Using API: ```js theme={null} 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 theme={null} ``` **Using API:** ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enableSeenByUsers(); commentElement.disableSeenByUsers(); ``` **Using Props:** ```html theme={null} ``` **Using API:** ```javascript theme={null} 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`. ```jsx theme={null} ``` ```jsx theme={null} ``` API Method: ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.setUnreadIndicatorMode("verbose"); // use badge with text UNREAD commentElement.setUnreadIndicatorMode("minimal"); // use small red dot indicator ``` ```jsx theme={null} 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` **Using Props:** ```jsx theme={null} ``` **Using API Method:** ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enableAreaComment(); commentElement.disableAreaComment(); ``` **Using Props:** ```jsx theme={null} ``` Using API Method: ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enableAreaComment(); commentElement.disableAreaComment(); ``` #### enablePopoverMode For a complete setup guide for Popover mode, [read here](/async-collaboration/comments/setup/popover). Whether Popover Mode is enabled. Default: `false` ```jsx theme={null} ``` **Using API:** ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enablePopoverMode(); commentElement.disablePopoverMode(); ``` ```jsx theme={null} ``` **Using API:** ```jsx theme={null} 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 theme={null} ``` **Using API:** ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enableStreamMode(); commentElement.disableStreamMode(); ``` ```jsx theme={null} ``` **Using API:** ```jsx theme={null} 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` **Using Props:** ```jsx theme={null} ``` **Using API:** ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enableTextComments(); commentElement.disableTextComments(); ``` **Using Props:** ```html theme={null} ``` **Using API:** ```jsx theme={null} const commentElement = Velt.getCommentElement(); commentElement.enableTextComments(); commentElement.disableTextComments(); ``` #### enableInlineCommentMode 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 theme={null} ``` ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enableInlineCommentMode(); commentElement.disableInlineCommentMode(); ``` ```jsx theme={null} ``` ```jsx theme={null} 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). * Default: `false` ```jsx theme={null} ``` ```html theme={null} ``` # Comment Tool #### context * Add `context` to the `Velt Comment Tool` component to associate custom metadata with comments created using that tool. * Predefine context directly within the component itself. * Currently, this feature is specific to popover comments. This allows you to, for example, assign unique context to each cell in a table if you place a `Velt Comment Tool` in each cell. * The `context` prop accepts an object with key-value pairs. ```jsx theme={null} // For popover comments ``` ```html theme={null} ``` #### enableCommentMode 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 programmatically turn on the commenting mode. ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enableCommentMode(); commentElement.disableCommentMode(); ``` ```jsx theme={null} const commentElement = Velt.getCommentElement(); commentElement.enableCommentMode(); commentElement.disableCommentMode(); ``` #### onCommentModeChange 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 theme={null} 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 theme={null} onCommentModeChange(mode)} /> ``` API method: ```jsx theme={null} let subscription = commentElement.onCommentModeChange().subscribe((mode) => { //mode contains the state after change }); ``` To unsubscribe from the subscription: ```jsx theme={null} subscription?.unsubscribe() ``` API method: ```jsx theme={null} const commentElement = Velt.getCommentElement(); let subscription = commentElement.onCommentModeChange().subscribe((mode) => { //mode contains the state after change }); ``` To unsubscribe from the subscription: ```jsx theme={null} subscription?.unsubscribe() ``` #### enableCommentTool 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 theme={null} ``` Using API methods: ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enableCommentTool(); commentElement.disableCommentTool(); ``` **Using Props:** ```html theme={null} ``` **Using API methods:** ```jsx theme={null} const commentElement = Velt.getCommentElement(); commentElement.enableCommentTool(); commentElement.disableCommentTool(); ``` #### disabled Disables the comment tool and prevents users from adding new comments. This is helpful when you want to temporarily or conditionally restrict comment creation while still allowing users to view existing comments. Default: `false` This prop disables the specific comment tool instance it is applied to; the `disableCommentTool()` API disables all comment tools globally. ```jsx theme={null} ``` ```html theme={null} ``` #### 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 theme={null} ``` **Using API Method:** ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enableChangeDetectionInCommentMode(); commentElement.disableChangeDetectionInCommentMode(); ``` **Using Props:** ```html theme={null} ``` **Using API Method:** ```jsx theme={null} 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 theme={null} ``` ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enablePersistentCommentMode(); commentElement.disablePersistentCommentMode(); ``` ```jsx theme={null} ``` ```jsx theme={null} const commentElement = Velt.getCommentElement(); commentElement.enablePersistentCommentMode(); commentElement.disablePersistentCommentMode(); ``` #### forceCloseAllOnEsc * When enabled, pressing the ESC key will force close persistent comment mode even if a comment thread is currently active. * When disabled (default), pressing ESC will only close the active comment thread but keep persistent comment mode enabled. * This provides more control over the ESC key behavior in persistent comment mode. Default: `false` ```jsx theme={null} ``` ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enableForceCloseAllOnEsc(); commentElement.disableForceCloseAllOnEsc(); ``` ```jsx theme={null} ``` ```jsx theme={null} const commentElement = Velt.getCommentElement(); commentElement.enableForceCloseAllOnEsc(); commentElement.disableForceCloseAllOnEsc(); ``` #### setPinCursorImage You can set custom mouse cursor when the comment mode is on. The custom cursor image must be **32 x 32 pixels**. ```jsx theme={null} ``` ```jsx theme={null} ``` API Methods: ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.setPinCursorImage(BASE64_IMAGE_STRING); ``` ```jsx theme={null} const commentElement = Velt.getCommentElement(); commentElement.setPinCursorImage(BASE64_IMAGE_STRING); ``` # Minimap #### enableMinimap * 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 theme={null} ``` **API Method:** ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enableMinimap(); commentElement.disableMinimap(); ``` ```jsx theme={null} ``` **API Method:** ```jsx theme={null} 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 theme={null}
{/* scrollable content */}
``` ```jsx theme={null}
``` # 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 theme={null} ``` ```html theme={null} ``` #### 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 theme={null} ``` ```html theme={null} ``` #### composerPosition * Change the position of the comment composer in the inline comments section to `top` or `bottom`. * Default: `bottom` ```jsx theme={null} ``` ```html theme={null} ``` # Popover Comments #### enableDialogOnTargetElementClick Whether the comment dialog opens when target element is clicked. This is relevant only for Popover mode. `Default: true` ```js theme={null} ``` ```js theme={null} ``` API Method: ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enableDialogOnTargetElementClick(); commentElement.disableDialogOnTargetElementClick(); ``` ```jsx theme={null} const commentElement = Velt.getCommentElement(); commentElement.enableDialogOnTargetElementClick(); commentElement.disableDialogOnTargetElementClick(); ``` #### enablePopoverTriangleComponent Whether the popover triangle appears when Popover Mode is enabled. `Default: true` ```jsx theme={null} ``` ```jsx theme={null} ``` API Method: ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enablePopoverTriangleComponent(); commentElement.disablePopoverTriangleComponent(); ``` ```jsx theme={null} const commentElement = Velt.getCommentElement(); commentElement.enablePopoverTriangleComponent(); commentElement.disablePopoverTriangleComponent(); ``` # Comment Bubble #### annotationId * The id of the comment annotation to show the comment bubble on. * The bubble will be rendered only if there is a comment annotation that matches the provided `annotationId` in the current document. ```jsx theme={null} ``` ```html theme={null} ``` #### targetElementId * The DOM ID of the element where comment bubble is added. * This binds the comment bubble to the element with the provided ID. * The bubble will be rendered only if there is a comment annotation that was added to the element with the provided ID. ```jsx theme={null} ``` ```html theme={null} ``` #### context * The `context` object to filter which comment annotations to show the comment bubble for. * The bubble will be rendered only if there is a comment annotation that matches the provided `context` in the current document. * Works only with `popover` mode comments. * Perfect for complex tables with filtering and segmentation needs. * Set flexible comment anchoring and filtering logic at the cell level using key-value pairs. * **Supports aggregate views:** Eg: comments added in day view can appear in week/month views automatically. * Context commonly has combined use with [context options](#contextoptions) and the [group matched comments](#groupmatchedcomments) feature. ```jsx theme={null} // Full match // Partial match ``` ```html theme={null} ``` #### contextOptions * Matching behavior for the context object (default: full match, or set `partialMatch: true` for flexible matching). * **How Partial Match Works:** * A comment will match if ALL provided filter criteria exist in the comment's context * Extra fields in the comment's context don't prevent matching * Missing fields in the comment's context prevent matching * Example: Comment has `{ day: "01", week: "01", month: "jan", product: "cheese", location: "zurich" }` * Filter `{ day: "01", product: "cheese" }` → ✅ matches (both fields exist in comment) * Filter `{ day: "01", category: "dairy" }` → ❌ no match (category doesn't exist in comment) * **Partial Match Examples:** * Comment has `{ day: "01", week: "01", month: "jan", product: "cheese" }` * Filter with `{ day: "01", week: "01", month: "jan", product: "cheese" }` → matches (full) * Filter with `{ week: "01", month: "jan", product: "cheese" }` → matches (partial) * Filter with `{ day: "01", week: "01", month: "jan", product: "cheese", location: "zurich" }` → no match #### groupMatchedComments Whether to group multiple comment annotations in Comment Bubble component when multiple annotations match the provided `context` or `targetElementId`. Default: `false` **Using Props:** ```jsx theme={null} ``` **Using API:** ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enableGroupMatchedComments(); commentElement.disableGroupMatchedComments(); ``` **Using Props:** ```html theme={null} ``` **Using API:** ```jsx theme={null} const commentElement = Velt.getCommentElement(); commentElement.enableGroupMatchedComments(); commentElement.disableGroupMatchedComments(); ``` #### 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 theme={null} ``` ```jsx theme={null} ``` #### readOnly The `readOnly` flag prevents users from replying or editing existing comments in the target bubble while still displaying them. This is useful when you want to display comments in a read-only mode where users can view but not modify or respond to comments. Default: `false` ```jsx theme={null} ``` ```html theme={null} ``` # Video Timeline Comments #### setTotalMediaLength Set the total length of media (in frames or seconds) for the timeline. **Using Props:** ```jsx theme={null} ``` **Using API Method:** ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.setTotalMediaLength(120); ``` **Using Props:** ```html theme={null} ``` **Using API Method:** ```jsx theme={null} 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 theme={null} ``` ```html theme={null} ``` # 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 theme={null} ``` **Using API Method:** ```jsx theme={null} const commentElement = useCommentUtils(); commentElement.enableBubbleOnPin(); commentElement.disableBubbleOnPin(); ``` **Using Props:** ```jsx theme={null} ``` **Using API Method:** ```jsx theme={null} const commentElement = client.getCommentElement(); commentElement.enableBubbleOnPin(); commentElement.disableBubbleOnPin(); ``` **Using Props:** ```jsx theme={null} ``` **Using API Method:** ```jsx theme={null} 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 theme={null} ``` **Using API Method:** ```jsx theme={null} 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 theme={null} ``` **Using API Method:** ```jsx theme={null} 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 theme={null} ``` **Using API Method:** ```jsx theme={null} 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(); ``` # Legacy Methods #### onCommentAdd Using Props: ```js theme={null} yourMethod(event)} /> const yourMethod = (event) => { event?.addContext({ customKey: 'customValue' }); } ``` Using Hooks: ```jsx theme={null} import { useCommentAddHandler} from '@veltdev/react'; export default function YourDocument() { const commentAddEvent = useCommentAddHandler(); useEffect(() => { console.log('commentAddEvent', commentAddEvent); }, [commentAddEvent]); return (
) } ``` Using API: ```js theme={null} const commentElement = client.getCommentElement(); commentElement.onCommentAdd().subscribe((event) => { console.log('commentAddEvent', event); }); ``` Using Event listener: ```js theme={null} const veltCommentsTag = document.querySelector('velt-comments'); veltCommentsTag?.addEventListener('onCommentAdd', (event) => { console.log('*** onCommentAdd ***'); console.log(event.detail); event.detail?.addContext({ customKey: 'customValue' }); }); ``` Using API method: ```js theme={null} const commentElement = Velt.getCommentElement(); commentElement.onCommentAdd().subscribe((event) => { event?.addContext({ customKey: 'customValue' }); }); ``` **onCommentAdd Event Data Schema** | Field Name | Type | Description | | ------------------ | ----------------- | ------------------------------------------------------------------- | | addContext | Function | Use this to set custom data on the comment | | annotation | CommentAnnotation | The annotation that is associated with the comment that was updated | | documentId | string | The document ID where the comment was added | | location | Object | The location where the comment was added | | targetAnnotationId | string | The id of the target annotation | #### onCommentUpdate Using Props: ```js theme={null} yourMethod(event)} /> const yourMethod = (event) => { console.log('commentUpdateEvent', event); } ``` Using Hooks: ```jsx theme={null} import { useCommentUpdateHandler} from '@veltdev/react'; export default function YourDocument() { const commentUpdateEvent = useCommentUpdateHandler(); useEffect(() => { console.log('commentUpdateEvent', commentUpdateEvent); }, [commentUpdateEvent]); return (
) } ``` Using API: ```js theme={null} const commentElement = client.getCommentElement(); commentElement.onCommentUpdate().subscribe((event) => { console.log('commentUpdateEvent', event); }); ``` Using Event Listener: ```js theme={null} const veltCommentsTag = document.querySelector('velt-comments'); veltCommentsTag?.addEventListener('onCommentUpdate', (event) => { console.log('*** onCommentUpdate ***'); console.log(event.detail); }); ``` Using API method: ```js theme={null} const commentElement = Velt.getCommentElement(); commentElement.onCommentUpdate().subscribe((event) => { console.log('commentUpdateEvent', event); }); ``` **onCommentUpdate Event Data Schema** | Field Name | Type | Description | | ------------------ | ----------------- | -------------------------------------------------------------------------- | | annotation | CommentAnnotation | The annotation that is associated with the comment that was updated | | type | string | The type of comment that was updated | | targetAnnotationId | string | The ID of the target annotation that contains the comment that was updated | | targetCommentId | number | The ID of the target comment that was updated | | updateContext | Function | Use this to update the custom metadata on the comment annotation. | #### getAllCommentAnnotations * Get all comment annotations for a given document and location. * By default, it will return data for the current `documentId` and `location`. * Params (optional): * `documentId`: string; it will return all comments in the given `documentId`. * `location`: Object; it will return all comments in the given `location`. **Using Hooks:** ```jsx theme={null} const commentAnnotations = useCommentAnnotations(); useEffect(() => { if (commentAnnotations) { console.log('commentAnnotations', commentAnnotations); } }, [commentAnnotations]); ``` **Using API:** ```js theme={null} const commentElement = client.getCommentElement(); let subscription = commentElement.getAllCommentAnnotations().subscribe((comments) => { console.log('commentAnnotations', comments); }); ``` To unsubscribe from the subscription: ```jsx theme={null} subscription?.unsubscribe() ``` ```js theme={null} if (Velt) { const commentElement = Velt.getCommentElement(); let subscription = commentElement.getAllCommentAnnotations().subscribe((comments) => { // Do something with comments }); } ``` To unsubscribe from the subscription: ```jsx theme={null} subscription?.unsubscribe() ``` # Notifications Source: https://docs.velt.dev/async-collaboration/comments/notifications There are several options to send notifications to your users. There are three ways 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. ## In-app notifications Add notifications component within your app. Learn more about [In-app notifications](/async-collaboration/notifications/overview). ## Email notifications 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. ### Webhooks for non-SendGrid services To learn how to trigger email notifications via Webhooks please refer [here](/webhooks/basic). ### 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 | [Comment](/api-reference/sdk/models/data-models#comment) | First message in the thread. **Only Contains** `commentId`, `commentText` and `from` properties derived from Comment class. | | latestComment | [Comment](/api-reference/sdk/models/data-models#comment) | Latest message in the thread that prompted the email. **Only Contains** `commentId`, `commentText` and `from` properties derived from Comment class. | | prevComment | [Comment](/api-reference/sdk/models/data-models#comment) | Previous message to the latestMessage. **Only Contains** `commentId`, `commentText` and `from` properties derived from Comment class. | | commentsCount | string | Total number of comments in the comment annotation | | commentsCountMoreThanThree | string | Total number of remaining comments in the comment annotation beyond the three that this payload contains | | fromUser | [User](/api-reference/sdk/models/data-models#user) | Action user's object | | commentAnnotation | [CommentAnnotation](/api-reference/sdk/models/data-models#commentannotation) | The comment annotation object without the `comments` field | | actionType | string | The action that resulted in the notification. You can find the list of action types [here](/webhooks/basic#list-of-action-types) | | documentMetadata | [DocumentMetadata](/api-reference/sdk/models/data-models#documentmetadata) | The document metadata object | 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 Payload sent to SendGrid ```json expandable lines theme={null} { "fromName": "Tony via ", "fromEmail": "noreply@example.com", "replyTo": "tony@example.com", "templateId": "d-60ba77a7a42a4e55803487b40982b499", "toEmail": "jess@example.com", "properties": { "message": "@Jess", "messageFromName": "Tony", "name": "Tony", "fromName": "Tony via ", "fromEmail": "tony@trysnippyly.com", "photoUrl": "PHOTO_URL", "pageUrl": "https://example.com/?scommentId=4Fnt7zTvPv9ggE7OOTVG", "pageTitle": "Example Title", "deviceInfo": {...}, "subject": "added you to a comment on Example Title", "actionType": "newlyAdded", "fromUser": {...}, // User Object "commentAnnotation": {...}, // CommentAnnotation Object "commentsCount": 1, "firstComment": {...}, // Comment Object "prevComment": {...}, // Comment Object "commentsCountMoreThanThree": 0, "latestComment": {...}, // Comment Object "documentMetadata": {...} // DocumentMetadata Object } } ``` #### Download Sample Email Template We have provided this sample HTML email template you can use for your SendGrid email template: [Download Link](https://firebasestorage.googleapis.com/v0/b/snippyly.appspot.com/o/external%2Femail-template.html?alt=media\&token=16a17614-70ca-464c-b6f4-2b2b097b0007) ```html expandable lines theme={null} Email Template
@here testing here functionality
    
``` ## Webhooks Send notifications to other channels like Slack. Learn more about [Webhooks](/webhooks/basic). # 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://demo-examples.vercel.app/async/comments/area-comments?background=000\&theme=dark)     [View Setup for Freestyle Comments](/async-collaboration/comments/setup/freestyle)