When you add a Tooltip to a Flow, a Launcher in your app, or add a custom Resource Center Launcher, you will be asked to anchor it to an element in your app. This selection ensures the tooltip appears in the correct position. Userflow makes selecting elements in your app easy with one-click automatic element selection. Userflow's intelligent element selector visually confirms your selection, showing exactly which element you've chosen rather than simply displaying raw code. Behind the scenes, it leverages multiple data points, including CSS, element attributes, and contextual information, to capture the selection.
Most of the time, this method of selecting an element is sufficient, but we know no two apps are the same; sometimes you may need a more customizable solution. To that end, we provide the Go manual option. In both cases, Userflow captures the CSS class, unique ID, or other attributes of the element that identify it for the tooltip it's anchored to.
Note: These instructions apply to multiple applications
This document describes element selection from the perspective of a Flow tooltip. However, these steps are the same for other applications where elements are selected.
Automatic element selection
Once you've added the tooltip to the flow:
Click the Show tooltip on this element block to display its details on the right.
Click Select element.
Enter your app's URL for the page that contains the element and click Select element.
Click the element in your app. Once selected, it will automatically append it to your tooltip step and return you to Userflow.
If the element selection method described above works for your app, there is no need to use one of the manual methods below.
Userflow picked the wrong element? Try these first
Most selection problems can be fixed in the builder without opening your browser's developer tools. Try these in order. Move to the next one only if the previous one doesn't work.
1. Adjust strictness
Strictness controls how closely an element in your app has to match the one you selected.
In the step, click Show tooltip on this element to open its options.
Move the Loosest / Strictest slider:
Stricter if Userflow is attaching to a similar element nearby, such as the wrong row or button.
Looser if Userflow can't find the element after small changes to your app.
Preview the flow to check the result.
What each level means:
Loosest: most flexible. Still works if some attributes change.
Loose / Looser and Strict / Stricter: a balance between flexibility and precision.
Strictest: requires an exact match for text, classes, and other attributes.
.png)
2. Turn on Dynamic text
If the element's text changes from user to user, such as a name or a count, tick Dynamic text. Userflow then ignores the element's text when matching it.
3. Choose the nearest element
If several elements look the same, use Nearest element in the If multiple matches menu. See Choosing the nearest element.
4. Go manual
If none of the above works, select the element yourself with a CSS selector. See Go manual below.
If the element is right but loads slowly, see Element not found.
Go manual
Adding an element manually requires entering its CSS class, unique ID, or custom data attribute in Userflow. You can find these using Chrome's Inspect tool. In Userflow, select the Go manual option, then use the instructions below to locate your element's CSS class, ID, or attribute and determine which manual entry method works best for your app.
Using the Chrome Inspect tool
The Google Chrome Inspect tool shows the code behind web page elements. To inspect the element you want to anchor your tooltip to:
Open the page of your app where you want to select an element.
Right-click on the element or anywhere on the page, and select Inspect.
To identify the specific CSS for the desired element, click the select tool from the Inspector, then click the element on the page. The element selection will highlight the specific CSS in the Inspect tool panel. The highlighted code often includes classes Userflow doesn't need. For example, if an element's code is
<li class="combo-box_option is-active">, use only combo-box_option.Enter the CSS class or ID in the CSS selector box and add a "." before a CSS class or a "#" before a CSS ID. For example, .combo-box_option or #main-header. (See the section below for instructions on how to add a CSS custom attribute.)
Using custom attributes
Userflow supports using custom data attributes to identify your application's elements. These attributes provide stable, unique identifiers that are a good option when your CSS class names or IDs are dynamic or change frequently. Unlike CSS classes or IDs, custom attributes are surrounded by brackets [ ] when input into the CSS selector box in Userflow. For example, [type="text"]. If your app generates class names or IDs that change between deploys, your developers can also configure how Userflow.js identifies elements — including excluding dynamic class-name patterns, excluding generated IDs, and telling Userflow to prefer a stable attribute such as data-testid. See Element inference and dynamic class names.
To locate and select custom attributes, use the instructions in the Using the Chrome Inspect tool section.
For example, if a field's code is <input type="text" name="description" placeholder="What have you done?">, you could use any one of its attributes, or several together. For example, [type="text"] or [placeholder="What have you done?"] in the CSS Selector field.
Note
If an attribute is used on more than one element on the page, use multiple attributes to further specify which element should be selected, or add additional information such as element text or multiple match order.
How to add a CSS class that is used for multiple elements
There may be multiple matches on a page using the same CSS class. For example, multiple buttons, navigation options, or menu items on a page may share the same CSS class. Therefore, using the class alone in Userflow may not be enough to indicate which element the tooltip should be anchored to.
There are three main ways to manually indicate in Userflow (using Go manual) which element selection to use:
Add element text (e.g, button label, menu text, etc.) in the Element text box to differentiate it from the others.
Specify the order in which the desired element appears on the page. For example, if it's the first, second, or third occurrence of the CSS class that appears on the page. This orients Userflow to determine which element to use.
Select another element nearest to the desired element.
Use the instructions below to use one or more of these methods.
Add element text
For example, say a tooltip should point at Danish in a language menu, and every language in that menu uses the same CSS class. Enter the element's text label in the Element text box, along with the CSS class, to differentiate which item in the menu the tooltip should be anchored to.
Example:
Element text = Danish
CSS selector = .combo-box_option
.png)
Specify the element order
When multiple elements on a page share the same CSS class or attribute, you can specify which element Userflow should select based on the order in which it appears on the page.
For example, if the CSS class app-header__menu-item is used on every item in your app's header menu, use the If multiple matches option to say whether you mean the first, second, third (and so on) item with that class.
In this example, to select the second menu item, choose 2nd element next to the If multiple matches prompt.
Choosing the nearest element
If you are unsure of the CSS class's order for the element you want to select, you can use the Nearest element option in the If multiple matches menu.
Select Nearest element from the menu.
Click Select element to choose an object in your app nearest to the desired element (e.g., a button) on the page.
Select the element in your app. You will be returned to Userflow with the nearest element selected.
Adjusting how Userflow selects the nearest element
If Userflow doesn't select the correct element using the nearest element method, you can use the following options to adjust how Userflow chooses the nearest element.
When you select an element in your app using the element picker, Userflow doesn't just capture one path to that element. Instead, it uses an algorithm to generate and compare multiple possible CSS selectors from the root of your app down to the target element.
Userflow then evaluates these selectors to determine which one is the most accurate and reliable for consistently identifying that element across sessions. This ensures the same element can be found again, even if your app's structure changes slightly.
Use the strictness slider and Dynamic text checkbox described in Userflow picked the wrong element? Try these first.