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

# Customize Behavior

## enableDefaultElementsTracking

* When **enabled**,
  * the SDK will track User's presence on these elements types automatically: `input`, `textarea`, `button`, `contenteditable`.
  * to disable tracking on certain elements, you need to manually add an attribute `data-velt-live-selection-enabled="false"` to those elements.

* When **disabled**,
  * the SDK will not track User's presence on any elements.
  * to enable tracking on certain elements, you need to manually add an attribute `data-velt-live-selection-enabled="true"` to those elements.

* Default: `Enabled`.

<Tabs>
  <Tab title="React / Next.js">
    ```javascript theme={null}
    const selectionElement = client.getSelectionElement();

    selectionElement.enableDefaultElementsTracking();
    selectionElement.disableDefaultElementsTracking();
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```javascript theme={null}
    const selectionElement = Velt.getSelectionElement();

    selectionElement.enableDefaultElementsTracking();
    selectionElement.disableDefaultElementsTracking();
    ```
  </Tab>
</Tabs>

## enableUserIndicator

* User indicator is the user avatar or their name label that appears on the top left or top right of the selected element.
* Default: `Enabled`.

<Tabs>
  <Tab title="React / Next.js">
    ```javascript theme={null}
    const selectionElement = client.getSelectionElement();

    selectionElement.enableUserIndicator();
    selectionElement.disableUserIndicator();
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```javascript theme={null}
    const selectionElement = Velt.getSelectionElement();

    selectionElement.enableUserIndicator();
    selectionElement.disableUserIndicator();
    ```
  </Tab>
</Tabs>

## setUserIndicatorPosition

* User indicator position can be set to `start` or `end`.

* You can set it globally using API or set it locally on individual elements using attributes.

* Default: `end`.

<Tabs>
  <Tab title="React / Next.js">
    Set globally using API:

    ```javascript theme={null}
    const selectionElement = client.getSelectionElement();

    selectionElement.setUserIndicatorPosition('start');
    ```

    Set locally on individual elements using attributes:

    ```html theme={null}
    <div data-velt-live-selection-user-indicator-position="start">...</div>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    Set globally using API:

    ```javascript theme={null}
    const selectionElement = Velt.getSelectionElement();

    selectionElement.setUserIndicatorPosition('start');
    ```

    Set locally on individual elements using attributes:

    ```html theme={null}
    <div data-velt-live-selection-user-indicator-position="start">...</div>
    ```
  </Tab>
</Tabs>

## setUserIndicatorType

* User indicator type can be set to `avatar` or `label`.
  * `avatar`: Displays the user avatar.
  * `label`: Displays the user's name.

* You can set the type globally using API or set it locally on individual elements using attributes.

* Default: `avatar`.

<Tabs>
  <Tab title="React / Next.js">
    Set globally using API:

    ```javascript theme={null}
    const selectionElement = client.getSelectionElement();

    selectionElement.setUserIndicatorType('label');
    ```

    Set locally on individual elements using attributes:

    ```html theme={null}
    <div data-velt-live-selection-user-indicator-type="label">...</div>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    Set globally using API:

    ```javascript theme={null}
    const selectionElement = Velt.getSelectionElement();

    selectionElement.setUserIndicatorType('label');
    ```

    Set locally on individual elements using attributes:

    ```html theme={null}
    <div data-velt-live-selection-user-indicator-type="label">...</div>
    ```
  </Tab>
</Tabs>

## getLiveSelectionData

* Get the live selection data for the current document.

  <Tabs>
    <Tab title="React / Next.js">
      **Using Hook:**

      ```jsx theme={null}
        const liveSelectionData = useLiveSelectionDataHandler();

        useEffect(() => {
          console.log('liveSelectionData', liveSelectionData);
        }, [liveSelectionData]);
      ```

      **Using API:**

      ```javascript theme={null}
        const selectionElement = client.getSelectionElement();
        selectionElement.getLiveSelectionData().subscribe((liveSelectionData: LiveSelectionData) => {
          console.log("liveSelectionData: ", liveSelectionData);
        });
      ```
    </Tab>

    <Tab title="Other Frameworks">
      **Using API:**

      ```javascript theme={null}
        const selectionElement = Velt.getSelectionElement();
        selectionElement.getLiveSelectionData().subscribe((liveSelectionData: LiveSelectionData) => {
          console.log("liveSelectionData: ", liveSelectionData);
        });
      ```
    </Tab>
  </Tabs>

## setInactivityTime

Set the duration of inactivity before Live Selection indicators are removed.

API: [`setInactivityTime()`](/api-reference/sdk/api/api-methods#setinactivitytime-1)

* After the specified time of no interaction, the user's Live Selection will be hidden.
* Default: `300000` milliseconds (5 minutes).

<Tabs>
  <Tab title="React / Next.js">
    ```javascript theme={null}
    const selectionElement = client.getSelectionElement();
    const tenMinutesInMs = 10 * 60 * 1000; // 10 minutes
    selectionElement.setInactivityTime(tenMinutesInMs);
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```javascript theme={null}
    const selectionElement = Velt.getSelectionElement();
    const tenMinutesInMs = 10 * 60 * 1000; // 10 minutes
    selectionElement.setInactivityTime(tenMinutesInMs);
    ```
  </Tab>
</Tabs>
