Skip to main content
Version: Latest

Initialization

Overview​

The room is the main entry point to access all SDK functionality. It provides all the methods and flags you need to start integrating with the SDK components.

How to use​

To start using a room, you’ll need to import and call the library’s constructor method, passing your DEVELOPER_KEY as a parameter and the options object.

If you don’t have a DEVELOPER_KEY, you can see how to obtain on the developer portal in our "Setting Up Your Account" section in our documentation.

To add a room to your web page, use the following code:


  import SuperVizRoom from "@superviz/sdk";

  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>",
        avatar: {
          "imageUrl": "https://<PATH>",
          "model3DUrl": "https://<PATH>", 
        }
      },
      customColors: {
        'sv-primary-900': '16 29 70',
        'sv-primary-200': '141 164 239',
        'sv-primary': '58 92 204',
        'sv-gray-800': '250 250 252',
        'sv-gray-700': '233 229 239',
        'sv-gray-600': '201 196 209',
        'sv-gray-500': '174 169 184',
        'sv-gray-400': '126 122 136',
        'sv-gray-300': '87 83 95',
        'sv-gray-200': '57 54 62',
        'sv-gray-100': '38 36 42',
      },
    });

    return room;
  }

When initializing a room you must pass parameters for it to work properly. See below the available parameters:

NameTypeDescription
roomIdstringRequired. This a unique ID that you can create on your end. Using the same ID you will be able to enter the same room.

Default value: false
groupGroupRequired. You can organize your participants into groups. Usually, a group is a company or organization.
participantParticipantRequired. An object describing the user that will participate in the room.
customColorsColorsVariablesObject to customize the color scheme of your application.
debugbooleanEnable SDK logs in the browser console.
Default value: false

After you’ve initialized the SDK, you have the flexibility to implement our SDK methods for adding or removing any of our components, while also taking advantage of event handling capabilities through the Real-time Data Engine.

warning

Remember to consider the Monthly Activated User (MAU), which is calculated by every new entry of participant.id, of your plan when using Presence and Contextual Comments when testing and developing your application, check our pricing page for more details.

Methods​

Once you've initialized, you'll have access to methods that allow you to interact with the SDK and perform various tasks. Below are the methods available.

addComponent​

Once you've initialized the room, you may want to add components such as Video Conference or Real-time Mouse Pointers. The addComponent method facilitates this process. Here's an example of how to use it:

const room = await SuperVizRoom(DEVELOPER_KEY, {});

const videoConference = new VideoConference([params...]);

room.addComponent(videoConference);

removeComponent​

If you wish to remove previously added components, you can achieve this with the removeComponent method. Here's how to use it:

room.removeComponent(videoConference);

destroy​

If you wish to unload the room and its components, you can achieve this with the destroy method. Here's how to use it:

room.destroy();

Type Definitions​

Avatar​

Type: object

While the SuperViz SDK provides a range of default 3D avatars for meetings, you have the flexibility to enrich this experience by adding your own custom avatar for participants.

NameTypeDescription
imageUrlstringRequired. Path to thumbnail image.
Supported formats: .png and .jpg.
model3DUrlstringPath to a 3D model. Only applicable when using Presence3D components
Supported formats: .glb and .gltf.

Example:

avatar: {
	"imageUrl": "https://<PATH>",
	"model3DUrl": "https://<PATH>",
}

ColorsVariables​

Type: object

Default value: SuperViz default colors.

You can customize the color scheme to create your own theme. The color variables are represented as RGB values. For additional information on how to personalize, please refer to the documentation on how to theme your application.

Example:

customColors: {
  svBlack: "#ff0000",
  svDanger: "#ff0000",
  svGray: "#ff0000",
  svGray100: "#ff0000",
  svGray200: "#ff0000",
  svGray300: "#ff0000",
  svGray400: "#ff0000",
  svGray500: "#ff0000",
  svGray600: "#ff0000",
  svGray700: "#ff0000",
  svGray800: "#ff0000",
  svPrimary: "#ff0000",
  svPrimary200: "#ff0000",
  svPrimary900: "#ff0000",
  svSecondary: "#ff0000",
  svSuccess: "#ff0000",
  svWhite: "#ff0000",
}

Group​

Type: object

You can organize your participants into groups, typically representing companies or organizations.

NameTypeDescription
idstringA unique ID that identifies the group. Usually, this ID matches your internal ID of a specific company or organization.
namestringThe name of the group.

Example:

group: {
  id: "<GROUP-ID>",
  name: "<GROUP-NAME>",
}

Participant​

Type: object

An object describing the user that will participate in the room.

NameTypeDescription
idstringRequired. Identifier of the participant who is entering the room. Usually, this ID matches the internal ID of your users. If a participant is a guest, you should create a unique ID for this participant as well.
namestringThe name of the participant who will enter the room.
avatarAvatarUse this field to incorporate your own custom avatar for the user.

Example:

participant: {
  id: "<USER-ID>",
  name: "<USER-NAME>",
	avatar: {
		"imageUrl": "https://<PATH>",
		"model3DUrl": "https://<PATH>", 
	}
}