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 NPM, PNPM, Yarn, and CDN.

Using NPM

1 Before we start

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

2 Install the package

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

npm install --save @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 ours components to your project:

• Video Conference
• Mouse Pointers
• Presence3D
• Contextual Comments
• Comments3D

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

Once instantiated, you can add one of ours components to your project:

• Video Conference
• Mouse Pointers
• Presence3D
• Contextual Comments
• Comments3D

Using Yarn

1 Before we start

Make sure your development environment has:

• Node.js (v14 or more recent) installed
• The yarn package manager installed.

2 Install the package

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

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 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 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 ours components to your project:

• Video Conference
• Mouse Pointers
• Presence3D
• Contextual Comments
• Comments3D

Using pnpm

1 Before we start

Make sure your development environment has Node.js (v16.14 or more recent) and pnpm installed.

2 Install the package

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

pnpm install --save @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 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 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 ours components to your project:

• Video Conference
• Mouse Pointers
• Presence3D
• Contextual Comments
• Comments3D