Customize Behavior

1. Set inactivity time

Set the time it takes for a User to go inactive in milliseconds.

Default: 300000ms (5 min)

<VeltPresence inactivityTime={30000} />

By default we mark a User as inactive if they do not take any action on the document within a 5 mins timeframe.

If they unfocus the tab, we mark them inactive immediately.

2. Add Presence to a Location

Show Presence on a Location.

Set the location attribute on the Presence element. When there are Users at that location, their avatars will show in this Presence element.

<VeltPresence location={{page: 1}}/>

Eg: For a Presentation tool, you can add Presence component at the main document level and add another Presence component on the slide thumbnails. This will render avatars at both presentation level & slide thumbnail level. For slide thumbnails, it will only show Users active on that slide.

3. Set max users

Set how many Presence avatars to display at a time.

You can set this via the maxUsers attribute. Any extra avatars will be hidden and shown in an avatar which indicates the number of extra Users.

<VeltPresence maxUsers={3} />

4. Enable Follow Me Mode

To enable Follow Me Mode, set the flockMode attribute to true.

<VeltPresence flockMode={true} />

This will enable Follow Me mode as an option for your Users globally, wherever Presenceis shown. To start the shared flock session, click on a User's avatar to start following them.

Learn more about it in the Flock Mode feature section.

5. Subscribe to changes in User Presence

Whenever the Presence for any User changes, we emit this event with the updated list of Users currently online on this document.

<VeltPresence onPresenceUserChange={(presenceUsers) => yourMethod(presenceUsers)} />

6. Dark Mode

Whether dark mode is enabled.

Default: false

<VeltPresence darkMode={true} />

7. Include Self in List of Presence Users

Whether to include yourself in the list of Presence users.

Default: true

<VeltPresence self={false} />

API Method:

const presenceElement = client.getPresenceElement();
presenceElement.enableSelf();
presenceElement.disableSelf();

8. Handle Presence User Click Events

To handle click events on Presence avatar circles, pass an event handler to the onPresenceUserClick event.

const onPresenceUserClickEvent = (user) => {
  console.log("Clicked presence user: ", user);
}
	
<VeltPresence onPresenceUserClick={(user) => onPresenceUserClickEvent(user)} />