import { VeltPresence } from '@veltdev/react';

export default function App() {

  return (
    <div className="toolbar">
      <VeltPresence
        inactivityTime={30000} {/* 1) Set inactivity time */}
        location={{page: 1}} {/* 2) Add Presence to a Location */}
        maxUsers={3} {/* 3) Set max users */}
        flockMode={true} {/* 4) Enable Flock Mode */}
        onPresenceUserChange={(presenceUsers) => yourMethod(presenceUsers)} {/* 5) Subscribe to changes in User Presence */}
      />
    </div>
  );
}
  • React / Next.js

  • HTML

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)} />