The Element Selector is the process used for finding and anchoring content to an HTML element within a page.
After pressing the Start Recording button in the tour builder, creators enter the tour creation mode. In this state, any hovered HTML element outside the tour builder will be highlighted by a magenta-colored outline called the Element Selector.
Adding an element as an anchor point
A creator, using the Element Selector, needs to perform the following actions:
- Searching for the right element as the step anchor point
- Locking on the desired element (holding the cursor above it)
- Mouse right-click to bring up the Step Editor and select the HTML element as an anchor point
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 the anchor.
Searching for the right element as the step anchor point
This operation is an extremely important one. Creators should pay close attention to which HTML elements they are selecting as anchor points. When a product tour or a tooltip runs for an end user, it is important that the anchored elements for the steps are present in the page/section the end-user visits. In case the anchored HTML element is not present in the DOM, the tour or tooltip will contain errors and the end-users will not be able to see the right content.
Selecting an inappropriate anchor HTML element is most common when dealing with Single Page Applications, as the HTML elements might be loaded differently, depending on various user or application states.