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
• Other Frameworks

<VeltCursor avatarMode={true} />

​

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
• Other Frameworks

<VeltCursor inactivityTime={300000} />

const cursorElement = client.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.

• React / Next.js
• Other Frameworks

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

const cursorElement = client.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
• Other Frameworks

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

​

getOnlineUsersOnCurrentDocument

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

• React / Next.js
• Other Frameworks

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