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.

React / Next.js

const selectionElement = client.getSelectionElement();

selectionElement.enableDefaultElementsTracking();
selectionElement.disableDefaultElementsTracking();

Other Frameworks

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.

React / Next.js

const selectionElement = client.getSelectionElement();

selectionElement.enableUserIndicator();
selectionElement.disableUserIndicator();

Other Frameworks

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.

React / Next.js

Set globally using API:

const selectionElement = client.getSelectionElement();

selectionElement.setUserIndicatorPosition('start');

Set locally on individual elements using attributes:

<div data-velt-live-selection-user-indicator-position="start">...</div>

Other Frameworks

Set globally using API:

const selectionElement = Velt.getSelectionElement();

selectionElement.setUserIndicatorPosition('start');

Set locally on individual elements using attributes:

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

React / Next.js

Set globally using API:

const selectionElement = client.getSelectionElement();

selectionElement.setUserIndicatorType('label');

Set locally on individual elements using attributes:

<div data-velt-live-selection-user-indicator-type="label">...</div>

Other Frameworks

Set globally using API:

const selectionElement = Velt.getSelectionElement();

selectionElement.setUserIndicatorType('label');

Set locally on individual elements using attributes:

<div data-velt-live-selection-user-indicator-type="label">...</div>

getLiveSelectionData

• Get the live selection data for the current document.

  React / Next.js

  Using Hook:

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

  Using API:

    const selectionElement = client.getSelectionElement();
    selectionElement.getLiveSelectionData().subscribe((liveSelectionData: LiveSelectionData) => {
      console.log("liveSelectionData: ", liveSelectionData);
    });
  

  Other Frameworks

  Using API:

    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()

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

React / Next.js

const selectionElement = client.getSelectionElement();
const tenMinutesInMs = 10 * 60 * 1000; // 10 minutes
selectionElement.setInactivityTime(tenMinutesInMs);

Other Frameworks

const selectionElement = Velt.getSelectionElement();
const tenMinutesInMs = 10 * 60 * 1000; // 10 minutes
selectionElement.setInactivityTime(tenMinutesInMs);