Customize Behavior

​

1. Enable/Disable Default Elements Tracking

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

​

2. Enable/Disable User Indicator

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

​

3. Set User Indicator Position

• 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

const selectionElement = client.getSelectionElement();

selectionElement.setUserIndicatorPosition('start');

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

​

4. Set User Indicator Type

• 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

const selectionElement = client.getSelectionElement();

selectionElement.setUserIndicatorType('label');

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

​

5. Get Live Selection Data

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