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.

Usage

• React.js
• JavaScript

• 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