Contextual Comments

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:

Type	Description
PinAdapter	Required. The adapter that specifies the type of context where the pins will be utilized. Options are HTMLPin,CanvasPin, MatterportPin, AutodeskPin or ThreejsPin.
CommentsOptions	Object 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.

Name	Type	Description
styles	string	Optional custom CSS styles to be applied to the component. This allows for customization of the component's appearance.
position	CommentsSide	Represents the position where the modal with the list of comments will be placed on the page. Values are left and right.
buttonLocation	ButtonLocation or string	Represents 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.
offset	Offset	Position 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.

Name	Type	Description
top	number	Specifies the distance between the iframe and the top of the page in pixels. Default value: 0
bottom	number	Specifies the distance between the iframe and the bottom of the page in pixels. Default value: 0
left	number	Specifies the distance between the iframe and the left edge of the page in pixels. Default value: 0
right	number	Specifies 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
}