Wait properties

Wait properties can be customized in these step types:

The wait section allows you to wait for user interaction in the tooltip or modal before proceeding to the next step in the flow. To begin add a wait option to the step by clicking the Add wait option button in the Wait section. You can add multiple wait options where each option can we completed independently.

Different types of wait options

There are currently five types of wait options. These are the same as the start options you can set for a flow.

Location

The Location option proceeds when the user visits a specific page. We use only the location pathname for matching. For example, from the URL https://acme.com/search=query=onboarding, the /search=query=onboarding part is used.

When matching a location, the SDK uses regex. Entering /onboarding triggers a partial match. For exact matching, add the start ^ and end $ symbols to the location, e.g., ^/onboarding$.

Examples of possible locations:

empty - matches any URL (this will not continue flow on its own but can be combined with other options)
/ - matches any URL (continues the flow on every page if no other options are set)
^/$ - matches the root page
/onboarding - matches any URL with /onboarding in it
^/onboarding - matches any URL starting with /onboarding
^/onboarding$ - matches exactly /onboarding
search=.+ - matches any URL with search query parameter and at least one character value

Location can be combined with other options to narrow down the wait conditions further.

Click

The Click option continues a flow when the user clicks on a specific element. Use a CSS selector that matches the element.

Element on page

The Element on page option continues a flow when a specific element appears on the page/DOM. Use a CSS selector that matches the element. This is useful to ensure the page is in a specific state before showing the flow, such as when a page loads or when there is an empty state.

Input change

The Input change option continues a flow when the user changes the value of a specific input, like a text input in a form. Use a CSS selector that matches the input element.

Form submit

Similarly to Input change, the Form submit option continues a flow when the user submits a specific form. Use a CSS selector that matches the form element.

How to pick the right CSS selector

Selecting elements on the page requires the right CSS selector to avoid conflicts with other elements. Here are some tips:

Use unique classes or IDs: If possible, use unique classes or IDs for the target element to ensure the selector matches only the desired element.
Use the most specific selector possible: If unique classes or IDs aren't available, use the most specific selector possible to reduce conflicts.
Use browser developer tools: Use browser developer tools to find the right selector. This guide (opens in a new tab) can help you find the right CSS selector.
Test the selector: After selecting a selector, test it in the browser's console to ensure it matches the correct element. Use document.querySelector for testing.

Examples of CSS selectors:

#my-button - matches an element with the ID my-button
.my-class - matches an element with the class my-class
button - matches all button elements
input[type="text"] - matches all text input elements
body > div > div > form > div:nth-child(2) > button - matches a specific button element

Footer properties Custom styles