Components

Page Presence

See who has viewed a page, and when

When to use

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. The component also marks the current user as present on the page.

This component pairs well with:

How to use

If you use this component alongside Sidebar, you can turn off showing presence in the Sidebar by adding show-presence="false" to Sidebar.

import { PagePresence } from "@cord-sdk/react";

export const Example = () => (
  <div>
    <PagePresence excludeViewer={false} />
  </div>
);

<cord-page-presence exclude-viewer="false"></cord-page-presence>

Properties

Attributes & Events

location

optionaldefault: current URL

The location to watch for users.

exactMatch

optionaldefault: 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

optionaldefault: false

When true, only users with ephemeral presence are shown in the facepile. When false, users with ephemeral or durable presence are shown.

excludeViewer

optionaldefault: false

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

maxUsers

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

durable

optionaldefault: true

Whether to send durable presence updates. Ephemeral presence updates are always sent.

orientation

optionaldefault: horizontal

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

onUpdate

optional

Callback invoked when the presence information changes.

location

optionaldefault: current URL

The location to watch for users.

exact-match

optionaldefault: 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

optionaldefault: 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

optionaldefault: false

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

max-users

optionaldefault: 5

durable

optionaldefault: true

Whether to send durable presence updates. Ephemeral presence updates are always sent.

orientation

optionaldefault: horizontal

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

cord-page-presence: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`
`--cord-page-presence-avatar-size`	`20px`

Want to customize the component further?

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

Next up

In-depth presence

Understand the details behind presence

Presence facepile

Integrate presence within your content