WhoIsOnline API Reference
The Who-is-On-line component allows you to see participants who connected to a room.
How to use
To initialize the Who-is-Online component, you can follow our quickstart guide.
Usage
import { WhoIsOnline } from "@superviz/sdk";
const whoIsOnline = new WhoIsOnline();
room.addComponent(whoIsOnline);
Properties
See below the options object to use when initializing the Who-is-Online:
Name | Type | Description |
---|---|---|
position | string | Specifies 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 |
styles | string | Optional custom CSS styles to be applied to the component. This allows for customization of the component's appearance. |
disablePresenceControls | boolean | If true it won't open any dropdown menu by interacting with the participant profile image. Default value: false |
disableGoToParticipant | boolean | Disables the GoTo option when clicking on another participant's avatar. Default value: false |
disableFollowParticipant | boolean | Disables the Follow option when clicking on another participant's avatar. Default value: false |
disablePrivateMode | boolean | Disables the Private Mode option when clicking on the current participant avatar. Default value: false |
disableGatherAll | boolean | Disables the Gather All option. Default value: false |
disableFollowMe | boolean | Disables 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 used with Mouse Pointers, 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);
}