See who has viewed a specific location, and when
The PresenceFacepile
component renders a “facepile” showing the avatars of users who are (or have been) present in a specific location — for example a section within a larger page.

Usage
By itself this component does not track and record presence, it only displays it. You must use this together with the
PresenceObserver
component which is responsible for tracking user interaction to record presence.
-
import { PresenceFacepile } from "@cord-sdk/react";
export const Example = () => (
<div>
<PresenceFacepile
location={{ page: "index", section: "content" }}
excludeViewer={false}
maxUsers={7}
/>
</div>
);
-
<cord-presence-facepile
location='{ "page": "index", "section": "content" }'
exclude-viewer="false"
max-users="7"
/>
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. |
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 |
In this section