Skip to main content

​
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
  • Other Frameworks
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.
  • React / Next.js
  • Other Frameworks
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.
  • React / Next.js
  • Other Frameworks
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.
  • React / Next.js
  • Other Frameworks
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.
    • React / Next.js
    • Other Frameworks
    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);
  });