Customize Behavior

avatarMode

• Show the user’s avatar floating next to their cursor instead of their name.
• Enabling this mode will allow you to show the user’s avatar in context with the cursor.

React / Next.js

<VeltCursor avatarMode={true} />

Other Frameworks

<velt-cursor avatar-mode="true"></velt-cursor>

setInactivityTime

• Set the time it takes for a user to go inactive in milliseconds.
• By default we mark a user as inactive if they do not take any action on the document within a 5 mins timeframe.
• If they unfocus the tab, we mark them inactive immediately.

React / Next.js

<VeltCursor inactivityTime={300000} />

Using API:

const cursorElement = client.getCursorElement();
cursorElement.setInactivityTime(300000);

Other Frameworks

<velt-cursor inactivity-time="300000"></velt-cursor>

Using API:

const cursorElement = Velt.getCursorElement();
cursorElement.setInactivityTime(300000);

allowedElementIds

• Provide a list of element IDs where the cursors should show.
• If you provide a list of element IDs, we will only show cursors that hover over those specific elements.
• For eg: For an app with canvas and tool picker: You can whitelist the canvas ID so that the cursors are only visible on the canvas and not the tool picker.

You must pass a string into allowedElementIds instead of an object

React / Next.js

<VeltCursor allowedElementIds={JSON.stringify(['element-1', 'element-2'])} />

Using API:

const cursorElement = client.getCursorElement();
cursorElement.allowedElementIds(['element-1', 'element-2']);

Other Frameworks

<velt-cursor allowed-element-ids='["element-1", "element-2"]'></velt-cursor>

Using API:

const cursorElement = Velt.getCursorElement();
cursorElement.allowedElementIds(['element-1', 'element-2']);

onCursorUserChange

• Whenever the cursor for any user changes, we emit this event with the updated list of users currently online on this document with their cursor positions.

React / Next.js

<VeltCursor onCursorUserChange={(cursorUsers) => yourMethod(cursorUsers)} />

Other Frameworks

if(Velt){
  const cursorTag = document.querySelector('velt-cursor');
	cursorTag.addEventListener('onCursorUserChange', (event) => {
      console.log("onCursorUserChange", event.detail);
  });
}

getOnlineUsersOnCurrentDocument

• Subscribe to a list of all online users who are either active or inactive on the current document.

React / Next.js

const cursorElement = client.getCursorElement();
cursorElement.getOnlineUsersOnCurrentDocument().subscribe((cursorUsers) => {
  console.log("Online users: ", cursorUsers);
});

Other Frameworks

const cursorElement = Velt.getCursorElement();
cursorElement.getOnlineUsersOnCurrentDocument().subscribe((cursorUsers) => {
  console.log("Online users: ", cursorUsers);
});