Skip to main content

Setup

Contextual Comments embeds a customizable commenting experience into your application, enabling people to collaborate asynchronous.

The component consists of two elements:

  • A sidebar that contains all the threaded comments related to the room.
  • A Pin that visually identifies the context of the comment

How it works​

After being initialized, the Contextual Comments component inserts two elements into the Document Object Model (DOM), the superviz-comments-button and the superviz-comments.

The superviz-comments-button adds a button to your page. This button lets participants toggle between two things:

  • They can turn on the ability to add comments inside the area and view previously added comments.
  • They can also switch back to the standard view where comments are not displayed.

The superviz-comments has the list of comments on the page. In this modal, you can reply to comments or mark them as solved. You can also filter to see comments that are already marked as solved or not.

When closing the modal containing the list of comments, you will switch back to the standard view where comments are not displayed.

HTMLPin vs CanvasPin​

When utilizing the CanvasPin adapter, the Comment Pins can be placed anywhere on the canvas, containing or not an element for it, meaning that the position of the Comment Pins will be relative to the canvas, and not to the HTML elements. When utilizing the HTMLPin adapter, the Comment Pins will only be able to be placed on the HTML elements that have the data-superviz-id attribute. The value of this attribute will be used to identify the element and its position on the page, meaning that it should be unique and persist on the page. You can also use the dataAttributeValueFilters option to filter what elements should not be able to receive a Comment Pin.