See user avatar icons for who has viewed a specific location, and when
The PresenceFacepile
component renders a "facepile" showing the avatar icons 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 <PresenceObserver />
component, which tracks user interaction to record presence.
import { PresenceFacepile } from "@cord-sdk/react";
export const Example = () => (
<>
// The PresenceFacepile displays who is present at the location
<PresenceFacepile
location={{ page: "index", section: "content" }}
excludeViewer={false}
maxUsers={7}
/>
// The PresenceObserver tracks and marks users as present in the
// location when user interaction is detected
<PresenceObserver location={{ page: "index", section: "content" }} >
<p>Try hovering over me</p>
</PresenceObserver>
</>
);
true
, only users in the component's exact
location are shown in the facepile.
When false
, users in any partially matching location are shown.false
.true
, only users with ephemeral presence are
shown in the facepile. When false
, users with ephemeral or durable
presence are shown.false
.true
, users do not see their own avatars in
the facepile. When false
, users see themselves in the facepile.false
.horizontal
or vertical
.horizontal
.--cord-facepile-background-color:
var(--cord-color-base, #FFFFFF);
--cord-avatar-border-radius:
var(--cord-space-3xs, 4px);
--cord-avatar-text-color:
var(--cord-color-base, #FFFFFF);
--cord-avatar-background-color:
var(--cord-color-brand-primary, #121314);
--cord-avatar-text-transform:
none;
--cord-tooltip-background-color:
var(--cord-color-brand-primary, #121314);
--cord-tooltip-content-color:
var(--cord-color-base, #FFFFFF);