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>
- <div>
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.
Setup your HTML element
Add a <canvas> element with a unique ID to your HTML:
<canvas id="my-id" width="540" height="540"></canvas>
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/collaboration';
const pinAdapter = new CanvasPin("my-id");
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);
Next steps
1Before 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.
2Setup 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>
3Import 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/collaboration';
const pinAdapter = new HTMLPin("my-id", {
dataAttributeName: "data-comment-id",
});
4Initialize 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);
Next steps
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.
