1. Customize navigation for non-URL based navigation

By default, we attempt to navigate the user to the comment Location when a user clicks on one in the sidebar.

If you want to alter this behavior, you can listen to click events and add an event listener to handle the navigation in a custom way.

Custom navigation using Location

Using the onCommentClick handler, you can fetch the context and make the necessary state changes to locate the comment correctly.

When a comment is clicked, the handler will be called with the location data of the comment.

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
 <VeltCommentsSidebar onCommentClick={onCommentClick} /> 

// event handler for when a comment is clicked on 
const onCommentClick = (event) => {
  //handle custom navigation by getting location
  const { pageId } = event.location;
  yourNavigateToPageMethod(pageId);

Custom navigation without using Location

If you do not want to use Location, you can alternatively handle custom navigation by calling the addContext() method in the event handler.

 <VeltCommentsSidebar onCommentClick={onCommentClick} /> 

// event handler for when a comment is clicked on 
const onCommentClick = (event) => {
  //handle custom navigation by getting context
  const { pageId } = event.context;
  yourNavigateToPageMethod(pageId);
};
You would choose to use addContext() over Location if you do not want to segregate your comments by Location

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

Default: false

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

<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

For example:

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 groupConfig 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. Dark Mode

Whether dark mode is enabled.

Default: false

<VeltComments darkMode={true} />

API Method:

const commentElement = client.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();

10. 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>

11. 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 sortData 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" />

Was this page helpful?

SetupOverview