> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

> [tab] React / Next.js
>
> ```js theme={null}
> <VeltCursor avatarMode={true} />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <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.

> [tab] React / Next.js
>
> ```js theme={null}
> <VeltCursor inactivityTime={300000} />
> ```
>
> Using API:
>
> ```js theme={null}
> const cursorElement = client.getCursorElement();
> cursorElement.setInactivityTime(300000);
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-cursor inactivity-time="300000"></velt-cursor>
> ```
>
> Using API:
>
> ```js theme={null}
> 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.

> [!WARNING]
>
> You must pass a string into allowedElementIds instead of an object

> [tab] React / Next.js
>
> ```js theme={null}
> <VeltCursor allowedElementIds={JSON.stringify(['element-1', 'element-2'])} />
> ```
>
> Using API:
>
> ```js theme={null}
> const cursorElement = client.getCursorElement();
> cursorElement.allowedElementIds(['element-1', 'element-2']);
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-cursor allowed-element-ids='["element-1", "element-2"]'></velt-cursor>
> ```
>
> Using API:
>
> ```js theme={null}
> 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.

> [tab] React / Next.js
>
> ```js theme={null}
> <VeltCursor onCursorUserChange={(cursorUsers) => yourMethod(cursorUsers)} />
> ```

> [tab] Other Frameworks
>
> ```js theme={null}
> 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.

> [tab] React / Next.js
>
> ```jsx theme={null}
> const cursorElement = client.getCursorElement();
> cursorElement.getOnlineUsersOnCurrentDocument().subscribe((cursorUsers) => {
>   console.log("Online users: ", cursorUsers);
> });
> ```

> [tab] Other Frameworks
>
> ```jsx theme={null}
> const cursorElement = Velt.getCursorElement();
> cursorElement.getOnlineUsersOnCurrentDocument().subscribe((cursorUsers) => {
>   console.log("Online users: ", cursorUsers);
> });
> ```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.