> ## Documentation Index
> Fetch the complete documentation index at: https://tools.lunchpaillabs.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Add live cursors
After setting up a [presence tracker](/bubble/liveblocks/how-tos/presence) 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:
* **Track user movement**: See where each user’s cursor is as they navigate the page.
* **Show collaborative editing positions**: Visualize where users are making edits in real-time.
* **Enhance collaborative experiences**: Provide real-time visual feedback for multiple users working on the same document.
If you prefer a video walkthrough, check out our step-by-step tutorial below. Otherwise, keep reading for the written guide:
## What We'll Build
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](https://bubble.io/page?id=lpl-liveblocks\&tab=tabs-1\&name=live-cursor-tutorial\&type=page), or try it yourself in the [live demo](https://lpl-liveblocks.bubbleapps.io/version-test/live-cursors).
## 1. Set up Your App and Plugin for Presence
First, you’ll need to complete the [presence tracker tutorial](/bubble/liveblocks/how-tos/presence) to set up the Liveblocks plugin and database.
Once that’s done, copy the page and prepare it for adding live cursors.
## 2. Expose HTML Elements in Bubble
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`.
## 3. Add an ID to `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.
## 4. Modify the Workflow to Track Cursors
Now, head to the **Workflows** tab. In the `Liveblocks - enter room` action, update the following settings:
* Set `Enable position` to `yes`.
* Set `HTML ID prefix` to the prefix you chose in [step 3](#3-add-an-id-to-group-user) (e.g., `cursor`).
You can leave `Hide default cursors` as is.
## 5. Test It Out
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.
***
## Next Steps
Now that live cursors are up and running, explore the [plugin reference](/bubble/liveblocks/plugin-reference/elements/liveblocks-presence) to discover additional customization options.
View our options for free community and priority support.
Post your feature request on our
idea board.