Add Presence

Presence is the secret sauce behind amazing collaboration experiences

Now that you've got the Cord SDK installed, the first component to try out is the <PagePresence /> component.

Add Page Presence

In your app, add the following component:

// Add this import to the top of your React component file
import { PagePresence } from '@cord-sdk/react';

// Then add this component into your JSX code. The ideal place for the
// <PagePresence /> is the upper right-hand corner of the page.
<PagePresence />
Why Presence?

Most software suffers from a lack of social information. Even in applications that have added chat features, there is almost never enough social information to enable the users of those applications to discover where the meaningful conversations are happening.

The missing link is the sort of information we take for granted in the physical world. Who has been here? When were they last here? Which of these items in the list is the one my team mate was looking at? Our brains are extremely adept at identifying these cues -- so adept in fact that we don't even notice that we have done so.

What this means for collaboration in your application is that if you don't have enough social cues, you won't get the benefit of "richer" features like chat and real-time interactions.

Check out your work

At this point, you should have something in your UI similar to this:

An image of Cord's page presence component live in a page

What you're seeing here is real-time, multi-user page presence being tracked automatically by Cord. We call this a "facepile". In later steps, you'll be able to see multiple users.

Next Step: Customize how Cord looks in your app

In the next step, you'll change how the component looks →