Add live cursors and user counters to your website!
Head over to the Liveblocks dashboard and obtain a public key, under the "API Keys" tab. Then paste the following to your page, replacing LIVEBLOCKS_PUBLIC_KEY
with your key:
import { Cursors, PresenceCounter } from "https://cdn.motif.land/motifliveblocks@0.0.1"
<Cursors
publicApiKey="LIVEBLOCKS_PUBLIC_KEY"
roomName="landing-page" />
<PresenceCounter
publicApiKey="LIVEBLOCKS_PUBLIC_KEY"
roomName="landing-page" />
Once your page is published, open it up in two different windows, and you will start seeing cursors appear, and a live counter!
When adding this component to your page, live cursors will show up, corresponding to those of your visitors.
<Cursors
publicApiKey="LIVEBLOCKS_PUBLIC_KEY"
roomName="YOUR_ROOM_NAME" />
Property | Description |
---|---|
publicApiKey | Your Liveblocks public API key (required). |
roomName | An identifier for your room. This could be one per page. |
colors | A list of the form ["#ff0000", "#00ff00", ...] specifying the cursor colors (optional). |
Display a label with the number of users currently visiting your page:
<PresenceCounter
publicApiKey="LIVEBLOCKS_PUBLIC_KEY"
roomName="YOUR_ROOM_NAME" />
Property | Description |
---|---|
publicApiKey | Your Liveblocks public API key (required). |
roomName | An identifier for your room. This could be one per page. |
countOnly | If true, only display the count. |