CanvasPin

You can use Contextual Comments to embed a customizable commenting experience into your page, enabling people to collaborate. To add the component to a canvas element on your page, you’ll need the CanvasPin adapter.

HTMLPin vs CanvasPin

When utilizing the CanvasPin adapter, the Comment Pins can be placed anywhere on the canvas, containing or not an element for it, meaning that the position of the Comment Pins will be relative to the canvas, and not to the HTML elements. When utilizing the HTMLPin adapter, the Comment Pins will only 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.

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.

How to use it

When using the CanvasPin adapter, you will need to pass as a parameter in the constructor the HTML canvas element id.

After initializing, you can add the adapter to the Contextual Comments passing it as a parameter in its constructor, enabling the Contextual Comments for a HTML canvas. Here is how to do it:

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

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

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

// Initializing the Comments component with the adapter created
const comments = new Comments(pinAdapter);

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

Properties

See below the parameters to use in the constructor of the CanvasPin:

Name	Type	Description
canvasId	string	Required. Specifies the id of the canvas HTML element where comments can be added anywhere.