Quickstart

Welcome to the SuperViz SDK Quickstart guide. In this guide, we provide a straightforward step-by-step process to help you integrate our SDK. Depending on your preference, we’ve detailed methods using React, JavaScript with package manager and JavaScript CDN.

React

1 Before we start

Make sure your development environment has Node.js (v14 or more recent) and npm/yarn installed.

2 Install the package

Install SuperViz SDK in your Node.js-powered apps with the npm package:

NPM:

npm install --save @superviz/react-sdk

YARN:

yarn add @superviz/react-sdk

3 Import the Room

Once installed, import the Room to your code:

import { SuperVizRoomProvider } from "@superviz/react-sdk";

4 Initialize the SDK

After importing the provider, you can start the room by passing your developer key and the room parameters as properties of the provider. The room provider is the primary gateway to access all SDK functions.

<SuperVizRoomProvider
    developerKey={DEVELOPER_KEY}
    group={{
      id: "<GROUP-ID>",
      name: "<GROUP-NAME>",
    }}
    participant={{
      id: "<USER-ID>",
      name: "<USER-NAME>",
    }}
    roomId="<ROOM-ID>"
    >
</SuperVizRoomProvider>

5 Add one of the SDK Components to the room

Once instantiated, you can add one of our components to your application:

• Presence
• Contextual Comments
• Video Conference

JavaScript with package manager

1 Before we start

Make sure your development environment has Node.js (v14 or more recent) and npm/yarn installed.

2 Install the package

Install SuperViz SDK in your Node.js-powered apps with the npm package:

NPM:

npm install --save @superviz/sdk

YARN:

yarn add @superviz/sdk

3 Import the Room

Once installed, import the Room to your code:

import SuperVizRoom from '@superviz/sdk'

4 Initialize the SDK

After importing the room you can initialize passing your DEVELOPER_KEY as a parameter and the options object. You can see details for the options object on the Room Initialization page.

The room is your primary gateway to access all SDK features, offering the essential methods to add its components.

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 one of the SDK Components to the room

Once instantiated, you can add one of our components to your application:

• Presence
• Contextual Comments
• Video Conference

JavaScript with CDN

1 Add script tag to your html

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

tip

If you're using the CDN, please note that it needs to be served from a local web server when working on localhost. This ensures that the SDK functions correctly during development. You can use tools like http-server or live-server to serve the SDK on your local machine.

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

2 Initialize the SDK

After importing the SDK you can initialize passing your DEVELOPER_KEY as a parameter and the options object. You can see details for the options object on the SDK Initialization page.

The SuperViz SDK is your primary gateway to access all SDK features, offering the essential methods to add its components.

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 one of the SDK Components to the room

Once instantiated, you can add one of our components to your application:

• Presence
• Contextual Comments
• Video Conference

tip

Check out the Samples for each component of our SDK to help you get started. It has samples using JavaScript (as CDN and as a package), TypeScript, React, or Vue.