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
- Using CDN
- Using Yarn
- Using pnpm
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:
1
Add script
tag to your html
Add the code below to the header of your application, before the </head>
tag:
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:
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:
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: