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 showPresence={false}
to Sidebar
.
import { PagePresence } from "@cord-sdk/react";
export const Example = () => (
<div>
<PagePresence excludeViewer={false} />
</div>
);
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.true
, users do not see their own avatars in
the facepile. When false
, users see themselves in the facepile.false
.true
.horizontal
or vertical
.horizontal
.These can be used to customize the component. You can learn more about customization here.
--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-facepile-background-color:
var(--cord-color-base, #FFFFFF);