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/collaboration";
const whoIsOnline = new 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 trueit 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);
}