After setting up a presence tracker with the Liveblocks plugin, you might want to take things further and show where users are on the page in real time. That’s where live cursors come in.
With live cursors, you can:
If you prefer a video walkthrough, check out our step-by-step tutorial below. Otherwise, keep reading for the written guide:
This tutorial covers how we set up live cursors in the demo app. You can check out the full setup in the tutorial demo editor, or try it yourself in the live demo.
First, you’ll need to complete the presence tracker tutorial to set up the Liveblocks plugin and database.
Once that’s done, copy the page and prepare it for adding live cursors.
To track cursor positions, we need to expose HTML elements in Bubble. Go to the Settings tab, under the General section, and check the option to Expose the option to add an ID attribute to HTML elements
.
Group User
In the designer, go to the Group User
element and add an ID attribute. Choose any prefix (e.g., cursor
), and append it with Current cell's text
. This will allow the plugin to track each user’s cursor uniquely. We’ll use this prefix later in the Liveblocks - enter room
action.
Now, head to the Workflows tab. In the Liveblocks - enter room
action, update the following settings:
Enable position
to yes
.HTML ID prefix
to the prefix you chose in step 3 (e.g., cursor
).You can leave Hide default cursors
as is.
Preview the page and open it in multiple tabs. You’ll notice that as users move their cursors around the page, their avatars will follow the cursor movements.
Now that live cursors are up and running, explore the plugin reference to discover additional customization options.