Components

Presence Observer

Enable presence on specific areas

When to use

The PresenceObserver component observes user interaction on its DOM subtree, and marks the current user as present in the location when interaction is detected. The observer has no visual effect on the page.

The observer always registers the user as absent if the document is not currently visible per the Document.visibilityState API.

This component pairs well with:

Presence Facepile

How to use

By itself this component does not show who is present. To display this use together with the PresenceFacepile component.

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

export const Example = () => (
  <PresenceObserver location={{ "page": "index", "section": "content" }}>
    <div id="content">
      <p>lorem ipsum</p>
    </div>
  </PresenceObserver>
);

<cord-presence-observer location='{ "page": "index", "section": "content" }'>
  <div id="content">
    <p>lorem ipsum</p>
  </div>
</cord-presence-observer>

Properties

Attributes & Events

Properties
`location`	`optional`	`default: current URL`	The location in which to mark the user as present when the relevant DOM events are observed.
`durable`	`optional`	`default: false`	Whether to send durable presence updates. Ephemeral presence updates are always sent.
`presentEvents`	`optional`	`default: ['mouseenter']`	An array of event types that, when seen, indicate the user is present in this observer’s location.
`absentEvents`	`optional`	`default: ['mouseleave']`	An array of event types that, when seen, indicate the user has left this observer’s location.
`initialState`	`optional`	`default: undefined`	When provided, sets the initial presence state of the user in this observer, subject to future modification from events. This is necessary if the user is present within the observer at page load, and so no event from `present-events` will be fired to initialize their presence.
`observeDocument`	`optional`	`default: false`	When true, ignores the `present-events`, `absent-events`, and `initial-state` attributes and registers presence solely based on whether the document is currently visible.
`onChange`	`optional`	Callback invoked when presence state changes.

Attributes
`location`	`optional`	`default: current URL`	The location in which to mark the user as present when the relevant DOM events are observed.
`durable`	`optional`	`default: false`	Whether to send durable presence updates. Ephemeral presence updates are always sent.
`present-events`	`optional`	`default: ['mouseenter']`	An array of event types that, when seen, indicate the user is present in this observer’s location.
`absent-events`	`optional`	`default: ['mouseleave']`	An array of event types that, when seen, indicate the user has left this observer’s location.
`initial-state`	`optional`	`default: undefined`	When provided, sets the initial presence state of the user in this observer, subject to future modification from events. This is necessary if the user is present within the observer at page load, and so no event from `present-events` will be fired to initialize their presence.
`observe-document`	`optional`	`default: false`	When true, ignores the `present-events`, `absent-events`, and `initial-state` attributes and registers presence solely based on whether the document is currently visible.

Events
`cord-page-presence-observer:change`	This event is fired when presence state changes.

Next up

In-depth presence

Understand the details behind presence

Thread

Render a single conversation thread

On this page

When to use
How to use
Properties
Attributes & Events