Custom filtering, sorting and grouping

Here is the overview on how it works:
- Enable custom actions in the comments sidebar.
- Add Velt Button Wireframe to the sidebar wireframe.
- Handle click events and lifecycle events to apply custom filtering, sorting, and grouping logic.
- Update sidebar data.
Here are the steps to implement it:

Enable Custom Actions

React / Next.js
Other Frameworks

Using Props:

<VeltCommentsSidebar customActions={true} />

Using API:

const commentElement = client.getCommentElement();
commentElement.enableSidebarCustomActions();
commentElement.disableSidebarCustomActions();

Using Props:

<velt-comments-sidebar custom-actions="true"></velt-comments-sidebar>

Using API:

const commentElement = Velt.getCommentElement();
commentElement.enableSidebarCustomActions();
commentElement.disableSidebarCustomActions();

Add Velt Buttons and handle click events

Learn more about how to setup Velt Button Wireframe.
Set default state using the active prop.
Handle veltButtonClick event to implement custom filtering, sorting, and grouping logic. It returns VeltButtonClickEvent.

React / Next.js
Other Frameworks

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Panel>
      <VeltCommentsSidebarWireframe.Header />
      <div className="custom-filter-chip-container">

          <VeltButtonWireframe id="unread" type="multi-select" group="custom-filter" active={true}>
              <div className="custom-filter-chip-button">Unread</div>
          </VeltButtonWireframe>

          <VeltButtonWireframe id="mentions" type="multi-select" group="custom-filter">
              <div className="custom-filter-chip-button">Mentions</div>
          </VeltButtonWireframe>

      </div>
  </VeltCommentsSidebarWireframe.Panel>
</VeltWireframe>

Handle the button click event:

const veltButtonClickEventData = useVeltEventCallback('veltButtonClick');
useEffect(() => {
  if (veltButtonClickEventData) {
    if (veltButtonClickEventData.buttonContext?.groupId === 'custom-filter') {
      const selections = veltButtonClickEventData.buttonContext?.selections?.['custom-filter'];
      if (selections?.unread) {
        // show unread comments
      }
      if (selections?.mentions) {
        // show comments with mentions
      }
    }
  }
}, [veltButtonClickEventData]);

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-wireframe-panel>
    <velt-comments-sidebar-wireframe-header></velt-comments-sidebar-wireframe-header>
    <div class="custom-filter-chip-container">

        <velt-button-wireframe id="unread" type="multi-select" group="custom-filter" active="true">
            <div class="custom-filter-chip-button">Unread</div>
        </velt-button-wireframe>

        <velt-button-wireframe id="mentions" type="multi-select" group="custom-filter">
            <div class="custom-filter-chip-button">Mentions</div>
        </velt-button-wireframe>

    </div>
  </velt-comments-sidebar-wireframe-panel>
</velt-wireframe>

Handle the button click event:

Velt.on('veltButtonClick').subscribe(veltButtonClickEventData => {
  if (veltButtonClickEventData) {
    if (veltButtonClickEventData.buttonContext?.groupId === 'custom-filter') {
      const selections = veltButtonClickEventData.buttonContext?.selections?.['custom-filter'];
      if (selections?.unread) {
        // Custom Filtering | Sorting | Grouping Logic
      }
      if (selections?.mentions) {
        // Custom Filtering | Sorting | Grouping Logic
      }
    }
  }
});

Handle Sidebar data lifecycle events

There are two lifecycle events you need to handle to implement custom filtering, sorting, and grouping logic:

commentSidebarDataInit: Triggered when comment sidebar data is first loaded. It returns CommentSidebarDataInitEvent
commentSidebarDataUpdate: Triggered when comment sidebar data is updated. It returns CommentSidebarDataUpdateEvent
- This event can trigger multiple times when either the comment data or unread comment count changes.

React / Next.js
Other Frameworks

const commentSidebarDataInitEvent: CommentSidebarDataInitEvent = useCommentEventCallback('commentSidebarDataInit');
const commentSidebarDataUpdateEvent: CommentSidebarDataUpdateEvent = useCommentEventCallback('commentSidebarDataUpdate');

useEffect(() => {
  if (commentSidebarDataInitEvent) {
    // Custom Filtering | Sorting | Grouping Logic
  }
}, [commentSidebarDataInitEvent]);

useEffect(() => {
  if (commentSidebarDataUpdateEvent) {
    // Custom Filtering | Sorting | Grouping Logic
  }
}, [commentSidebarDataUpdateEvent]);

const commentElement = Velt.getCommentElement();

commentElement.on('commentSidebarDataInit').subscribe((data) => {
  // Custom Filtering | Sorting | Grouping Logic
});

commentElement.on('commentSidebarDataUpdate').subscribe((data) => {
  // Custom Filtering | Sorting | Grouping Logic
});

Update sidebar data based on custom logic

Once you have applied your custom filtering, sorting, and grouping logic, create the data an array of CommentSidebarData objects and set it in the comments sidebar.

Use the options parameter to control if you want to group the comments or not.

React / Next.js
Other Frameworks

const options = {
  grouping: false
};

const customFilterData = [
  {
    "groupId": "group1",
    "groupName": "Group 1",
    "isExpanded": true,
    "annotations": [
      {
          ...annotation1
      },
      {
          ...annotation2
      },
    ]
  }
];

const commentElement = client.getCommentElement();
commentElement.setCommentSidebarData(customFilterData, options);

const options = {
  grouping: false
};
const customFilterData = [
  {
    "groupId": "group1",
    "groupName": "Group 1",
    "isExpanded": true,
    "annotations": [
      {
          ...annotation1
      },
      {
          ...annotation2
      },
    ]
  }
];
const commentElement = Velt.getCommentElement();
commentElement.setCommentSidebarData(customFilterData, options);

onCommentClick

Listen for click events on comments in the sidebar to trigger actions like navigation.
The event callback provides access to the clicked comment’s annotation object, which includes location and context data.
Use this data to update your app’s state and navigate to the comment’s location.

The event handler receives an object with the following properties:

Property	Type	Description
`documentId`	string	ID of the document containing the comment
`location`	Object	Location details of the comment
`targetElementId`	string	DOM ID of the element the comment is attached to
`context`	Object	Custom context data associated with the comment
`annotation`	CommentAnnotation	The full comment annotation object

React / Next.js
Other Frameworks

 <VeltCommentsSidebar onCommentClick={onCommentClick} /> 

// event handler for when a comment is clicked on 
const onCommentClick = (event) => {
  //handle custom navigation by getting location if you have set custom locations
  const { pageId } = event.location;
  //handle custom navigation by getting context if you have added metadata using addContext()
  const { pageId } = event.context;
  yourNavigateToPageMethod(pageId);
};

// event handler for when a comment is clicked on 
const onCommentClick = (event) => {
  console.log('onCommentClick', event.detail);
  //handle custom navigation by getting location if you have set custom locations
  const { pageId } = event.detail.location;
  //handle custom navigation by getting context if you have added metadata using addContext()
  const { pageId } = event.detail.context;
  yourNavigateToPageMethod(pageId);
};

const commentElement = document.querySelector('velt-comments-sidebar');
commentElement.addEventListener('onCommentClick', onCommentClick);

onCommentNavigationButtonClick

This event is triggered when the navigation button in the comment dialog in the Sidebar is clicked.
Use this event to implement custom navigation logic.

React / Next.js
Other Frameworks

<VeltCommentsSidebar onCommentNavigationButtonClick={onCommentNavigationButtonClick} />

  // event handler for when a comment is clicked on 
  const onCommentNavigationButtonClick = (event) => {
    console.log('onCommentNavigationButtonClick', event);
    //handle custom navigation by getting location if you have used Locations
    const { pageId } = event.location;
    //handle custom navigation by getting context if you have used addContext()
    const { pageId } = event.context;
    yourNavigateToPageMethod(pageId);
  };

const commentSidebarElement = document.querySelector('velt-comments-sidebar');
commentSidebarElement.addEventListener('onCommentNavigationButtonClick', (event) => {
  console.log('onCommentNavigationButtonClick', event.detail);
});

enableSidebarUrlNavigation

By default, clicking a comment in the sidebar doesn’t automatically update the page URL where the comment was added.
Use this to enable automatic URL navigation when clicking comments in the sidebar.
If your app’s state is more complex, you might need to listen for onCommentClick events and implement custom navigation logic.

Default: false

React / Next.js
Other Frameworks

Using Props:

<VeltCommentsSidebar urlNavigation={true} />

Using API method:

const commentElement = client.getCommentElement();
// to enable sidebar url navigation
commentElement.enableSidebarUrlNavigation();
// to disable sidebar url navigation
commentElement.disableSidebarUrlNavigation();

Using Props:

<velt-comments-sidebar url-navigation="false"></velt-comments-sidebar>

Using API method:

const commentElement = Velt.getCommentElement();
commentElement.enableSidebarUrlNavigation();
commentElement.disableSidebarUrlNavigation();

UI

currentLocationSuffix

Adds “(this page)” suffix to the group name when the current location matches the group’s location.

Default: false

React / Next.js
Other Frameworks

<VeltCommentsSidebar currentLocationSuffix={true}/>

<velt-comments-sidebar current-location-suffix="true"></velt-comments-sidebar>

embedMode

By default, the sidebar will open up from the right corner of the page.
With embed mode, you can add the sidebar in your component and it will take up the full width and height of its container.
When in embed mode, the sidebar will not have the close button. You need to implement your own open and close functionality on the host component.

React / Next.js
Other Frameworks

<div className="sidebar-container">
  <VeltCommentsSidebar embedMode={true} />
</div>

<div className="sidebar-container">
  <velt-comments-sidebar embed-mode="true"></velt-comments-sidebar>
</div>

excludeLocationIdsFromSidebar

Use this to filter out comments from certain locations. These comments will not be displayed in the sidebar.

React / Next.js
Other Frameworks

Using Props:

<VeltCommentsSidebar excludeLocationIds={['location1', 'location2']} />

Using API:

const commentElement = client.getCommentElement();
commentElement.excludeLocationIdsFromSidebar(['location1', 'location2']);

Using Props:

<velt-comments-sidebar exclude-location-ids='["location1", "location2"]'></velt-comments-sidebar>

Using API:

const commentElement = Velt.getCommentElement();
commentElement.excludeLocationIdsFromSidebar(['location1', 'location2']);

filterGhostCommentsInSidebar

Fileter out and hide ghost comments from the Sidebar.

React / Next.js
Other Frameworks

Using Props:

// Use either of the following
<VeltCommentsSidebar filterGhostCommentsInSidebar={true} />
<VeltSidebarButton filterGhostCommentsInSidebar={true} />

Using APIs:

const commentElement = client.getCommentElement();
commentElement.enableFilterGhostCommentsInSidebar();
commentElement.disableFilterGhostCommentsInSidebar();

Using Props:

<!-- Use either of the following -->
<velt-comments-sidebar filter-ghost-comments-in-sidebar="true"></velt-comments-sidebar>
<velt-sidebar-button filter-ghost-comments-in-sidebar="true"></velt-sidebar-button>

Using APIs:

const commentElement = Velt.getCommentElement();
commentElement.enableFilterGhostCommentsInSidebar();
commentElement.disableFilterGhostCommentsInSidebar();

filterPanelLayout

Change the layout of the filter panel in the sidebar.
Options: menu or bottomSheet Default: bottomSheet

React / Next.js
Other Frameworks

<VeltCommentsSidebar filterPanelLayout="menu"/>

<velt-comments-sidebar filter-panel-layout="menu"/>

filterOptionLayout

Change the layout of the filter options in the sidebar filter panel.
Options:
- checkbox: (default) to show the filter options in a checkbox list
- dropdown: to show the filter options in a searchable dropdown with checklist

React / Next.js
Other Frameworks

<VeltCommentsSidebar filterOptionLayout="dropdown"/>

<velt-comments-sidebar filter-option-layout="dropdown"/>

filterCount

Disable comment count on filter options. This leads to better performance.

React / Next.js
Other Frameworks

<VeltCommentsSidebar filterCount={false}/>

<velt-comments-sidebar filter-count="false"></velt-comments-sidebar>

dialogSelection

When disabled, clicking a comment in the sidebar triggers a click event instead of opening the dialog inline. When combined with custom UX, this allows you to create a Figma-style sidebar experience where comments open at their location on the DOM rather than within the sidebar itself.

Default: true

React / Next.js
Other Frameworks

<VeltCommentsSidebar dialogSelection={false}/>

<velt-comments-sidebar dialog-selection="false"></velt-comments-sidebar>

expandOnSelection

Controls whether comment dialogs automatically expand when selected in the sidebar.

Default: true

React / Next.js
Other Frameworks

<VeltCommentsSidebar expandOnSelection={false}/>

<velt-comments-sidebar expand-on-selection="false"></velt-comments-sidebar>

floatingMode

This makes the sidebar open in an overlay panel over the sidebar button float over the page content.
If you use this mode make sure you do not add Velt Sidebar Component in your app.

React / Next.js
Other Frameworks

<VeltSidebarButton floatingMode={true} />

<velt-sidebar-button floating-mode="true"></velt-sidebar-button>

focusedThreadMode

In this mode, when you click on a comment in the sidebar, it opens the thread in an expanded view within the sidebar itself.
Other threads and actions like filters, search etc. are hidden behind a back button.
Enabling this mode also adds a navigation button in the comment dialog. Clicking it will navigate to the comment and trigger a callback. Learn more about it here.

If you had previously used a wireframe for the comment dialog, you will need to add the navigation button wireframe and the focused thread wireframe.

React / Next.js
Other Frameworks

<VeltCommentsSidebar focusedThreadMode={true} />

<velt-comments-sidebar focused-thread-mode="true"></velt-comments-sidebar>

openAnnotationInFocusMode

When enabled, opens the comment dialog in focus mode when focusedThreadMode is enabled and either:
- The ‘reply’ button inside the comment dialog is clicked, or
- A comment is selected via the selectCommentByAnnotationId(ANNOTATION_ID) API method
This requires focusedThreadMode to be enabled.
Type: VeltCommentsSidebarProps

React / Next.js
Other Frameworks

<VeltCommentsSidebar focusedThreadMode={true} openAnnotationInFocusMode={true} />

<velt-comments-sidebar focused-thread-mode="true" open-annotation-in-focus-mode="true"></velt-comments-sidebar>

fullScreen

Enable full-screen mode for the Comments Sidebar to maximize the viewing area for large volumes of feedback or detailed comment reviews.
In full-screen mode, the sidebar expands to fill the entire viewport, providing more space to read and manage comments.
A full-screen button appears in the sidebar header, allowing users to toggle between normal and full-screen modes.
This feature is particularly useful when working with complex discussions, long comment threads, or when you need to focus exclusively on feedback.

Default: false

Full-screen mode only works in default mode. It is not supported in floating mode or embed mode.

React / Next.js
Other Frameworks

Using Props:

<VeltCommentsSidebar fullScreen={true} />

Using API:

const commentElement = client.getCommentElement();
// Enable full-screen mode
commentElement.enableFullScreenInSidebar();
// Disable full-screen mode
commentElement.disableFullScreenInSidebar();

Using Props:

<velt-comments-sidebar full-screen="true"></velt-comments-sidebar>

Using API:

const commentElement = Velt.getCommentElement();
// Enable full-screen mode
commentElement.enableFullScreenInSidebar();
// Disable full-screen mode
commentElement.disableFullScreenInSidebar();

pageMode

This adds a composer in the sidebar where users can add comments without attaching them to any specific element.

Default: false

React / Next.js
Other Frameworks

<VeltCommentsSidebar pageMode={true} />

<velt-comments-sidebar page-mode="true"></velt-comments-sidebar>

readOnly

Make comment dialogs in the sidebar read-only to prevent users from editing comments.

Default: false

React / Next.js
Other Frameworks

<VeltCommentsSidebar readOnly={true} />

<velt-comments-sidebar read-only="true"></velt-comments-sidebar>

position

Change the default direction where the sidebar opens from.
Options: left or right
Default: right

React / Next.js
Other Frameworks

<VeltCommentsSidebar position="left"/>

<velt-comments-sidebar position="left"/>

openCommentSidebar

React / Next.js
Other Frameworks

const commentElement = client.getCommentElement();
commentElement.openCommentSidebar(); // opens the comments side bar
commentElement.closeCommentSidebar(); // closes the comments side bar
commentElement.toggleCommentSidebar(); // toggles the comments side bar

const commentElement = Velt.getCommentElement();
commentElement.openCommentSidebar(); // opens the comments side bar
commentElement.closeCommentSidebar(); // closes the comments side bar
commentElement.toggleCommentSidebar(); // toggles the comments side bar

forceClose

Force the sidebar to close on outside click, even when opened programmatically via API. When the sidebar is opened dynamically through the API, outside clicks are normally ignored (expecting you to handle the close yourself). Setting forceClose={true} ensures outside clicks will always close the sidebar.

This does not affect embed mode sidebar.

React / Next.js
Other Frameworks

<VeltCommentsSidebar forceClose={true} />

<velt-comments-sidebar force-close="true"></velt-comments-sidebar>

searchPlaceholder

Customize the placeholder text shown in the search input of the comments sidebar.

React / Next.js
Other Frameworks

  <VeltCommentsSidebar searchPlaceholder="New placeholder" />

<velt-comments-sidebar search-placeholder="New placeholder"></velt-comments-sidebar>

commentPlaceholder

Customize the placeholder text for the dialog composer (the comment input that appears in comment dialogs/threads).

React / Next.js
Other Frameworks

<VeltCommentsSidebar commentPlaceholder="Add a comment..." />

<velt-comments-sidebar comment-placeholder="Add a comment..."></velt-comments-sidebar>

replyPlaceholder

Customize the placeholder text for reply input fields in the sidebar.

React / Next.js
Other Frameworks

<VeltCommentsSidebar replyPlaceholder="Write a reply..." />

<velt-comments-sidebar reply-placeholder="Write a reply..."></velt-comments-sidebar>

pageModePlaceholder

Customize the placeholder text for the page mode composer (the comment input used for creating page-level comments).

React / Next.js
Other Frameworks

<VeltCommentsSidebar pageModePlaceholder="Add a page comment..." />

<velt-comments-sidebar page-mode-placeholder="Add a page comment..."></velt-comments-sidebar>

sidebarButtonCountType

Change the count shown on the sidebar button.
- default: Shows the total count of comments in open and in progress states. (default)
- filter: Shows the count of filtered comments.

React / Next.js
Other Frameworks

Using Props:

  <VeltCommentsSidebar sidebarButtonCountType="filter" />
  <VeltSidebarButton sidebarButtonCountType="filter" />

Using APIs:

const commentElement = useCommentUtils();
commentElement.setSidebarButtonCountType('filter');

Using Props:

<velt-comments-sidebar sidebar-button-count-type="filter"></velt-comments-sidebar>
<velt-sidebar-button sidebar-button-count-type="filter"></velt-sidebar-button>

Using APIs:

const commentElement = Velt.getCommentElement();
commentElement.setSidebarButtonCountType('filter');

commentCountType

Control whether the sidebar button shows total or unread comment count. Type: CommentCountType

total: Shows the total number of comments. (default)
unread: Shows only the count of unread comments.

React / Next.js
Other Frameworks

Using Props:

<VeltCommentsSidebar commentCountType="unread" />
<VeltSidebarButton commentCountType="unread" />

Using Props:

<velt-comments-sidebar comment-count-type="unread"></velt-comments-sidebar>
<velt-sidebar-button comment-count-type="unread"></velt-sidebar-button>

context

Pass custom context data to page mode composer comments in the sidebar. This will add the provided context object to any comment added via the page mode composer in the sidebar, allowing you to associate additional metadata (such as job IDs, statuses, or other application-specific data) with the comment annotation.

React / Next.js
Other Frameworks

<VeltCommentsSidebar context={{ jobId: `job-page-mode`, jobStatus: 'page comment' }} />

const commentSidebarElement = document.querySelector('velt-comments-sidebar');
commentSidebarElement?.setAttribute("context", JSON.stringify({ jobId: `job-page-mode`, jobStatus: 'page comment' }));

System Filters, Sorting and Grouping

filterConfig

Customize the available system filters:
location: Filter comments by location.
document: Filter comments by document.
people: Filter comments by author of comment annotation.
involved: Filter comments by users who are involved in the comment annotation (author, mentioned, assigned).
tagged: Filter comments by users who were tagged/mentioned in the comment. Only available in the latest SDK version.
assigned: Filter comments by users who were assigned to the comment. Only available in the latest SDK version.
priority: Filter comments by priority.
category: Filter comments by category.
status: Filter comments by status.
You can rename, disable, configure grouping, and multi-select behavior of the filters as needed.

React / Next.js
Other Frameworks

const filterConfig = {
  location: {
    enable: true,
    name: "Pages",
    enableGrouping: true,
    multiSelection: true,
    placeholder: "Filter by location",
    order: ['locationId1', 'locationId2', 'locationId3']
  },
  document: {
    enable: true,
    name: "Documents",
    enableGrouping: true,
    placeholder: "Filter by document",
    multiSelection: true,
  },
  people: {
    enable: true,
    name: "Author",
    enableGrouping: true,
    placeholder: "Filter by author",
    multiSelection: true,
  },
  involved: {
    enable: true,
    name: "Involved",
    enableGrouping: false,
    placeholder: "Filter by involved",
    multiSelection: true,
  },
  tagged: {
    enable: true,
    name: "Tagged",
    enableGrouping: false,
    placeholder: "Filter by tagged",
    multiSelection: true,
  },
  assigned: {
    enable: true,
    name: "Assigned",
    enableGrouping: false,
    placeholder: "Filter by assigned",
    multiSelection: true,
  },
  priority: {
    enable: true,
    name: "Priority",
    enableGrouping: false,
    placeholder: "Filter by priority",
    multiSelection: true,
  },
  category: {
    enable: true,
    name: "Category",
    enableGrouping: true,
    placeholder: "Filter by category",
    multiSelection: true,
  },
  status: {
    enable: true,
    name: "Status",
    placeholder: "Filter by status",
    multiSelection: true,
  }
};
<VeltCommentsSidebar filterConfig={filterConfig} />

const filterConfig = {
  location: {
    enable: true,
    name: "Pages",
    enableGrouping: true,
    multiSelection: true,
    order: ['locationId1', 'locationId2', 'locationId3']
  },
  document: {
    enable: true,
    name: "Documents",
    enableGrouping: true,
    multiSelection: true,
  },
  people: {
    enable: true,
    name: "Author",
    enableGrouping: true,
    multiSelection: true,
  },
  involved: {
    enable: true,
    name: "Involved",
    enableGrouping: false,
    multiSelection: true,
  },
  tagged: {
    enable: true,
    name: "Tagged",
    enableGrouping: false,
    multiSelection: true,
  },
  assigned: {
    enable: true,
    name: "Assigned",
    enableGrouping: false,
    multiSelection: true,
  },
  priority: {
    enable: true,
    name: "Priority",
    enableGrouping: false,
    multiSelection: true,
  },
  category: {
    enable: true,
    name: "Category",
    enableGrouping: true,
    multiSelection: true,
  },
  status: {
    enable: true,
    name: "Status",
    multiSelection: true,
  }
};
const commentsSidebar = document.querySelector(`velt-comments-sidebar`);
commentsSidebar?.setAttribute("filter-config", JSON.stringify(filterConfig));

groupConfig

Enable/disable the option to group comments in the sidebar with the group config attribute.
If you use floating mode, you can pass this config in Sidebar Button Component.

React / Next.js
Other Frameworks

const groupConfig = {
  enable: true,
  name: "Custom Group By",
};

<VeltCommentsSidebar groupConfig={groupConfig} />

const groupConfig = {
  enable: true,
  name: "Custom Group By",
};


const commentsSidebar = document.querySelector(`velt-comments-sidebar`);
commentsSidebar?.setAttribute("group-config", JSON.stringify(groupConfig));

sortOrder

Set default sort order for comments in the sidebar. Options: asc or desc

React / Next.js
Other Frameworks

<VeltCommentsSidebar sortOrder="asc" />

<velt-comments-sidebar sort-order="asc"></velt-comments-sidebar>

sortBy

Set default sort field for comments in the sidebar. Options: createdAt or lastUpdated

React / Next.js
Other Frameworks

<VeltCommentsSidebar sortBy="createdAt" />

<velt-comments-sidebar sort-by="createdAt"></velt-comments-sidebar>

setCommentSidebarFilters

Programmatically set the system filters on the sidebar:

React / Next.js
Other Frameworks

const filters = {
  location: [
    { id: 'location1Id' },
    { id: 'location2Id' },
  ],
  document: [
    { id: 'document1Id' },
    { id: 'document2Id' },
  ],
  people: [ // author of comment annotation
    { userId: 'userIdToFilter' },
  ],
  involved: [ // user is author or mentioned or assigned
    { userId: 'userIdToFilter' },
  ],
  tagged: [
    { userId: 'userIdToFilter' },
  ],
  assigned: [
    { userId: 'userIdToFilter' },
  ],
  priority: ['P0', 'P1', 'P2'],
  category: ['bug', 'feedback', 'question'],
  status: ['OPEN', 'IN_PROGRESS', 'RESOLVED'],
};

<VeltCommentsSidebar filters={filters} />

API Methods:

const commentElement = client.getCommentElement();
commentElement.setCommentSidebarFilters(filters);

const filters = {
	location: [
		{ id: 'location1Id' },
		{ id: 'location2Id' },
	],
  document: [
    { id: 'document1Id' },
    { id: 'document2Id' },
  ],
	people: [ // author of comment annotation
		{ userId: 'userIdToFilter' },
	],
  involved: [ // user is author or mentioned or assigned
    { userId: 'userIdToFilter' },
  ],
  tagged: [
    { userId: 'userIdToFilter' }
  ],
  assigned: [
    { userId: 'userIdToFilter' },
  ],
	priority: ['P0', 'P1', 'P2'],
  category: ['bug', 'feedback', 'question'],
	status: ['OPEN', 'IN_PROGRESS', 'RESOLVED'],
};

const commentsSidebar = document.querySelector(`velt-comments-sidebar`);
commentsSidebar?.setAttribute("filters", JSON.stringify(filters));

API Methods:

const commentElement = Velt.getCommentElement();
commentElement.setCommentSidebarFilters(filters);

systemFiltersOperator

Specify whether the system filters (e.g., “me”, “this page”) should be combined with an and or or operator.
Default: and

React / Next.js
Other Frameworks

Using Props:

<VeltCommentsSidebar systemFiltersOperator='or' />

Using API:

const commentElement = client.getCommentElement();
commentElement.setSystemFiltersOperator('or');

<velt-comments-sidebar system-filters-operator="or"></velt-comments-sidebar>

defaultMinimalFilter

Value	Description
`'all'`	(Default) Respects other filters; excludes resolved comments unless explicitly included
`'read'`	Shows only comments that have been read by the current user
`'unread'`	Shows only comments that have not been read by the current user
`'resolved'`	Shows only resolved comments
`'open'`	Shows only open (unresolved) comments
`'reset'`	Ignores all filters; shows all comments including resolved
`null`	Respects other filters; includes resolved comments (no minimal filter exclusion)

React / Next.js
Other Frameworks

<VeltCommentsSidebar defaultMinimalFilter="reset" />

<velt-comments-sidebar default-minimal-filter="reset"></velt-comments-sidebar>

Get Started

Key Concepts

Async Collaboration

Realtime Collaboration

Self-Host Data

Backend SDKs

Model Context Protocol

Webhooks

Security

Miscellaneous

​Custom filtering, sorting and grouping

Enable Custom Actions

Add Velt Buttons and handle click events

Handle Sidebar data lifecycle events

Update sidebar data based on custom logic

​Navigation

​onCommentClick

​onCommentNavigationButtonClick

​enableSidebarUrlNavigation

​UI

​currentLocationSuffix

​embedMode

​excludeLocationIdsFromSidebar

​filterGhostCommentsInSidebar

​filterPanelLayout

​filterOptionLayout

​filterCount

​dialogSelection

​expandOnSelection

​floatingMode

​focusedThreadMode

​openAnnotationInFocusMode

​fullScreen

​pageMode

​readOnly

​position

​openCommentSidebar

​forceClose

​searchPlaceholder

​commentPlaceholder

​replyPlaceholder

​pageModePlaceholder

​sidebarButtonCountType

​commentCountType

​context

​System Filters, Sorting and Grouping

​filterConfig

​groupConfig

​sortOrder

​sortBy

​setCommentSidebarFilters

​systemFiltersOperator

​defaultMinimalFilter

Custom filtering, sorting and grouping

Navigation

onCommentClick

onCommentNavigationButtonClick

enableSidebarUrlNavigation

UI

currentLocationSuffix

embedMode

excludeLocationIdsFromSidebar

filterGhostCommentsInSidebar

filterPanelLayout

filterOptionLayout

filterCount

dialogSelection

expandOnSelection

floatingMode

focusedThreadMode

openAnnotationInFocusMode

fullScreen

pageMode

readOnly

position

openCommentSidebar

forceClose

searchPlaceholder

commentPlaceholder

replyPlaceholder

pageModePlaceholder

sidebarButtonCountType

commentCountType

context

System Filters, Sorting and Grouping

filterConfig

groupConfig

sortOrder

sortBy

setCommentSidebarFilters

systemFiltersOperator

defaultMinimalFilter