Element selector

The Element Selector is the tool used to find and select elements within a page to be used as actionable steps.

element selector
Element selector highlighting an element

After pressing the Start Recording button in the extension, creators enter the Step Recording Mode. In this state, any hovered element will be highlighted by a red outline called the Element Selector.

Adding an element as a step focus point

Notice the steps that a creator takes to add a step using the Element Selector:

  1. Searching for the right element for the step
  2. Locking on the desired element (holding the cursor above it)
  3. Mouse right-click to bring up the Step Editor and save the element as a step focus point
Element selector in action

The tour builder will automatically detect the state the user is in, and will inform the user of the action she needs to perform, in order to successfully complete her task. In the following picture, the tour builder informs the user she needs to navigate to her desired web page and how to select an element from the page as an anchor point.

Screenshot 2022 12 16 at 10.54.46
The tour builder – element selection state