Skip to main content

Comments API Reference

Contextual Comments embeds a customizable commenting experience into your web application to enable people to collaborate.

How to use​

To initialize the Contextual Comments component, you can follow our quickstart guide.

How it works​

After being initialized, the Contextual Comments component inserts two elements into the Document Object Model (DOM), the superviz-comments-button and 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 element contains the threaded list of comments. Here 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 superviz-comments element, you will switch back to the standard view where comments are not displayed.

Properties​

See below the parameters to use when initializing the Contextual Comments:

TypeDescription
PinAdapterRequired. The adapter that specifies the type of context where the pins will be utilized. Options are HTMLPin,CanvasPin, MatterportPin, AutodeskPin or ThreejsPin.
CommentsOptionsObject that contains configurations for how the Comments component will behave.

Methods​

openThreads()​

The openThreads method will open the superviz-comments section, where you can see the list of comments and reply to them.

Example:

comments.openThreads();

closeThreads()​

The closeThreads method will close the superviz-comments section, where you can see the list of comments and reply to them.

Example:

comments.closeThreads();

enable()​

The enable changes the cursor to our pin cursor and enables the user to add comments whenever it's allowed.

Example:

comments.enable();

disable()​

The disable method changes the cursor to the default cursor and disables the user to add comments.

Example:

comments.disable();

togglePinActive()​

The togglePinActive method will toggle the pin cursor and the ability to add comments.

Example:

comments.togglePinActive();

Types Definition​

CommentsOptions​

Type: object

The CommentsOptions contains configurations for how the Comments component will behave.

NameTypeDescription
stylesstringOptional custom CSS styles to be applied to the component. This allows for customization of the component's appearance.
positionCommentsSideRepresents the position where the modal with the list of comments will be placed on the page. Values are left and right.
buttonLocationButtonLocation or stringRepresents the position where the button to activate or deactivate the comments functionality will be placed. Values are top-left, top-right, bottom-left, bottom-right, or the HTML element ID.
offsetOffsetPosition the element superviz-comments by passing top, bottom, left, and right.
Default value: {0, 0, 0, 0}

CommentsSide​

Type: enum

Represents the position where the modal with the list of comments will be placed on the page. Values are:

  • left
  • right

ButtonLocation​

Type: enum

Represents the position where the button to activate or deactivate the comments functionality will be placed. Values are top-left, top-right, bottom-left, or bottom-right.

  • top-left
  • top-right
  • bottom-left
  • bottom-right

Offset​

Type: object

Position the element superviz-comments by passing top, bottom, left, and right.

Be aware that when setting the CommentsSide to the left, the right offset will be ignored, and when setting the CommentsSide to the right, the left offset will be ignored.

NameTypeDescription
topnumberSpecifies the distance between the iframe and the top of the page in pixels.
Default value: 0
bottomnumberSpecifies the distance between the iframe and the bottom of the page in pixels.
Default value: 0
leftnumberSpecifies the distance between the iframe and the left edge of the page in pixels.
Default value: 0
rightnumberSpecifies the distance between the iframe and the right edge of the page in pixels.
Default value: 0

Example:

offset: {
  top: 0,
  bottom: 0,
  left: 0,
  right: 0
}