Quickstart

Welcome to the SuperViz Collaboration Quickstart guide! This step-by-step guide will help you integrate our collaboration features into your web application using JavaScript. If you prefer to use React, you can switch to our React-specific SDK by selecting the appropriate language in the dropdown menu.

JavaScript with package manager
JavaScript with CDN

1

Before we start

Ensure your development environment is set up with Node.js (v14 or more recent) and either npm or yarn for package management.

2

Install the package

Install the SDK package with the npm package:

npm install --save @superviz/sdk

3

Import the Room

After installation, import the SuperVizRoom from the SDK into your application code:

import SuperVizRoom from '@superviz/sdk'

4

Initialize a Room

Next, initialize a room using your DEVELOPER_KEY and an options object. The room serves as the main access point for all collaboration features, with various methods to add components.

For details on the options object, refer to our API Reference page.

async function initializeSuperVizRoom() {
  const room = await SuperVizRoom(DEVELOPER_KEY, {
    roomId: "ROOM_ID",
    group: {
      id: "GROUP_ID",
      name: "GROUP_NAME",
    },
    participant: {
      id: "USER_ID",
      name: "USER_NAME"
    },
  })

  return room
}

5

Add a component to the room

Once your room is initialized, you can enhance your application by adding various collaboration components. Simply call the relevant methods to add:

Mouse Pointers

Who-is-Online

Form Elements

Video huddle

Contextual Comments

Text editor

1

Add script tag to your HTML

Add the code below to the header of your application, before the </head> tag:

tip

When using the CDN, you need to run your application on a local web server while working on localhost. This step is important to make sure the SDK works correctly during development. You can use simple tools like http-server or live-server to set up a local web server on your computer.

<script type="module" src="https://unpkg.com/@superviz/sdk@latest"></script>

2

Initialize a Room

Next, initialize a room using your DEVELOPER_KEY and an options object. The room serves as the main access point for all collaboration features, with various methods to add components.

For details on the options object, refer to our API Reference page.

async function initializeSuperVizRoom() {
  const room = await window.SuperVizRoom.init(DEVELOPER_KEY, {
    roomId: "ROOM_ID",
    group: {
      id: "GROUP_ID",
      name: "GROUP_NAME",
    },
    participant: {
      id: "USER_ID",
      name: "USER_NAME"
    },
  });

  return room;
}

3

Read the "Using as a CDN" page

While going through this documentation, keep in mind that some examples and explanations will be specific to the package context.

Ensure to adapt these as necessary while utilizing the SDK via CDN. On the Using as a CDN, you will find detailed instructions on how to use our SDK as a CDN, including the technical differences from using it as a package, and how to adapt the examples and explanations given in this documentation for a CDN context.

4

Add a component to the room

Once your room is initialized, you can enhance your application by adding various collaboration components. Simply call the relevant methods to add: