Page Presence

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.

Usage

• React.js
• JavaScript

• import { PagePresence } from "@cord-sdk/react";
  
  export const Example = () => (
    <div>
      <PagePresence excludeViewer={false} />
    </div>
  );
  

• <cord-page-presence exclude-viewer="false" />
  

Properties

Name	Default	Description
location	current URL	The location to watch for users.
exact-match	false	When true, displays only users on the specific location given, rather than any matching location.
only-present-users	false	When true, does not display users with only durable presence.
exclude-viewer	false	When true, do not display the current user in the facepile
max-users	5	The maximum number of avatars to display. 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.
durable	true	When true, send durable presence updates as well as ephemeral presence updates; when false, only send ephemeral updates.
orientation	horizontal	The orientation of the facepile. Can either be horizontal or vertical.

CSS Custom Properties

Name	Default
--cord-avatar-border-radius	4px
--cord-avatar-text-color	--cord-color-base
--cord-avatar-background-color	--cord-color-brand-primary
--cord-facepile-background-color	--cord-color-base
--cord-facepile-avatar-border-width	2px
--cord-facepile-avatar-overlap	4px
--cord-tooltip-background-color	--cord-color-brand-primary
--cord-tooltip-content-color	--cord-color-base
--cord-page-presence-avatar-size	20px

In this section