Skip to main content


The Who-is-On-line component allows you to see participants who are connected in a room.

Before we start

Before utilizing the Who-is-Online component, it is essential to initialize a room with a defined name and ID for the participant and the group.

How to use

To add a Who-is-Online component on your page, you can use the following code:

import { WhoIsOnline } from "@superviz/sdk"

const whoIsOnline = new WhoIsOnline({
position: "top-right"


See below the options object to use when initializing the Who-is-Online:

positionstringSpecifies the location where the component will be displayed. It can be: top-right, top-left, bottom-right, bottom-left, or an ID of an HTML element.
Default value: top-right
disablePresenceControlsbooleanIf true it won't open any dropdown menu by interacting with the participant profile image.
Default value: false
disableGoToParticipantbooleanDisables the GoTo option when clicking on another participant's avatar.
Default value: false
disableFollowParticipantbooleanDisables the Follow option when clicking on another participant's avatar.
Default value: false
disablePrivateModebooleanDisables the Private Mode option when clicking on the current participant avatar.
Default value: false
disableGatherAllbooleanDisables the Gather All option.
Default value: false
disableFollowMebooleanDisables the Follow Me option.
Default value: false

GoTo and Follow options

The GoTo and Follow options allow you to navigate to a participant's location or follow their movements. It works automatically in 3D environments, such as the Matterport, ThreeJS, and Autodesk Viewer.

If you want to follow participants Mouse Pointers in a 2D environment, you will need to use a callback function when creating the Mouse Pointer component, like this:

const mousepointers = new MousePointers("#canvasId", {
onGoToPresence: methodCallback

function methodCallback(coordinates){
console.log("X position: " + coordinates.x);
console.log("Y position: " + coordinates.y);