Cord LogoDocs
Sign inStart now

Page Presence

Components /
Ask the Community

See who has viewed a page, and when

Live Demo

When to use #

The PagePresence component renders a "facepile" showing the avatars of users who are (or have been) present on that page. Users will be able to see who is viewing the page now, and when others were last online via tooltips. The component also marks the current user as present on the page.

This component pairs well with:

How to use #

If you use this component alongside Sidebar, you can turn off showing presence in the Sidebar by adding showPresence={false} to Sidebar.

React:
import { PagePresence } from "@cord-sdk/react";

export const Example = () => (
  <div>
    <PagePresence groupId="my-group" excludeViewer={false}  />
  </div>
);
Vanilla JavaScript:
<cord-page-presence group-id="my-group" exclude-viewer="false"></cord-page-presence>
import { PagePresence } from "@cord-sdk/react";

export const Example = () => (
  <div>
    <PagePresence groupId="my-group" excludeViewer={false}  />
  </div>
);
Copy

Properties #

location #

optional
string
The location to watch for users. The default is set to the current URL.

groupId #

required
string
The group which should be able to see the user's presence. The facepile will show users which are present in all groups the user is a member of.

exactMatch #

optional
boolean
When true, only users in the component's exact location are shown in the facepile. When false, users in any partially matching location are shown.
The default is set to false.

onlyPresentUsers #

optional
boolean
When true, only users with ephemeral presence are shown in the facepile. When false, users with ephemeral or durable presence are shown.

excludeViewer #

optional
boolean
When true, users do not see their own avatars in the facepile. When false, users see themselves in the facepile.
The default is set to false.

maxUsers #

optional
number
The maximum number of avatars to display in the facepile. If there are more than this many avatars to show, a "+N" indicator will be shown after the faces to indicate how many avatars are not being shown.
The default is set to 5.

durable #

optional
boolean
Whether to send durable presence updates. Ephemeral presence updates are always sent.
The default is set to true.

onUpdate #

optional
function
Callback invoked when the presence information changes.

CSS customization #

If you want to customize this component, you can target the classes below in your app's CSS. These are guaranteed to be stable.

Class nameDescription
.cord-facepile
Applied to the container div. This class is always present.
.cord-other-users
Applied to the "+N" indicator, which is shown after the faces to indicate how many avatars are not being shown.

Not finding the answer you need? Ask our Developer Community

Ask Cordy