The Anchor Selector is the process used for finding and anchoring content to an HTML element within a page.
After clicking on the Create Tour button in the tour builder or in the web application, 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 Anchor Selector.
Adding an element as an anchor point
A creator, using the Anchor 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 anchored HTML element.
Searching for the right HTML element as the step anchor point
This operation is extremely important. 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 users visit. 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 experience 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.