Presence Observer

Enable presence on specific areas

The PresenceObserver component observes user interaction on the DOM subtree it’s defined on, 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.

Usage

• React.js
• JavaScript

• 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

Name	Default	Description
location	current URL	The location to mark a user as present at when they are observed.
durable	false	When true, send durable presence updates as well as ephemeral presence updates; when false, only send ephemeral updates.
present-events	['mouseenter']	An array of event types that, when seen, indicate the user is present in this observer.
absent-events	['mouseleave']	An array of event types that, when seen, indicate the user has left this observer.
initial-state	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	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.

In this section