See who has viewed a page, and when
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.

Usage
-
import { PagePresence } from "@cord-sdk/react";
export const Example = () => (
<div>
<PagePresence excludeViewer={false} />
</div>
);
-
<cord-page-presence exclude-viewer="false" />
Properties
Name |
Default |
Description |
location |
current URL |
The location to watch for users. |
exact-match |
false |
When true, displays only users on the specific location given, rather than any matching location. |
only-present-users |
false |
When true, does not display users with only durable presence. |
exclude-viewer |
false |
When true, do not display the current user in the facepile |
max-users |
5 |
The maximum number of avatars to display. 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. |
durable |
true |
When true, send durable presence updates as well as ephemeral presence updates; when false, only send ephemeral updates. |
orientation |
horizontal |
The orientation of the facepile. Can either be horizontal or vertical . |
CSS Custom Properties
Name |
Default |
--cord-avatar-border-radius |
4px |
--cord-avatar-text-color |
--cord-color-base |
--cord-avatar-background-color |
--cord-color-brand-primary |
--cord-facepile-background-color |
--cord-color-base |
--cord-facepile-avatar-border-width |
2px |
--cord-facepile-avatar-overlap |
4px |
--cord-tooltip-background-color |
--cord-color-brand-primary |
--cord-tooltip-content-color |
--cord-color-base |
--cord-page-presence-avatar-size |
20px |
In this section