Customize Behavior

Documentation Index

Fetch the complete documentation index at: https://docs.velt.dev/docs/llms.txt

Use this file to discover all available pages before exploring further.

​

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

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.

const selectionElement = client.getSelectionElement();

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

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.

const selectionElement = client.getSelectionElement();

selectionElement.setUserIndicatorPosition('start');

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

const selectionElement = Velt.getSelectionElement();

selectionElement.setUserIndicatorPosition('start');

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

const selectionElement = client.getSelectionElement();

selectionElement.setUserIndicatorType('label');

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

const selectionElement = Velt.getSelectionElement();

selectionElement.setUserIndicatorType('label');

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

  Using API:

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

​

setInactivityTime

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

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

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