Components

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`

Want to customize the component further?

Head to the full list of CSS Variables available for the Presence Facepile →

Next up

In-depth presence

Understand the details behind presence

Presence Observer

Track and record presence

On this page

When to use
How to use
Properties
Attributes & Events
CSS Variables