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

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

> [tab] React / Next.js
>
> ```javascript theme={null}
> const selectionElement = client.getSelectionElement();
>
> selectionElement.enableDefaultElementsTracking();
> selectionElement.disableDefaultElementsTracking();
> ```

> [tab] Other Frameworks
>
> ```javascript theme={null}
> const selectionElement = Velt.getSelectionElement();
>
> selectionElement.enableDefaultElementsTracking();
> selectionElement.disableDefaultElementsTracking();
> ```

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

> [tab] React / Next.js
>
> ```javascript theme={null}
> const selectionElement = client.getSelectionElement();
>
> selectionElement.enableUserIndicator();
> selectionElement.disableUserIndicator();
> ```

> [tab] Other Frameworks
>
> ```javascript theme={null}
> const selectionElement = Velt.getSelectionElement();
>
> selectionElement.enableUserIndicator();
> selectionElement.disableUserIndicator();
> ```

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

> [tab] 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] 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>
> ```

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

> [tab] 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] 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>
> ```

## getLiveSelectionData

* Get the live selection data for the current document.

  > [tab] 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] Other Frameworks
  >
  > **Using API:**
  >
  > ```javascript theme={null}
  >   const selectionElement = Velt.getSelectionElement();
  >   selectionElement.getLiveSelectionData().subscribe((liveSelectionData: LiveSelectionData) => {
  >     console.log("liveSelectionData: ", liveSelectionData);
  >   });
  > ```

## setInactivityTime

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

API: [`setInactivityTime()`](https://velt.dev/docs/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).

> [tab] React / Next.js
>
> ```javascript theme={null}
> const selectionElement = client.getSelectionElement();
> const tenMinutesInMs = 10 * 60 * 1000; // 10 minutes
> selectionElement.setInactivityTime(tenMinutesInMs);
> ```

> [tab] Other Frameworks
>
> ```javascript theme={null}
> const selectionElement = Velt.getSelectionElement();
> const tenMinutesInMs = 10 * 60 * 1000; // 10 minutes
> selectionElement.setInactivityTime(tenMinutesInMs);
> ```


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