Skip to main content
  • React / Next.js
  • Other Frameworks
1

Import Presence Component

Import the Presence component from the React library.
import { VeltPresence } from '@veltdev/react';
2

Add Presence Component

Add it anywhere you want to see the User avatars.
<VeltPresence />
This component renders the avatars of Users on the same document in your web app. We automactically detect when Users are active on the document and render their avatars.
3

Test Integration

Test it out by opening the target page in two browsers with two different Users logged in.You should see the avatars of the Users rendered where you added the Presence component.
import { VeltPresence } from '@veltdev/react';

export default function App() {

  return (
    <div className="toolbar">
      <VeltPresence />
    </div>
  );
}