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.
This component pairs well with:
By itself, this component does not track and record presence; it only displays it. You should use it together with the
PresenceObservercomponent, which tracks 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"
></cord-presence-facepile>
default: current URLThe location to watch for users.
default: falseWhen true, only users in the component’s exact location are shown in the facepile. When false, users in any partially matching location are shown.
optionaldefault: falseWhen true, only users with ephemeral presence are shown in the facepile. When false, users with ephemeral or durable presence are shown.
optionaldefault: falseWhen true, users do not see their own avatars in the facepile. When false, users see themselves in the facepile.
optionaldefault: 5The 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.
default: horizontalThe orientation of the facepile. Can either be horizontal or vertical.
optionalCallback invoked when the presence information changes.
default: current URLThe location to watch for users.
default: falseWhen true, only users in the component’s exact location are shown in the facepile. When false, users in any partially matching location are shown.
optionaldefault: falseWhen true, only users with ephemeral presence are shown in the facepile. When false, users with ephemeral or durable presence are shown.
optionaldefault: falseWhen true, users do not see their own avatars in the facepile. When false, users see themselves in the facepile.
optionaldefault: 5The 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.
default: horizontalThe orientation of the facepile. Can either be horizontal or vertical.
This event is fired when the presence information changes.
These can be used to customize the component. You can learn more about customization here.
| Name | Default Value |
|---|---|
--cord-facepile-background-color |
--cord-color-base#FFFFFF |
--cord-tooltip-background-color |
--cord-color-brand-primary#121314 |
--cord-tooltip-content-color |
--cord-color-base#FFFFFF |
--cord-avatar-border-radius |
4px |