Como adicionar indicadores de presença na sua página web

Neste artigo vou mostrar como, em poucas linhas de código, adicionar indicadores de presença na sua página, como mostrar quem está online na página e visualização em tempo real dos cursores.

Tais indicadores estão presentes nas principais ferramentas que permitem colaboração em tempo real como Google Docs, Notion, Figma↳Figma3 conteúdosFigma Dev Mode funciona mesmo? Testando na práticaDev (Back & Front) · mar 2025Claude Design: nova aposta da Anthropic contra Figma e MicrosoftProduto & UX · abr 2026A importância do HTML e CSS para quem trabalha com UI Design e Design SystemProduto & UX · dez 2024Ver tudo em Produto & UX →. Elas são parte essencial para novos produtos digitais que estão chegando ao mercado.

O conceito de uma sala

Quando falamos de permitir colaboração em tempo real com as pessoas online, primeiro precisamos definir uma sala. Ela é o ambiente em que todos que estiverem dentro dela serão vistos. No caso do Google Docs, cada documento aberto é uma sala. Fica a seu critério entender o que é uma sala, mas normalmente ela compartilha o mesmo caminho (URL) entre os participantes.

E como construir uma sala digitalmente? Para isso iremos utilizar a SuperViz, que é um SDK que permitirá criar uma sala rapidamente e adicionar os componentes desejados.

Após instalar o pacote @superviz/sdk e obter uma chave gratuitamente no painel da SuperViz, adicione o seguinte código a sua página:

// Import the SuperViz SDK
import SuperVizRoom from '@superviz/sdk';

// Create a room object
const room = await SuperVizRoom(DEVELOPER_KEY, {
  roomId: "<ROOM-ID>",
  group: {
    id: "<GROUP-ID>",
    name: "<GROUP-NAME>",
  },
  participant: {
    id: "<USER-ID>",
    name: "<USER-NAME>"
  },
});

Ao construir uma sala, você adiciona também informações do usuário que estará nesta sala. Com isso feito, podemos avançar para adicionar os nossos componentes na sala.

Mouse Pointers

Para adicionar a capacidade de visualizar os ponteiros do mouse em tempo real dos participantes na sua sala, precisamos criar um componente de Mouse Pointers, que pode ser adicionado à sua sala com apenas três linhas de código:

import { MousePointers } from "@superviz/sdk/lib/components"

const mousePointers = new MousePointers("meu-id");
room.addComponent(mousePointers);

Troque o meu-id pelo id de seu elemento canvas ou utilize um elemento HTML↳HTML45 conteúdosA importância do HTML e CSS para quem trabalha com UI Design e Design SystemProduto & UX · dez 2024Como hostear seu site HTML gratuitamente com GitHub PagesDev (Back & Front) · jun 2025SQL Server – Como criar um versionamento de código das suas Stored Procedures em HTML e com comentários da alteraçãoData · nov 2020Ver tudo em Dev (Back & Front) → para determinar a área em que o ponteiro será rastreado. Para mais detalhes sobre como fazer isso, visualize a documentação do componente.

Com isso, cada vez que um usuário mover o mouse na tela, outros participantes conseguirão visualizar a localização em tempo real de seu ponteiro, conforme exibido na imagem abaixo.

Who-is-Online

O componente Who-is-Online é uma ótima maneira de saber quem está online na sala em tempo real. Para adicionar este componente à sua sala, você pode usar o seguinte código:

import { WhoIsOnline } from "@superviz/sdk/lib/components"

const whoIsOnline = new WhoIsOnline("participantes");
room.addComponent(whoIsOnline);

O Who-is-Online será exibido no elemento que conter o ID #participantes. Isso permitirá que todos na sala vejam quem está online, fortalecendo a experiência de colaboração em tempo real.

Em resumo, a adição de indicadores de presença como Mouse Pointers e Who-is-Online na sua página web consegue adicionar em pouco tempo funções essenciais para ferramentas modernas com poucas linhas de código.