Live Selection Setup

Enable Velt Live Selection to highlight inputs, textareas, buttons, and contenteditable elements collaborators are focused on, with React and JS examples.

Get the Live Selection Element and enable it

When enabled, Live Selection will automatically detect and highlight user’s presence on the following elements:

• input
• textarea
• button
• contenteditable

You can learn more about customizing and controlling which elements are highlighted and its styling here.

React / Next.js

const { client } = useVeltClient();
useEffect(() => {
  if (client) {
    const selectionElement = client.getSelectionElement();
    selectionElement.enableLiveSelection();
    selectionElement.disableLiveSelection();
  }
}, [client]);

Other Frameworks

if (Velt) {
  const selectionElement = Velt.getSelectionElement();
  selectionElement.enableLiveSelection();
  selectionElement.disableLiveSelection();
}