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 groupId="my-first-group" />▶ 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:
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 #
Not finding the answer you need? Ask our Developer Community