​
1. Take action when a comment is clicked (such as Navigation)

  • Listen to the click events on the comments in the sidebar and take actions such as navigation.
  • In the event callback, you can access the comment annotation object that was clicked. It contains the location and context data for the comment.
  • You can use this data to make the necessary app state changes and navigate to the comment.
You would choose to use addContext() over Location if you do not want to segregate your comments by Location

Here is the object that is passed to the event handler:

propertytypedescription
documentIdstringThe document ID where the comment was added
locationstringThe location where the comment was added
targetElementIdstringThe DOM ID of the target element on which the comment was added
contextObjectAny context data passed when the comment was added
annotationCommentAnnotationThe comment annotation object that was clicked
 <VeltCommentsSidebar onCommentClick={onCommentClick} /> 

// event handler for when a comment is clicked on 
const onCommentClick = (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);
};

​
2. Enable/Disable Sidebar URL Navigation

Default: false

By default, Comment Sidebar URL navigation is disabled. So when user clicks on any comment in the sidebar, we will not redirect the user to a different page url if the comment was located on a different page. You would need to listen to onCommentClick events and then handle the event to change the URL.

To enable Sidebar URL Navigation, you can set the urlNavigation attribute to true. When this is enabled, clicking on Sidebar comments will change the page URL to wherever the comment was added.

{/* `true` to enable sidebar url navigation, `false` to disable sidebar url navigation */}
<VeltCommentsSidebar urlNavigation={true} />

You can also use API methods:

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

​
3. Toggling the Comments Sidebar

To toggle the sidebar, you can use the following methods:

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

​
4. Show the current URL path in the sidebar

Shows the current URL path in the sidebar by adding “(this page)” next to the current URL path. Default: false

<VeltCommentsSidebar currentLocationSuffix={true}/>

​
5. Enable Page Comment Mode

Enables page level comments in the sidebar.

Default: false

<VeltCommentsSidebar pageMode={true} />

​
6. Filter Customization

You can pass a filter config object to customize options for specific filters.

Currently you can customize these types of filters:

  • location
  • people
  • priority
  • category
const filterConfig = {
  location: {
    enable: true, // enable/disable location filter
    name: "Pages", // customize location filter heading
    enableGrouping: true, // to enable/disable grouping based on location filter
    multiSelection: true, // to enable/disable multiple selection
    order: ['locationId1', 'locationId2', 'locationId3'] // pass array of location ids here
  },
  people: {
    enable: true, // enable/disable people filter
    name: "People", // customize people filter heading
    enableGrouping: true, // to enable/disable grouping based on people filter
    multiSelection: true, // to enable/disable multiple selection
  },
  priority: {
    enable: true, // enable/disable priority filter
    name: "Priority", // customize priority filter heading
    enableGrouping: false, // to enable/disable grouping based on priority filter
    multiSelection: true, // to enable/disable multiple selection
  },
  category: {
    enable: true, // enable/disable category filter
    name: "Category", // customize category filter heading
    enableGrouping: true, // to enable/disable grouping based on category filter
    multiSelection: true, // to enable/disable multiple selection
  }
}

<VeltCommentsSidebar filterConfig={filterConfig} />

​
7. Group Configuration

You can enable/disable the option to group comments in the comment sidebar with the group config attribute:

const groupConfig = {
  enable: true, // to enable/disable group by option
  name: "Custom Group By", // customise group by heading
};

<VeltCommentsSidebar groupConfig={groupConfig} />

​
8. Programmatic Filters

You can progammically set the filters on the comment sidebar by passing an object to the filters attribute:

const filters = {
	location: [
		{ id: 'location1Id' }, // id field is required
		{ id: 'location2Id' }, // id field is required
	],
	people: [
		{ userId: 'userIdToFilter' }, // userId or
		{ email: 'userEmailToFilter' } // user email is required
	],
	priority: ['P0', 'P1', 'P2'], // default supported values
	status: ['OPEN', 'IN_PROGRESS', 'RESOLVED'], // default supported values
	category: ['bug', 'feedback', 'question'], // default supported values
};


<VeltCommentsSidebar filters={filters} />

API Methods:

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

​
9. Embed the Sidebar in a component

You can customize the location of the sidebar.

By default, the sidebar will open up from the right corner of the page. Instead with embed mode, you can move the sidebar anywhere and it will take up the full width and height of its container.

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

​
10. Sort Order of Comments in Sidebar

By default, the Comments in the Sidebar are ordered in descending order of when they were last updated.

You can change this sorting order with the sort data property.

There are three options for sorting:

  • asc - to show comments in descendending order of when they were last updated
  • desc - to show comments in ascending order of when they were last updated
  • none - to show comments in the sequence they were added
<VeltCommentsSidebar sortData="asc" />

​
11. Change the direction where the sidebar opens from

You can customize the sidebar to open from left.

Default: right

<VeltCommentsSidebar position="left | right"/>

​
12. Change the layout of the filter panel in the sidebar.

Default: bottomSheet

<VeltCommentsSidebar filterPanelLayout="menu | bottomSheet"/>

​
13. Exclude comments from certain locations in the Sidebar.

Using Props:

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

Using API:

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

​
14. Open Sidebar floating over the Sidebar Button.

<VeltSidebarButton floatingMode={true} />

Was this page helpful?

SetupOverview