When you add a tooltip to a flow, place a launcher in your app, or add a custom Resource Center launcher, you anchor it to an element in your app, such as a button or menu item. This page shows how to select that element, what to do when Userflow picks the wrong one, and how to enter a CSS selector yourself. The steps use a flow tooltip as the example, but they're the same everywhere you select an element.
How do I select an element automatically?
Userflow's automatic element selection lets you click the element in your app. Userflow shows you a picture of what you picked, and records several details about it (CSS, attributes, and surrounding context) so it can find it again.
After you add a tooltip step to the flow:
Click the Show tooltip on this element block to open its details on the right.
Click Select element.
Enter the URL of the page in your app that has the element, and click Select element.
Click the element in your app. Userflow adds it to the tooltip step and takes you back to the Flow builder.
Selecting elements needs the Userflow Chrome extension. If automatic selection finds the right element, you don't need any of the manual options on this page.
Userflow picked the wrong element? Try these first
Most selection problems can be fixed in the builder, without your browser's developer tools. Try these in order, and move on only if the one before 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: needs 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 "Choose the nearest element" on this page.
4. Go manual
If strictness, Dynamic text and the nearest element haven't picked the right element, enter a CSS selector yourself. See "How do I select an element manually with Go manual?" on this page.
If the element is right but loads slowly, or the flow can't find it at all, see Element not found.
How do I select an element manually with Go manual?
Go manual lets you enter the element's CSS class, ID, or a custom data attribute. Find these with Chrome's Inspect tool:
Open the page in your app that has the element.
Right-click the element and select Inspect.
Click the select tool in the Inspect panel, then click the element on the page. Its code is highlighted in the panel. The code often has classes Userflow doesn't need: for
<li class="combo-box_option is-active">, use only combo-box_option.In Userflow, select Go manual and enter the class or ID in the CSS selector box. Put a
.before a class and a#before an ID, for example.combo-box_optionor#main-header.
Use a custom data attribute instead of a class or ID
Custom data attributes are a good choice when your class names or IDs change often. In the CSS selector box, put the attribute in square brackets, for example [type="text"].
For a field like <input type="text" name="description" placeholder="What have you done?">, you could use [type="text"], [placeholder="What have you done?"], or several attributes together. If an attribute is used on more than one element on the page, combine attributes, or add element text or a match order (see "What if several elements share the same CSS class?" on this page).
If your app generates class names or IDs that change between deploys, your developers can also tell Userflow.js how to identify elements: exclude dynamic class-name patterns, exclude generated IDs, or prefer a stable attribute such as data-testid. See Element inference and dynamic class names.
What if several elements share the same CSS class?
Buttons, menu items, or navigation links on one page often share a CSS class, so the class alone doesn't tell Userflow which element you mean. With Go manual, you can narrow it down in three ways.
Add element text
Enter the element's label in the Element text box along with the CSS class. For example, to point at Danish in a language menu where every language uses the same class:
Element text: Danish
CSS selector:
.combo-box_option
.png)
Specify the element order
Use the If multiple matches option to say which match you mean by its order on the page. For example, if every item in your header menu uses app-header__menu-item, choose 2nd element to select the second item.
Choose the nearest element
If you don't know the element's order, use Nearest element:
Select Nearest element in the If multiple matches menu.
Click Select element.
Click something in your app close to the element you want, such as a nearby button. Userflow takes you back to the Flow builder with the nearest match selected.
If Nearest element still picks the wrong one, adjust the strictness slider or tick Dynamic text, as described in "Userflow picked the wrong element? Try these first" on this page.