Skip to main content

Contextual Comments

Overview​

Contextual Comments embeds a customizable commenting experience into your page or your 3D environment to enable people to collaborate.

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.

Before we start​

It is important to initialize a room with a defined name and ID for the participant and the group, as it will be used to store the comment data on our servers.

Adapters​

You can choose to initialize comments with an HTML canvas or an HTML element wrapper or a 3D environment. For each environment, you’ll need to utilize one adapter for the Contextual Comments component.

When utilizing the HTMLPin adapter, the Comment Pins will 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.

Check out the specific documentation of HTMLPin to better understand its methods and properties.

How to use​

To add a Contextual Comments component, you will need first to initialize one of our available adapters and then pass it as a parameter for the Comments component, you can use the following codes:

<canvas id="my-id" width="540" height="540"></canvas>
import { Comments, CanvasPin } from '@superviz/sdk/lib/components';

// Initializing the Adapter with the canvasId 
const pin = new CanvasPin("my-id");

// Initializing the Comments component with the adapter created
const comments = new Comments(pin, {
	position: "left",
	buttonLocation: "top-left"
});

// Adding the component to the already initialized room. 
room.addComponent(comments);

To better understand the properties of the CanvasPin or any other adapter, please check the adapter page.

Properties​

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

TypeDescription
PinAdapterRequired. The adapter utilized for the contextual comments, can be a 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
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
}