> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usertour.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Flows
> Learn how to create and customize interactive flows with Usertour
## Getting Started
Before you can start creating flows, you'll need to install [Usertour.js](/developers/usertourjs-reference/installation) in your web application. Once that's done, you're ready to create your first flow!
## Examples
### Page navigation in flow
### Automatic navigation with hidden steps
### User page guidance
### Collect user feedback with surveys
## Creating a New Flow
Here's how to create a new flow in Usertour:
1. Go to **Flows** in the sidebar
2. Click **Create flow**
3. Give your flow a name
4. Click **Submit**
## Add Step
Follow these steps to add a step:
1. Navigate to the flow detail page
2. Click **Edit in builder** at the top
3. Click the **Create** button on the left side of the builder
4. Select a **Step Type** (Tooltip, Modal, Speech bubble, Hidden)
5. Edit the Step content
### Step types
* **Speech bubble** — Renders at a fixed position (set in themes) and is not tied to any on-page element. Best for opening a flow with a conversational, action-focused message.
* **Tooltip** — Attaches hints and prompts to specific elements in your app. Best for walking users through a particular task or workflow.
* **Modal** — Overlays your app and blocks interaction with the page until the user dismisses it or moves to the next step. Best for single-step announcements, flow start prompts, or flow-end messages (e.g. with confetti).
* **Hidden** — Runs a user interaction that advances the flow without showing any UI. Best for pausing until the user does something, or sending them to a given page automatically.
## Theme
Make your flows look and feel just right for your application. With themes, you can customize colors, typography, and overall styling to match your brand.
## Tooltip Placement (Tooltips only)
You can target elements using CSS Selector, with optional Element Text for more precise selection:
* **CSS Selector**: Required for targeting elements. Use any valid CSS selector to specify which element to target
* Works with all standard CSS selectors (see [MDN's CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors))
* Uses `querySelectorAll()` to find elements
* When multiple elements match, Usertour picks the first one
* You can specify which element to select by providing its index
* **Element Text**: Optional. Use this when you need to distinguish between elements that share the same CSS selector but have different text content
Instead of typing the selector by hand, you can point at the element with the built-in picker. See [Selecting Elements](/how-to-guides/selecting-elements) for how it works — and for defining stable selectors so flows don't break on a release.
## Tooltip Alignment (Tooltips only)
Fine-tune how your tooltips align with their target elements:
* Choose your alignment mode:
* **Auto**: Tooltip will automatically adjust to the best available position if the preferred alignment doesn't fit
* **Fixed**: Tooltip will maintain the exact alignment you specify, regardless of available space
* When using Fixed mode, choose from multiple alignment options:
* Left: left-start, left-center, left-end
* Right: right-start, right-center, right-end
* Top: top-start, top-center, top-end
* Bottom: bottom-start, bottom-center, bottom-end
* Each alignment option determines how the tooltip connects to its target element
* Preview the alignment in real-time in the builder
## Backdrop
The backdrop helps keep users focused:
* Creates a semi-transparent overlay
* Highlights important elements
* Prevents interaction with background content
* Works with all step types:
* Modal steps: Always on
* Tooltip steps: Optional
* Customize in theme settings
## Actions
For each step, you can set up actions that happen when:
* Users click buttons
* Users interact with tooltip targets
* Step trigger conditions are met
Here's what you can do:
* **Go to step** - Jump to any step in your flow. Perfect for creating non-linear flows and conditional paths.
* **Dismiss** - End the current flow. You can trigger this through code or user interaction.
* **Start new flow** - Switch to a different flow while ending the current one. Great for smooth transitions between experiences.
* **Navigate to page** - Open a specific URL in the browser. Choose between same-tab or new-tab navigation.
* **Evaluate javascript** - Run custom JavaScript code in your application. This lets you integrate deeply with your app's features.
## Step Triggers
Triggers let you create smart flows with **"if this, then that"** rules. Before showing each step, if a trigger is active, it'll run its logic first. You can:
* Add multiple triggers to a step
* Create branching flows
* Skip steps based on conditions
A trigger can have the following conditions:
* **User attribute** - Execute the trigger's action when a user possesses specific attributes, enabling personalized flow progression.
* **Current page is** - Execute the trigger's action when users navigate to a designated page, ensuring context-aware flow delivery.
* **Element is present/clicked/disabled** - Execute the trigger's action based on UI element states. Particularly useful for handling asynchronous content loading scenarios.
* **Text input value is** - Execute the trigger's action when users enter specific values in designated input fields, enabling precise form-based flow control.
* **User fills in input** - Execute the trigger's action upon any user input in specified fields, facilitating real-time flow progression.
* **Current time** - Execute the trigger's action at designated times, allowing for time-sensitive content delivery within specific time periods.
Best Practice: Add triggers to visible steps to prevent users from getting stuck.
## Reordering Steps
Want to change the order of your steps? Just drag and drop them to rearrange your flow.
Feel free to add new steps or rearrange existing ones to create the perfect user journey.
## Starting a Flow
Once you've set up your flow, you'll need to know how to start it for your users. For the full details on starting flows, check out the [Starting Flow/Checklist Guide](/how-to-guides/starting-flows).
Remember to install [Usertour.js](/developers/usertourjs-reference/installation) in your application to start flows for your users.
## Temporarily Hiding Flows
To show flows only on specific pages:
1. Turn on **Temporarily hide flow**
2. Set your visibility conditions
Use auto-start conditions for targeting flows instead of temporary hiding.
## Dismissing Flows
Users can end a flow anytime by clicking the X-button in the top-right corner of modals and tooltips. While you can disable this button in advanced settings, we recommend keeping it enabled. You can add **Dismiss** actions to buttons, tooltip target clicks, survey questions, and step triggers. When starting a new flow, the current one will automatically end. For other actions like page navigation, you'll need to add a **Dismiss** action yourself.
On the last step of a flow, we recommend adding a **Dismiss** action to give users a clear way to end the flow. If you use **Start a flow** to begin another flow, the current one will automatically end. This automatic ending doesn't happen with other actions like **Navigate to page** - you'll need to add a **Dismiss** action yourself.
Make sure your flow is properly dismissed (or hidden using temporarily hide), as an undismissed flow will prevent other flows from starting.
Currently, flows have a 24-hour session lifecycle. This prevents flows from getting stuck undismissed and blocking other flows permanently. In the future, you'll be able to configure this duration through the Usertour.js API.
## Flow Completion
Flow completion is different from dismissal. A flow is complete when users reach the completion step, which is automatically set as the last step. If you want the flow to complete only after a specific button click on the last step, add a hidden step after the button step with an unconditional trigger and **Dismiss** action.