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

<Tabs>
  <Tab title="React / Next.js">
    ```js theme={null}
    <VeltCursor avatarMode={true} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-cursor avatar-mode="true"></velt-cursor>
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="React / Next.js">
    ```js theme={null}
    <VeltCursor inactivityTime={300000} />
    ```

    Using API:

    ```js theme={null}
    const cursorElement = client.getCursorElement();
    cursorElement.setInactivityTime(300000);
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-cursor inactivity-time="300000"></velt-cursor>
    ```

    Using API:

    ```js theme={null}
    const cursorElement = Velt.getCursorElement();
    cursorElement.setInactivityTime(300000);
    ```
  </Tab>
</Tabs>

## 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</Warning>

<Tabs>
  <Tab title="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>

  <Tab title="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']);
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="React / Next.js">
    ```js theme={null}
    <VeltCursor onCursorUserChange={(cursorUsers) => yourMethod(cursorUsers)} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```js theme={null}
    if(Velt){
      const cursorTag = document.querySelector('velt-cursor');
    	cursorTag.addEventListener('onCursorUserChange', (event) => {
          console.log("onCursorUserChange", event.detail);
      });
    }
    ```
  </Tab>
</Tabs>

## getOnlineUsersOnCurrentDocument

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

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

  <Tab title="Other Frameworks">
    ```jsx theme={null}
    const cursorElement = Velt.getCursorElement();
    cursorElement.getOnlineUsersOnCurrentDocument().subscribe((cursorUsers) => {
      console.log("Online users: ", cursorUsers);
    });
    ```
  </Tab>
</Tabs>