> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Feature flags: what's hidden by default & how to enable it

> Reference hidden-by-default Velt UI features and the props or methods that enable them.

> [!NOTE]
>
> This list is generated from the Velt SDK and is complete for what it covers: a name that isn't listed here doesn't exist; don't guess names. Coverage is exhaustive for the **comments + notifications + core** default-state flags, the provider `config` object's key options, and the UI-affecting component flag-props; other features (recorder internals, huddle, video-editor, view-analytics, follow/live-state) appear only where they share a `<VeltComments>`/provider flag.

If your design shows a component/feature that doesn't appear out of the box, **it is often off by default**. Check here first: most features just need one prop (or an imperative `enable…()` call). Don't rebuild something Velt already has.

**How to read:**

* **Default** = the SDK's built-in state before you touch anything.
* **Enable via** = the exact React prop (on which component) and/or the imperative element method.
* **React props have no defaults of their own.** A prop you *omit* falls through to the SDK default below. So "OFF by default" features need you to pass the prop or call the method; "ON by default" features are turned **off** with `={false}`.

***

## Commonly missed flags

| Feature | Default | Enable via |
| - | - | - |
| **Reply avatars** (stacked reply-author avatars on the dialog) | **OFF** | `replyAvatars` on `<VeltComments>` · or `commentElement.enableReplyAvatars()`. Cap with `maxReplyAvatars` / `setMaxReplyAvatars()`. |
| **Sidebar button on the comment dialog** | **OFF** | `sidebarButtonOnCommentDialog` on `<VeltComments>` · or `commentElement.enableSidebarButtonOnCommentDialog()`. Click event: `onSidebarButtonOnCommentDialogClick`. Use the prop `sidebarButtonOnCommentDialog`; `sidebarButtonOnCommentDialogVisible` is the internal name, **not** a prop. |

***

## `<VeltComments>`: OFF by default (pass the prop / call enable to show)

| Feature | React prop | Imperative |
| - | - | - |
| Priority field | `priority` | `enablePriority()` (custom via `customPriority` / `setCustomPriority()`) |
| Visibility (private/team) options | `visibilityOptions` | `enableVisibilityOptions()` |
| Private comments | `privateCommentMode` *(deprecated)* | `enablePrivateMode(config)` |
| Reply avatars | `replyAvatars` | `enableReplyAvatars()` |
| Sidebar button on dialog | `sidebarButtonOnCommentDialog` | `enableSidebarButtonOnCommentDialog()` |
| Device info on pins | `deviceInfo` | `enableDeviceInfo()` (same flag as `enableDeviceIndicatorOnCommentPins()`) |
| Minimap | `minimap` (+ `minimapPosition`) | `enableMinimap()` |
| Ghost comments | `ghostComments` | `enableGhostComments()` *(≠ ghost-comment **indicator**, which is ON)* |
| Collapsed comments | `collapsedComments` | `enableCollapsedComments()` |
| Collapsed replies preview | `collapsedRepliesPreview` | `enableCollapsedRepliesPreview()` |
| Draft confirmation popup | `draftConfirmation` | `enableDraftConfirmation()` |
| Lazy-load resolved comments | `lazyLoadResolvedComments` | `enableLazyLoadResolvedComments()` |
| Persistent comment mode | `persistentCommentMode` | `enablePersistentCommentMode()` |
| Paginated contact list | `paginatedContactList` | `enablePaginatedContactList()` |
| Auto-categorize | `autoCategorize` | `enableAutoCategorize()` |
| Moderator mode | `moderatorMode` | `enableModeratorMode()` |
| Format options (rich-text toolbar) | `formatOptions` | `enableFormatOptions()` (config: `setFormatConfig()`) |
| Popover mode | `popoverMode` | `enablePopoverMode()` |
| Multi-thread | `multiThread` | `enableMultiThread()` |
| Group matched comments | None | `enableGroupMatchedComments()` |
| Screenshot capture | `screenshot` | `enableScreenshot()` |
| Enter key to submit | `enterKeyToSubmit` | `enableEnterKeyToSubmit()` |
| Comment index numbering | `commentIndex` | `enableCommentIndex()` |
| Bubble on pin | `bubbleOnPin` | `enableBubbleOnPin()` *(bubble-on-pin-**hover** is ON)* |
| Dialog on target-element click | `dialogOnTargetElementClick` | `enableDialogOnTargetElementClick()` |
| Inbox mode | `inboxMode` | `enableInboxMode()` |
| Stream mode | `streamMode` | `enableStreamMode()` |
| Sign-in button | `signInButton` | `enableSignInButton()` |
| Upgrade button | `upgradeButton` | `enableUpgradeButton()` |
| Hotkey | `hotkey` | `enableHotkey()` |
| Comment pin highlighter | `commentPinHighlighter` | `enableCommentPinHighlighter()` |
| Read-only | `readOnly` | `enableReadOnly()` |
| Dark mode (container) | `darkMode` | `enableDarkMode()` (sub-area: `dialogDarkMode`, `pinDarkMode`, …) |
| Context in page-mode composer | `contextInPageModeComposer` *(on `<VeltCommentTool>`)* | `enableContextInPageModeComposer()`: see [`Context`](https://velt.dev/docs/ui-customization/context) |
| `@here` mention | `atHereEnabled` | `contactElement.enableAtHere()` (+ `setAtHereLabel`/`setAtHereDescription`) |
| Add-comment / comment mode | None | `enableAddCommentMode()` (alias `enableCommentMode()`) |
| Change detection in comment mode | `changeDetectionInCommentMode` | `enableChangeDetectionInCommentMode()` |
| Comment to nearest allowed element | `commentToNearestAllowedElement` | `enableCommentToNearestAllowedElement()` |
| Custom autocomplete search | `customAutocompleteSearch` | `enableCustomAutocompleteSearch()` |
| Delete-reply confirmation | `deleteReplyConfirmation` | `enableDeleteReplyConfirmation()` |
| Filter comments on DOM | `filterCommentsOnDom` | `enableFilterCommentsOnDom()` |
| Filter ghost comments in sidebar | `filterGhostCommentsInSidebar` *(on `<VeltCommentsSidebar>`)* | `enableFilterGhostCommentsInSidebar()` |
| Force-close all on Esc | `forceCloseAllOnEsc` | `enableForceCloseAllOnEsc()` |
| Full-expanded dialog | `fullExpanded` | `enableFullExpanded()` |
| Full-screen in sidebar | *(sidebar prop is `fullScreen`)* | `enableFullScreenInSidebar()` |
| Inline comment mode | `inlineCommentMode` | `enableInlineCommentMode()` |
| Link callback | `linkCallback` | `enableLinkCallback()` |
| Query-params comments | `queryParamsComments` *(on `<VeltCommentsSidebar>`)* | `enableQueryParamsComments()` |
| Resolve status: admin only | `resolveStatusAccessAdminOnly` | `enableResolveStatusAccessAdminOnly()` |
| Sidebar custom actions | *(sidebar prop is `customActions`)* | `enableSidebarCustomActions()` |
| Sidebar URL navigation | *(sidebar prop is `urlNavigation`)* | `enableSidebarUrlNavigation()` |
| Suggestion mode | `suggestionMode` | `enableSuggestionMode()` |
| SVG as `<img>` (screenshot) | `svgAsImg` | `enableSvgAsImg()` |

## `<VeltComments>`: ON by default (turn **off** with `={false}`)

`reactions`, `attachments`, `attachmentDownload`, `status`, `userMentions`, `seenByUsers`, resolve button (`enableResolve`), `scrollToComment`, `dialogOnHover`, `floatingCommentDialog`, `commentTool`, `textMode` *(the prop is `textMode`, **not** `textComments`: `textComments` does not exist)*, `deleteOnBackspace`, `areaComment`, `bubbleOnPinHover`, `pinDrag`, ghost-comment **indicator**, and the shadow-DOM flags: `<VeltComments>` exposes `shadowDom`/`pinShadowDom`/`dialogShadowDom` (no `sidebarShadowDom` here); `<VeltCommentsSidebar>` uses `shadowDom`; `sidebarShadowDom` lives on the **sidebar-button** components.

These are **also ON by default**: turn off with `={false}` (or the imperative `disable…()`): `anonymousEmail` (`enableAnonymousEmail()`), `draftMode` (`enableDraftMode()`), floating comments (`enableFloatingComments()`: sidebar prop is `floatingMode`), `ghostCommentsMessage` (`enableGhostCommentsMessage()`), `mobileMode` (`enableMobileMode()`), `popoverTriangleComponent` (`enablePopoverTriangleComponent()`), `recordingSummary` (`enableRecordingSummary()`, deprecated alias of recording transcription), `shortUserName` (`enableShortUserName()`).

> [!WARNING]
>
> **`recordings` is a CSV string, not a boolean.** Default = all on (`audio,video,screen`); set `recordings="none"` to disable, or e.g. `recordings="audio,screen"`. (Also `setRecordings()`.)

***

## Other components

**`<VeltPresence>`**: `self` (include self in the presence list) is **ON** (disable with `self={false}`; imperative `presenceElement.enableSelf()` / `disableSelf()`: backed by the service's `includeSelf`). Flock/follow mode is **OFF** → `flockMode` / `presenceElement.enableFlockMode()`.
**`<VeltCursor>`**: avatar-mode cursors **OFF** → `avatarMode` (no imperative pair).
**`<VeltReactionTool>`**: dark mode **OFF** → `reactionElement.enableDarkMode()` (no React prop on the reaction tool).
**Notifications** (`<VeltNotificationsTool>`/`Panel`): settings UI **OFF** → `settings` / `enableSettings()`; org-level settings **OFF** → `enableSettingsAtOrganizationLevel` (imperative `enableSettingsAtOrganizationLevel()`, backed by the service's `enableSettingsConfigByOrganization`); self notifications **OFF** → `selfNotifications` / `enableSelfNotifications()`; read-on-ForYou **OFF** → `readNotificationsOnForYouTab` / `enableReadNotificationsOnForYouTab()`; cross-org feed **OFF** → `enableCrossOrganization` / `notificationElement.enableCrossOrganization()`; user-scoped feed **OFF** → `enableUserScopedNotifications` / `notificationElement.enableUserScopedNotifications()`.

## Imperative-only gates (no React prop: call `element.enable…()`)

* **Recorder:** video editor **OFF** → `recorderElement.enableVideoEditor()`; also `enableOnboardingTooltip()`, `enableRetakeOnVideoEditor()`, `enablePictureInPicture()`. Countdown/transcription/playback-on-preview are **ON** (`disableRecordingCountdown()`, `disableRecordingTranscription()`, `disablePlaybackOnPreviewClick()`). (Recorder dark mode + mic are **tri-state `null`**: neither on nor off until set: `enableDarkMode()`/`disableDarkMode()`, `enableRecordingMic()`/`disableRecordingMic()`.)
* **Notifications:** current-document-only scope **OFF** → `notificationElement.enableCurrentDocumentOnly()`.

***

## Provider `config` object (`<VeltProvider config={…}>`)

The provider's `config` object governs the whole SDK before any component renders: the **single biggest lever** you have when customizing. The keys below come from the `Config` type. All are optional.

| Key | Type | Default | What it does |
| - | - | - | - |
| `featureAllowList` | `FeatureType[]` | all features on | **Allow-list of features/components that may run.** If set, only the listed features render: everything else is suppressed before the UI renders. Use to ship comments-only or notifications-only. |
| `globalStyles` | `boolean` | `true` | Whether Velt's **global stylesheet loads at all.** Set `false` for fully bespoke styling (you then own all CSS). |
| `usePrefersColorScheme` | `boolean` | None | When `true`, Velt follows the OS `prefers-color-scheme` media query to pick light/dark globally. |
| `debugMode` | `boolean` | None | Enables debug logging (applies after a page refresh). |
| `proxyConfig` | `ProxyConfig` | None | Routes SDK traffic through reverse proxies. Sub-fields: `cdnHost`, `apiHost`, `v2DbHost`, `v1DbHost`, `storageHost`, `authHost` (all `string`), `forceLongPolling` (`boolean`). |
| `urlAllowList` | `string[]` | None | Restrict Velt to specific page URLs. |
| `userPlanAllowList` | `string[]` | None | Restrict Velt to specific user plans. |
| `userIdAllowList` | `string[]` | None | Restrict Velt to specific user IDs. |
| `userGroupIdAllowList` | `string[]` | None | Restrict Velt to specific group/team IDs. |
| `advancedQueriesDisabled` | `boolean` | None | Toggle advanced queries off. |
| `apiProxyDomain` | `string` | None | **Deprecated**: use `proxyConfig.apiHost`. |

> **Absence:** `Config` has **no** top-level `theme`, `css`, or `darkMode` key. Theming at the provider level is `usePrefersColorScheme`; stylesheet loading is `globalStyles`; `darkMode` is a **per-component** prop only.

## UI-affecting component flag-props (layout / variant / placeholders)

Beyond on/off feature flags, these props change a component's **layout, variant, or copy**.

**`<VeltCommentsSidebar>`**

| Prop | Type | What it does |
| - | - | - |
| `position` | `'right' \| 'left'` | Which side the sidebar docks to. |
| `embedMode` | `string` | Embed the sidebar inline vs floating. |
| `variant` | `string` | Named visual variant of the sidebar. |
| `filterPanelLayout` | `'menu' \| 'bottomSheet'` | Layout of the filter panel. |
| `filterOptionLayout` | `'checkbox' \| 'dropdown'` | Layout of individual filter options. |
| placeholders | `string` each | `pageModePlaceholder`, `searchPlaceholder`, `commentPlaceholder`, `replyPlaceholder`, `editPlaceholder`, `editCommentPlaceholder`, `editReplyPlaceholder` (individual props: there is no single `placeholders` object). |

**Notifications** (`<VeltNotificationsPanel>` / `<VeltNotificationsTool>`)

| Prop | Type | What it does |
| - | - | - |
| `panelOpenMode` | `NotificationPanelMode` (panel) / `'popover' \| 'sidebar'` (tool) | How the panel opens. |
| `tabConfig` | `NotificationTabConfig` | Configure which notification tabs show. |
| `settingsLayout` | `NotificationSettingsLayout` | Layout of the settings screen. |
| `variant` | `string` | Named visual variant. (Tool-only: `panelVariant`, `panelShadowDom`.) |

**`<VeltComments>`**

| Prop | Type | What it does |
| - | - | - |
| `composerMode` | `'default' \| 'expanded'` | Comment composer display mode. |
| `unreadIndicatorMode` | `'minimal' \| 'verbose'` | Style of the unread indicator. |
| `customStatus` | object | Custom comment statuses. (**Singular: `customStatuses` does not exist.**) |
| `customReactions` | `ReactionMap` | Custom reaction set. |
| placeholders | `string` each | `commentPlaceholder`, `replyPlaceholder`, `editPlaceholder`, `editCommentPlaceholder`, `editReplyPlaceholder` (individual props). |
| shadow-DOM scopes | `boolean` each | `shadowDom`, `pinShadowDom`, `dialogShadowDom`. |

## How to use this when matching a design

1. The design shows something not visible by default (priority chip, reply avatars, minimap, @here, device badge, …)? **Find it above** → pass the prop / call enable.
2. The design *omits* something Velt shows by default (reactions, status, attachments)? **Turn it off** with `={false}`: don't `display:none` it.
3. Then style/restructure it with CSS / wireframes / primitives as usual.

> Defaults come from the SDK's feature services. A few advanced `enable…()` methods exist whose default is not documented here. If a feature isn't listed, call the matching `enable<Feature>()` on the relevant element and confirm by testing.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.