Link copied to clipboard!

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.

component-facepile-5f027a.png

Usage

  • 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