Link copied to clipboard!

Presence Facepile

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.

component-presence-facepile.png

Usage

By itself this component does not track and record presence, it only displays it. You must use this together with the PresenceObserver component which is responsible for tracking 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"
    />
    

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.
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

In this section