How to allow users to add Contextual Comments to anywhere on your page
Tags: javascript, webdev, tutorial, frontend
Published: 2024-01-03 16:18:13

In the asynchronous collaboration environment of the remote online world, it's crucial to communicate clearly and effectively. The Contextual Comments component of SuperViz enhances this communication by allowing users to add annotations to specific parts of a page.

This feature provides an interactive way to share ideas, give feedback, and facilitate discussions directly on the content, enhancing the understanding and collaboration among users. Whether it's text, an image, or any other part of your web application (including 3D environments), users can simply drop a comment and initiate a meaningful conversation.


![SuperViz Contextual Comments for HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkv9y6pxq3ld2chnqsqd.png)


In the following sections, I will delve deeper into how to implement this feature into your application.

## What is SuperViz?

SuperViz is a complete collaboration SDK and JavaScript for developers. It allows you to easily add presence awareness, video, and - of course - the contextual comments to your web app in only a few hours. It provides a flexible and low-code solution for enhancing your web app’s collaborative functionalities.

## Install SuperViz SDK

Before you can start using SuperViz, you'll need to install the `@superviz/sdk` package. You can do this using npm or yarn. If you're using npm, run the following command in your terminal: `npm install @superviz/sdk`. If you're using yarn, the command will be `yarn add @superviz/sdk`. 

Once the package has been installed, you can import it into your project:

```jsx
import SuperViz from "@superviz/sdk"
```

## How to initialize a room with SuperViz

The first step to adding the Contextual Comments component to your web page is to initialize a room with SuperViz. A room is a virtual space where your users can join and collaborate. Each room has a unique ID, which you can specify when you create it.

To create a room, you need to use the `SuperVizRoom` that’s available from the SDK package, which takes the Developer Key and an object as a parameter. The object should have the following properties:

- `id`: The ID of the room, which should be a unique string shared between the participants of that room.
- `participant`: An object that contains information about the current user, such as `name`, `id`.
- `group`: An object that contains information about the group that the user belongs to, such as `name` and `id`.

Here’s an example of how to create a room with SuperViz:

```jsx
// Import the SuperViz SDK
import SuperVizRoom from '@superviz/sdk';

// Create a room object
const room = await SuperVizRoom(DEVELOPER_KEY, {
  roomId: "<ROOM-ID>",
  group: {
    id: "<GROUP-ID>",
    name: "<GROUP-NAME>",
  },
  participant: {
    id: "<USER-ID>",
    name: "<USER-NAME>"
  },
});

```

Please note that when you create a room you will need to pass [your `DEVELOPER_KEY`](https://docs.superviz.com/getting-started/setting-account#get-a-superviz-token) as a parameter. You can retrieve a free `DEVELOPER_KEY` at [superviz.com](https://superviz.com).

Once you have created a room, you can use the `room` object to add components.

## Create the Contextual Comments component

You will need to initialize comments in an HTML `canvas` element with a defined ID, like this: 

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

You can also implement it in a 3D environment. For each environment, one adapter for the Contextual Comments component is required, as detailed in [our documentation](https://docs.superviz.com/components/contextual-comments/).

In this case, you'll use the `CanvasPin` adapter, providing the HTML `canvas` element ID as a parameter in the constructor.

Next, add the adapter to [Contextual Comments](https://docs.superviz.com/components/contextual-comments/), passing it as a parameter in the constructor. This enables Contextual Comments within an HTML canvas. Here's how to do it:

```jsx
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);
```

You can also personalize the positions of the comments button and the comments modal. This can be done with an options object that can be placed after the `pinAdapter` in the Comments constructor. 

By specifying the properties `position` and `buttonLocation` in this options object, you can configure where these elements will appear on your page, providing better control and flexibility in your user interface design.

The `positon` represents where the modal with the list of comments will be placed on the page, values can be `left` and `right`. While the `buttonLocation` represents the position where the button to activate or deactivate the comments functionality will be placed. Values can be `top-left`, `top-right`, `bottom-left`, `bottom-right` or the HTML element ID.

Here is the full code of adding Contextual Comments component to your page:

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

const room = await SuperVizRoom(DEVELOPER_KEY, {
  roomId: "<ROOM-ID>",
  group: {
    id: "<GROUP-ID>",
    name: "<GROUP-NAME>",
  },
  participant: {
    id: "<USER-ID>",
    name: "<USER-NAME>"
  },
});

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

room.addComponent(comments);
```

You can find this code ready to use [on the samples repository](https://github.com/superviz/samples), which provides practical examples of how to use our SDK. Feel free to check it out for further insights and code snippets.

Through this guide, you learned how to enhance your web applications with the addition of the Contextual Comments component from SuperViz. This feature not only makes it possible to have interactive discussions directly on the content but also adds a new layer of understanding and collaboration among users. 

To learn more about the functions and capabilities of the Contextual Comments component, we invite you to [visit our website](https://superviz.com/comments/) and if you have any questions or feedback, please join us at our [Discord server](https://discord.gg/m3j9xJscKG).