Overview

The Contextual Comments component embeds a fully customizable commenting experience into your web application, allowing users to interact and collaborate seamlessly within the context of specific elements on the page.

Quickstart

Follow the steps below to get started with adding contextual comments to your app, based on the type of HTML element you plan to use (either <canvas> or <div>).

<canvas>

1

Before we start

Before utilizing the Mouse Pointers component, it is essential to initialize a room with a defined name and ID for the participant and the group. You need to have the room variable to add the Mouse Pointers component.

2

Setup your HTML element

Add a <canvas> element with a unique ID to your HTML:

<canvas id="my-id" width="540" height="540"></canvas>

3

Import components and instanciate CanvasPin

Import the Comments component and the CanvasPin pin adapter. Initialize the CanvasPin adapter by passing the ID of the canvas element:

import { Comments, CanvasPin } from '@superviz/sdk';

const pinAdapter = new CanvasPin("my-id");

4

Initialize Comments and add the component

Create an instance of Comments using the pin adapter, then add it to the already initialized room:

const comments = new Comments(pinAdapter);

room.addComponent(comments);

5

Next steps

You are now all set! See what else can you do:

Contextual Comments API Reference

<div>

1

Before we start

Before utilizing the Mouse Pointers component, it is essential to initialize a room with a defined name and ID for the participant and the group. You need to have the room variable to add the Mouse Pointers component.

2

Setup your HTML element

Add a <div> element with a unique ID. Inside this <div>, include child elements with a data-superviz-id attribute to mark which elements can receive comments:

<div id="my-id" width="540" height="540">
  <p data-superviz-id="23">Paragraph that can have a comment</p>
  <p data-superviz-id="42">Another paragraph that can have a comment</p>
  <p>Paragraph that won't be able to receive a comment</p>
</div>

3

Import components and instanciate HTMLPin

Import the Comments component and the HTMLPin pin adapter.

Initialize the HTMLPin adapter with the ID of the <div> element and specify the name of the identifier attribute:

import { Comments, HTMLPin } from '@superviz/sdk';

const pinAdapter = new HTMLPin("my-id", {
  dataAttributeName: "data-comment-id",
});

4

Initialize Comments and add the component

Create an instance of Comments using the adapter, then add it to the room:

const comments = new Comments(pinAdapter);

room.addComponent(comments);

5

Next steps

You are now all set! See what else can you do:

Contextual Comments API Reference

Resources to get you started

We've prepared a few resources to help you get started with the Contextual Comments component and use it alosing with other components to create a collaborative environment.

How to add a contextual comments feature into a canvas-based web application

Learn how to add real-time synchronization to a React Flow application

How to integrate Contextual Comments into Matterport SDK