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 in your page. This button lets participants to 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 of 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 for the group, as it will be used to store the comment data on our servers.

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

CanvasPin

When initializing from a CanvasPin, in a 2D environment, you will need an HTML canvas element identified by a specific id on your web page.

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

AutodeskPin

When initializing from a AutodeskPin , in a 3D environment, you will need:

• Have Autodesk viewer fully loaded on the designated iframe;
• Install the @superviz/autodesk-viewer-plugin package into your project.

Check out the specific documentation of AutodeskPin to better understand its methods and properties and take a deeper understanding of how to use it.

MatterportPin

When initializing from a MatterportPin , in a 3D environment, you will need to:

• Have Matterport SDK Bundle fully loaded on the designated iframe;
• Install the @superviz/matterport-plugin package into your project.

Check out the specific documentation of MatterportPin to better understand its methods and properties and take a deeper understanding of how to use it.

ThreejsPin

When initializing from a ThreejsPin, in a 3D environment, you will need:

• Have the ThreeJS scene, camera and renderer fully loaded on the designated iframe;
• Install the @superviz/threejs-plugin package into your project.

Check out the specific documentation of ThreejsPin to better understand its methods and properties and take a deeper understanding of how to use it.

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 elementId="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 of Comments

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

Type	Description
PinAdapter	Required. The adapter utilized for the contextual comments, it can be a CanvasPin, MatterportPin, AutodeskPin or ThreejsPin.
CommentsOptions	Object that contains configurations for how the Comments component will behavior.

Types Definition

CommentsOptions

Type: object

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

Name	Type	Description
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.

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