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
PresenceObserver
component, 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 URL
The location to watch for users.
default: false
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.
optional
default: false
When true, only users with ephemeral presence are shown in the facepile. When false, users with ephemeral or durable presence are shown.
optional
default: false
When true, users do not see their own avatars in the facepile. When false, users see themselves in the facepile.
optional
default: 5
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.
default: horizontal
The orientation of the facepile. Can either be horizontal
or vertical
.
optional
Callback invoked when the presence information changes.
default: current URL
The location to watch for users.
default: false
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.
optional
default: false
When true, only users with ephemeral presence are shown in the facepile. When false, users with ephemeral or durable presence are shown.
optional
default: false
When true, users do not see their own avatars in the facepile. When false, users see themselves in the facepile.
optional
default: 5
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.
default: horizontal
The 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 |