Customize Behavior

​

setInactivityTime

• Set the time it takes for a User to go inactive in milliseconds.
• 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.

Default: 300000ms (5 min)

• React / Next.js
• Other Frameworks

<VeltPresence inactivityTime={30000} />

const presenceElement = client.getPresenceElement();
presenceElement.setInactivityTime(30000);

​

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.
• 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.

• React / Next.js
• Other Frameworks

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

​

maxUsers

• 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.

• React / Next.js
• Other Frameworks

<VeltPresence maxUsers={3} />

​

onPresenceUserChange

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

• React / Next.js
• Other Frameworks

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

​

self

• Whether to include yourself in the list of Presence users.
• Default: true

• React / Next.js
• Other Frameworks

<VeltPresence self={false} />

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

​

onPresenceUserClick

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

• React / Next.js
• Other Frameworks

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

​

getOnlineUsersOnCurrentDocument

• Subscribe to a list of all online users who are either active or inactive on the current document.

• React / Next.js
• Other Frameworks

const presenceElement = client.getPresenceElement();
presenceElement.getOnlineUsersOnCurrentDocument().subscribe((presenceUsers) => {
  console.log("Online users: ", presenceUsers);
});