Link copied to clipboard!
Mobile navigation button - closed state

Presence Facepile

See who has viewed a specific location, and when


When to use

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.

This component pairs well with:


How to use

By itself, this component does not track and record presence; it only displays it. You should use it together with the PresenceObserver component, which tracks 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"
    ></cord-presence-facepile>
    

Properties

Attributes & Events

Properties
location default: current URL

The location to watch for users.

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

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

excludeViewer optional default: false

When true, users do not see their own avatars in the facepile. When false, users see themselves in the facepile.

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

orientation default: horizontal

The orientation of the facepile. Can either be horizontal or vertical.

onUpdate optional

Callback invoked when the presence information changes.

Attributes
location default: current URL

The location to watch for users.

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

only-present-users 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.

exclude-viewer optional default: false

When true, users do not see their own avatars in the facepile. When false, users see themselves in the facepile.

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

orientation default: horizontal

The orientation of the facepile. Can either be horizontal or vertical.

Events
cord-presence-facepile:update

This event is fired when the presence information changes.


CSS Variables

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

Next up