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. The component also marks the current user as present on the page.
This component pairs well with:
If you use this component alongside Sidebar, you can turn off showing presence in the Sidebar by adding
show-presence="false"
toSidebar
.
import { PagePresence } from "@cord-sdk/react";
export const Example = () => (
<div>
<PagePresence excludeViewer={false} />
</div>
);
<cord-page-presence exclude-viewer="false"></cord-page-presence>
optional
default: current URL
The location to watch for users.
optional
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.
optional
default: true
Whether to send durable presence updates. Ephemeral presence updates are always sent.
optional
default: horizontal
The orientation of the facepile. Can either be horizontal
or vertical
.
optional
Callback invoked when the presence information changes.
optional
default: current URL
The location to watch for users.
optional
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.
optional
default: true
Whether to send durable presence updates. Ephemeral presence updates are always sent.
optional
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 |
--cord-page-presence-avatar-size |
20px |