Comments

Threads

addCommentAnnotation()

Add a new comment annotation.

deleteCommentAnnotation()

Delete a comment annotation.

addCommentOnSelectedText()

Add a comment on selected text.

addCommentOnElement()

Add a comment on a specific element.

  • Params: { targetElement: object, commentData: array, status?: string }
  • Returns: void
  • React Hook: n/a
  • Full Documentation →

addManualComment()

Add a comment with custom positioning.

deleteSelectedComment()

Delete the currently selected comment.

getElementRefByAnnotationId()

Get the DOM element reference for a comment annotation.

getAllCommentAnnotations()

Get all comment annotations.

  • Params: documentId?: string, location?: object
  • Returns: Observable<CommentAnnotation[]>
  • React Hook: useCommentAnnotations()
  • Full Documentation →

getUnreadCommentAnnotationCountOnCurrentDocument()

Get count of unread comment annotations on current document.

  • Params: none
  • Returns: Observable<UnreadCommentsCount | null>
  • React Hook: useUnreadCommentAnnotationCountOnCurrentDocument()
  • Full Documentation →

getUnreadCommentAnnotationCountByLocationId()

Get count of unread comment annotations by location ID.

  • Params: locationId: string
  • Returns: Observable<UnreadCommentsCount | null>
  • React Hook: useUnreadCommentAnnotationCountByLocationId()
  • Full Documentation →

getSelectedComments()

Get currently selected comment annotations.

getCommentAnnotationById()

Get a specific comment annotation by ID.

  • Params: { annotationId: string, documentId?: string }
  • Returns: Observable<CommentAnnotation>
  • React Hook: useCommentAnnotationById()
  • Full Documentation →

Messages

addComment()

Add a comment to a specific comment annotation.

updateComment()

Update a comment in a specific comment annotation.

deleteComment()

Delete a comment from a specific comment annotation.

getComment()

Get comments from a specific comment annotation.

getUnreadCommentCountOnCurrentDocument()

Get the number of unread comments on the current document.

  • Params: none
  • Returns: Observable<UnreadCommentsCount | null>
  • React Hook: useUnreadCommentCountOnCurrentDocument()
  • Full Documentation →

getUnreadCommentCountByLocationId()

Get the number of unread comments by location ID.

  • Params: locationId: string
  • Returns: Observable<UnreadCommentsCount | null>
  • React Hook: useUnreadCommentCountByLocationId()
  • Full Documentation →

getUnreadCommentCountByAnnotationId()

Get the number of unread comments by annotation ID.

  • Params: annotationId: string
  • Returns: Observable<number>
  • React Hook: useUnreadCommentCountByAnnotationId()
  • Full Documentation →

@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 →

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 →

assignUser()

Assign a user to a comment annotation.

enableUserMentions()

Enable or disable user @mentions.

onContactSelected()

Listen for when a contact is selected from the dropdown.

  • Params: none
  • Returns: Observable<UserContactSelectedPayload>
  • React Hook: useContactSelected()
  • Full Documentation →

enableAtHere()

Enable or disable @here mentions.

setAtHereLabel()

Customize the @here label text.

setAtHereDescription()

Customize the @here description text.

subscribeCommentAnnotation()

Subscribe to a comment annotation.

unsubscribeCommentAnnotation()

Unsubscribe from a comment annotation.

Metadata

addContext()

Add custom metadata to a comment annotation.

  • Params: { [key: string]: any }
  • Returns: void
  • React Hook: useCommentEventCallback('addCommentAnnotation')
  • Full Documentation →

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 →

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 →

addCustomListDataOnComment()

Add a custom dropdown list that appears when a hotkey is pressed in the comment composer.

  • Params: { hotkey: string, type: 'custom', data: Array<AutocompleteItem> }
  • Returns: void
  • React Hook: useCommentUtils()
  • Full Documentation →

onAutocompleteChipClick()

Listen for clicks on autocomplete chips in comments.

  • Params: none
  • Returns: Observable<AutocompleteItem>
  • React Hook: useAutocompleteChipClick()
  • Full Documentation →

Event Subscription

on()

Subscribe to comment events.

  • Params: CommentEventType. Here is the list of events you can subscribe to.
  • Returns: Observable<CommentEventTypesMap[T]>. Here is the list of events object types you can expect to receive: CommentEventTypesMap
  • React Hook: useCommentEventCallback(CommentEventType)
  • Full Documentation →

Attachments

enableAttachments()

Enable file attachments in comments.

addAttachment()

Add an attachment to a specific comment annotation.

deleteAttachment()

Delete an attachment from a specific comment annotation.

getAttachment()

Get attachments from a specific comment annotation.

Reactions

enableReactions()

Enable emoji reactions in comments.

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 →

addReaction()

Add a reaction to a specific comment annotation.

deleteReaction()

Delete a reaction from a specific comment annotation.

toggleReaction()

Toggle a reaction for a specific comment annotation.

Status & Priority

enableStatus()

Enable status dropdown & filters in comments.

setCustomStatus()

Set custom statuses by passing an array of status objects.

enableResolveButton()

Enable resolve button on comments.

updateStatus()

Update the status of a comment annotation.

resolveCommentAnnotation()

Resolve a comment annotation.

enablePriority()

Enable priority settings in comments.

setCustomPriority()

Set custom priorities by passing an array of priority objects.

updatePriority()

Update the priority of a comment annotation.

Recordings

deleteRecording()

Delete a recording from a comment.

getRecording()

Get recordings from a comment.

setAllowedRecordings()

Set allowed recording types (audio, video, screen).

enableRecordingCountdown()

Enable countdown before recording starts.

enableRecordingTranscription()

Enable AI transcription for recordings.

Get a link to a specific comment annotation.

Copy a link to a specific comment annotation to clipboard.

scrollToCommentByAnnotationId()

Scroll the page to a comment’s location.

selectCommentByAnnotationId()

Programmatically select a comment annotation.

onCommentSelectionChange()

Subscribe to comment selection changes.

  • Params: none
  • Returns: Observable<CommentSelectionChangeData>
  • React Hook: useCommentSelectionChangeHandler()
  • Full Documentation →

enablescrollToComment()

Enable automatic scrolling to comments.

DOM Controls

allowedElementIds()

Set allowed element IDs for commenting.

allowedElementClassNames()

Set allowed element class names for commenting.

allowedElementQuerySelectors()

Set allowed element query selectors for commenting.

AI Categorization

enableAutoCategorize()

Enable AI auto-categorization of comments.

setCustomCategory()

Set custom categories for comment categorization.

  • Params: categories: Array<{id: string, name: string, color: string}>
  • Returns: void
  • React Hook: n/a
  • Full Documentation →

UI

updateCommentDialogPosition()

Update position of comment dialog relative to pin.

enableSidebarButtonOnCommentDialog()

Enable sidebar button on comment dialogs.

onSidebarButtonOnCommentDialogClick()

Subscribe to clicks on comment dialog sidebar button.

  • Params: none
  • Returns: Observable<any>
  • React Hook: useCommentDialogSidebarClickHandler()
  • Full Documentation →

enableDeleteReplyConfirmation()

Enable confirmation dialog before deleting replies.

enableMobileMode()

Enable mobile-optimized comment UI.

enableCommentPinHighlighter()

Enable highlighting outline around comment pins.

showCommentsOnDom()

Show comments on the DOM.

enableDialogOnHover()

Enable showing comment dialog on hover.

enableFloatingCommentDialog()

Enable floating comment dialog next to pins.

showResolvedCommentsOnDom()

Show resolved comments on the DOM.

enableCollapsedComments()

Enable collapsing of comments in annotations.

enableShortUserName()

Enable shortening of long user names.

enableSignInButton()

Enable sign in button on comment dialog when user is anonymous or signed out.

onSignIn()

Handle sign in button click event.

Extra Information

enableCommentIndex()

Enable comment index indicators on pins and sidebar.

enableDeviceInfo()

Enable device type indicators in comment threads.

enableDeviceIndicatorOnCommentPins()

Enable device type indicators on comment pins.

enableGhostComments()

Enable showing ghost comments on the DOM.

enableGhostCommentsIndicator()

Enable ghost comment labels in the sidebar.

Keyboard Controls

enableHotkey()

Enable hotkeys for comments (e.g. ‘c’ to enable comment mode).

enableEnterKeyToSubmit()

Enable using Enter key to submit comments.

enableDeleteOnBackspace()

Enable deleting comments with backspace key.

Moderation

enableModeratorMode()

Enable moderator mode for comments requiring approval.

enableResolveStatusAccessAdminOnly()

Restrict resolve action to admin users and comment authors.

approveCommentAnnotation()

Approve a comment annotation in moderator mode.

  • Params: ApproveCommentAnnotationRequest
  • Returns: Promise<ApproveCommentAnnotationEvent>
  • React Hook: useApproveCommentAnnotation()
  • Full Documentation →

acceptCommentAnnotation()

Accept a comment annotation in suggestion mode.

  • Params: AcceptCommentAnnotationRequest
  • Returns: Promise<AcceptCommentAnnotationEvent>
  • React Hook: useAcceptCommentAnnotation()
  • Full Documentation →

rejectCommentAnnotation()

Reject a comment annotation in suggestion mode.

  • Params: RejectCommentAnnotationRequest
  • Returns: Promise<RejectCommentAnnotationEvent>
  • React Hook: useRejectCommentAnnotation()
  • Full Documentation →

enableSuggestionMode()

Enable suggestion mode for accepting/rejecting comments.

updateAccess()

Update access permissions for a comment annotation.

  • Params: UpdateAccessRequest
  • Returns: Promise<UpdateAccessEvent>
  • React Hook: useUpdateAccess()
  • Full Documentation →

enablePrivateCommentMode()

Enable private comment mode for admin-only comments.

Comment Read Status

enableSeenByUsers()

Enable “Seen By” feature to show which users have seen each comment.

setUnreadIndicatorMode()

Set unread indicator mode to either minimal (dot) or verbose (badge).

Toggle Comment Types

enableAreaComment()

Enable area comments that allow drawing rectangles with comments.

enableInboxMode()

Enable inbox mode for comments.

enablePopoverMode()

Enable popover mode for comments.

enableStreamMode()

Enable stream mode for comments.

enableTextMode()

Enable text mode for comments.

enableInlineCommentMode()

Enable inline comment mode to show comments under associated text.

enableMultithread()

Enable multithreaded comments.

Comment Tool

enableCommentMode()

Enable comment mode to allow attaching comments to DOM elements.

onCommentModeChange()

Subscribe to changes in comment mode state.

enableCommentTool()

Enable/disable the comment tool button.

enableChangeDetectionInCommentMode()

Enable DOM change detection while in comment mode.

enablePersistentCommentMode()

Enable persistent comment mode to continue leaving comments after finishing one.

setPinCursorImage()

Set custom cursor image for comment mode.

Minimap

enableMinimap()

Enable minimap showing comment locations on screen edge.

Popover Comments

enableDialogOnTargetElementClick()

Enable opening comment dialog on target element click in popover mode.

enablePopoverTriangleComponent()

Enable triangle indicator on popover comments.

Video Timeline Comments

setTotalMediaLength()

Set the total length of media (in frames or seconds) for the timeline.

Comment Pin

enableBubbleOnPin()

Show a Comment Bubble when hovering/clicking on Comment Pin instead of Comment Dialog.

enableBubbleOnPinHover()

Show Comment Bubble on hover vs click for Comment Pins.

Comments Sidebar

Custom filtering, sorting and grouping

enableSidebarCustomActions()

Enable custom filtering, sorting and grouping actions in the comments sidebar.

setCommentSidebarData()

Set filtered/sorted/grouped data in the comments sidebar.

  • Params: data: CommentSidebarData[], options?: {grouping?: boolean}
  • Returns: void
  • React Hook: n/a
  • Full Documentation →

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 →

enableSidebarUrlNavigation()

Enable automatic URL navigation when clicking comments in the sidebar.

UI

openCommentSidebar()

Open the comments sidebar.

closeCommentSidebar()

Close the comments sidebar.

toggleCommentSidebar()

Toggle the comments sidebar open/closed state.

excludeLocationIdsFromSidebar()

Filter out comments from specified locations in the sidebar.

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 →

Notifications

getNotificationsData()

Get the notifications data for the current user.

onNotificationClick()

Listen for notification click events in the Notifications Panel.

setTabConfig()

Customize notification tab names and visibility.

setMaxDays()

Set maximum age in days for displayed notifications.

enableReadNotificationsOnForYouTab()

Show read notifications in the “For You” tab.

getUnreadNotificationsCount()

Get count of unread notifications by tab.

  • Params: none
  • Returns: Observable<{forYou: number, all: number}>
  • React Hook: useUnreadNotificationsCount()
  • Full Documentation →

setAllNotificationsAsRead()

Mark all notifications as read globally or by tab.

markNotificationAsReadById()

Mark a specific notification as read.

Recorder

enableRecordingCountdown()

Controls whether to display a countdown timer before a recording starts.

enableRecordingTranscription()

Controls whether to enable AI transcription for recordings.

getRecordingDataByRecorderId()

Fetches recording data (transcript, summary, and URLs) for a recording ID.

  • Params: recorderId: string
  • Returns: Observable<RecorderData>
  • React Hook: useRecordingDataByRecorderId()
  • Full Documentation →

onDelete()

Handle deletion events for recordings.

onRecordedData()

Subscribe to recording completion events.

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 →

View Analytics

getUniqueViewsByUser()

Get unique views by user, optionally filtered by location.

  • Params: locationId?: string
  • Returns: Observable<ViewsByUser[]>
  • React Hook: useUniqueViewsByUser()
  • Full Documentation →

getUniqueViewsByDate()

Get unique views by date, optionally filtered by location.

  • Params: locationId?: string
  • Returns: Observable<ViewsByDate[]>
  • React Hook: useUniqueViewsByDate()
  • Full Documentation →

Live State Sync

getLiveStateData()

Retrieves live state data as an observable based on the provided ID.

setLiveStateData()

Sets live state data for the provided ID and data.

Single Editor Mode

enableSingleEditorMode()

Enables the single editor mode with an optional configuration.

disableSingleEditorMode()

Disables the single editor mode.

isUserEditor()

Checks if the current user is an editor. Returns an observable.

getEditor()

Retrieves the current editor information.

setUserAsEditor()

Sets the current user as an editor.

resetUserAccess()

Resets the user access.

singleEditorModeContainerIds()

Disables elements inside specific elements only when single editor mode is on.

enableAutoSyncState()

Enables the autosync state feature.

requestEditorAccess()

Initiates a request for editor access.

isEditorAccessRequested()

Checks if editor access has been requested.

  • Params: none
  • Returns: Observable<{ requestStatus: string, requestedBy: User } | null>
  • React Hook: n/a
  • Full Documentation →

acceptEditorAccessRequest()

Accepts an editor access request.

rejectEditorAccessRequest()

Rejects an editor access request.

cancelEditorAccessRequest()

Cancels an editor access request.

editCurrentTab()

Edits the current tab.

setEditorAccessTimeout()

Sets a timeout for editor access. (in milliseconds)

enableEditorAccessTransferOnTimeOut()

Enables the transfer of editor access on timeout.

enableDefaultSingleEditorUI()

Enables the default UI for single editor mode.

Cursors

setInactivityTime()

Set the time it takes for a user’s cursor to be marked as inactive.

allowedElementIds()

Set specific element IDs where cursors should be shown.

onCursorUserChange()

Subscribe to cursor position changes for all users.

Presence

setInactivityTime()

Set the time it takes for a user to be marked as inactive.

enableSelf()

Include the current user in the list of presence users.

onPresenceUserChange()

Subscribe to presence changes for all users.

  • Params: callback: (presenceUsers: PresenceUser[]) => void
  • Returns: void
  • React Hook: n/a
  • Full Documentation →

onPresenceUserClick()

Handle click events on presence avatar circles.

getOnlineUsersOnCurrentDocument()

Subscribe to a list of all online users who are either active or inactive on the current document.

Follow Mode

enableFlockMode()

Enable Follow Me mode globally wherever Presence is shown.

startFollowingUser()

Start following a specific user.

stopFollowingUser()

Stop following the current user.

onNavigate()

Handle navigation events during Follow Me sessions.

Huddle

enableChat()

Enable the ephemeral chat feature in Huddle.

enableFlockModeOnAvatarClick()

Enable Follow Me mode when clicking on a user’s avatar in Huddle.

Live Selection

enableDefaultElementsTracking()

Enable automatic tracking of user presence on default element types (input, textarea, button, contenteditable).

enableUserIndicator()

Enable the user indicator (avatar/name label) that appears near selected elements.

setUserIndicatorPosition()

Set the position of the user indicator globally.

setUserIndicatorType()

Set the type of user indicator globally.

getLiveSelectionData()

Get the live selection data for the current document.

  • Params: none
  • Returns: Observable<LiveSelectionData>
  • React Hook: useLiveSelectionDataHandler()
  • Full Documentation →

AI

enableRewriter()

Enable the rewriter.

  • Signature: enableRewriter()
  • Params: n/a
  • Returns: void
  • React Hook: n/a

Core

Client

initConfig()

Used to set up initial configurations for the Velt SDK.

  • Params: apiKey: string, config?: Config
  • Returns: void
  • React Hook: n/a

getVeltInitState()

Subscribe to detect whether Velt is initialized.

  • Params: void
  • Returns: Observable<boolean>
  • React Hook: useVeltInitState()

getMetadata()

Get the currently set organization, document and location objects.

  • Params: none
  • Returns: Promise<VeltEventMetadata>
  • React Hook: n/a

injectCustomCss()

To inject custom CSS within Components with Shadow DOM enabled.

  • Params: customCss: CustomCss
  • Returns: void
  • React Hook: n/a

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

Authentication

identify()

Used to authenticate the client’s user with the Velt SDK.

  • Params: user: User, userOptions?: UserOptions
  • Returns: Promise<unknown>
  • React Hook: useIdentify()

signOutUser()

To sign out a user.

  • Params: void
  • Returns: any
  • React Hook: n/a

Document

setDocument()

Used to initialize a Document.

  • Params: documentId: string, options?: DocumentOptions
  • Returns: void
  • React Hook: useSetDocument()
  • Full Documentation →

unsetDocumentId()

Used to unset a Document when Velt is not needed for parts of your app.

getDocumentMetadata()

Get the metadata of a Document, useful for displaying document name or custom metadata.

Location

setLocation()

Used to 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 →

removeLocation()

Used to 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 →

Event Subscription

on()

Subscribe to Velt core events

  • Params: eventType: string. Here is the list of events you can subscribe to.
  • Returns: Observable<VeltEventTypesMap[T]>. It will return one of the objects from here
  • React Hook: useVeltEventCallback()

Feature Utilities

getPresenceElement()

Get the Presence Element Object to access the raw presence data.

  • Params: void
  • Returns: PresenceElement
  • React Hook: n/a

getCursorElement()

Get the Cursor Element Object to access the raw cursor data.

  • Params: void
  • Returns: CursorElement
  • React Hook: n/a

getCommentElement()

Get the Comment Element Object to access the raw comment data.

  • Params: void
  • Returns: CommentElement
  • React Hook: useCommentUtils()

getSelectionElement()

Get the Selection Object to enable/disable the feature.

  • Params: void
  • Returns: SelectionElement
  • React Hook: n/a

getRecorderElement()

Get the Recorder Object.

  • Params: void
  • Returns: RecorderElement
  • React Hook: n/a

getContactElement()

Get the Contact Object.

  • Params: void
  • Returns: ContactElement
  • React Hook: n/a

getRewriterElement()

Get the Rewriter Object.

  • Params: void
  • Returns: RewriterElement
  • React Hook: n/a

getLiveStateSyncElement()

Get the LiveStateSync Object.

  • Params: void
  • Returns: LiveStateSyncElement
  • React Hook: n/a

getArrowElement()

Get the Arrow Object.

  • Params: void
  • Returns: ArrowElement
  • React Hook: n/a

Feature Gating

isUserAllowed$()

To check if user is allowed in provided document or not.

  • Params: void
  • Returns: Observable<boolean>
  • React Hook: n/a

disableFeatures()

Provide a list of features to disable. Provide an empty array to enable all the features.

  • Params: features: Array<FeatureType>
  • Returns: void
  • React Hook: n/a

isPlanExpired$()

To check if plan is expired or not.

  • Params: void
  • Returns: Observable<boolean>
  • React Hook: n/a

Localization

setLanguage()

To set the language.

  • Params: language: string
  • Returns: void
  • React Hook: n/a

setTranslations()

To set the translations for the language.

  • Params: language: string, translations: { [key: string]: string }
  • Returns: void
  • React Hook: n/a

enableAutoTranslation()

To enable automatic translation of text in Velt Components based on User’s language preference.

  • Params: void
  • Returns: void
  • React Hook: n/a

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

removeScrollableElementsIds()

To remove document params from a User.

  • Params: void
  • Returns: void
  • React Hook: n/a