How to use Mouse Pointers to enhance user experience

Posted by | January 18, 2024

With the rise of remote work, the need for effective online collaboration tools is more crucial than ever. When speaking about online collaboration, one thing that can make a significant difference is the use of presence indicators, like live cursors that can be found when using tools like Miro or Figma.

By the end of this guide, you should be able to implement real-time tracking cursor movement from the users, creating a more interactive and collaborative environment within your web applications, thereby augmenting the overall user experience, in just a few minutes.

Install SuperViz SDK

Before you can start using SuperViz, you’ll need to install the @superviz/sdk package. You can do this using npm or yarn. If you’re using npm, run the following command in your terminal: npm install @superviz/sdk. If you’re using yarn, the command will be yarn add @superviz/sdk.

Once the package has been installed, you can import it into your project:

1import SuperViz from "@superviz/sdk"

Creating a room for collaboration

To add the mouse cursor presence component to your web page, you first need to initialize a room with SuperViz. A room is a virtual space where users can join and collaborate. When creating a room, you can specify a unique ID for it.

To create a room, you need to use the SuperVizRoom that’s available from the SDK package, which takes the Developer Key and an object as a parameter. The object should have the following properties:

  • id: The ID of the room, which should be a unique string shared between the participants of that room.
  • participant: An object that contains information about the current user, such as name, id.
  • group: An object that contains information about the group that the user belongs to, such as name and id.

Here’s an example of how to create a room with SuperViz:

1// Import the SuperViz SDK
2import SuperVizRoom from '@superviz/sdk';
3
4// Create a room object
5const room = await SuperVizRoom(DEVELOPER_KEY, {
6 roomId: "<ROOM-ID>",
7 group: {
8 id: "<GROUP-ID>",
9 name: "<GROUP-NAME>",
10 },
11 participant: {
12 id: "<USER-ID>",
13 name: "<USER-NAME>"
14 },
15});

Please note that when you create a room you will need to pass your DEVELOPER_KEY as a parameter. You can retrieve a free DEVELOPER_KEY at superviz.com

Once you have created a room, you can use the room object to add components.

Add mouse pointers component

You will need to have a space where the cursors will be tracked, for that you will need an HTML canvas element with a defined ID.

1<canvas id="my-id" width="540" height="540"></canvas>

Then to add a Mouse Pointers component to the #my-id element, use the following code, on JavaScript:

1import { MousePointers } from "@superviz/sdk/lib/components"
2
3const mousePointers = new MousePointers("my-id");
4room.addComponent(mousePointers);

Here is the full code of adding the presence indicator of live cursors component to your page:

1import SuperVizRoom from '@superviz/sdk';
2import { MousePointers } from "@superviz/sdk/lib/components"
3
4const room = await SuperVizRoom(DEVELOPER_KEY, {
5 roomId: "<ROOM-ID>",
6 group: {
7 id: "<GROUP-ID>",
8 name: "<GROUP-NAME>",
9 },
10 participant: {
11 id: "<USER-ID>",
12 name: "<USER-NAME>"
13 },
14});
15
16const mousePointers = new MousePointers("my-id");
17room.addComponent(mousePointers);

You can find this code ready to use on the samples repository, which provides practical examples of how to use our SDK. Feel free to check it out for further insights and code snippets.

SuperViz makes it easy to add a Mouse Pointers component to your website. This feature can improve the way your users interact and work together on your web app.

You can always reach out to us on our Discord server if you need any help or have any feedback.

Recent posts

Pub/Sub pattern vs Observer Pattern: what is the difference?

July 04, 2024

Design Pattern #4 - Publisher/Subscriber Pattern

June 27, 2024

Design Pattern #3 - Observer Pattern

June 20, 2024