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

const selectionElement = client.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.
const selectionElement = client.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.

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>

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

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>

​
getLiveSelectionData

  • Get the live selection data for the current document.

    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);
  });