> ## Documentation Index
> Fetch the complete documentation index at: https://docs.userpilot.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Create a Flow

> Create guided in-app flows in Userpilot to onboard, educate, and engage users through tooltips, modals, slideouts, and driven actions.

## Prerequisites

* [Userpilot Chrome Extension](https://chromewebstore.google.com/detail/userpilot/ecmjjdafjebhegfhjincbdhgfonpibfm) installed
* Logged in to your Userpilot account
* Access to your web application where you want to build the flow
* Userpilot SDK installed on your target pages

## Overview

Flows are guided user experiences designed to onboard, engage, or educate users within your product. It consists of interactive steps such as tooltips, driven actions, modals and slideouts that help users navigate features, complete tasks, or discover new functionalities seamlessly.

<img src="https://mintcdn.com/userpilot/heoTLTAWD74i-7CB/in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-10at12.33.19AM.png?fit=max&auto=format&n=heoTLTAWD74i-7CB&q=85&s=716c5b75b9ee8c556746ce21b93f1c50" alt="" width="1910" height="1004" data-path="in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-10at12.33.19AM.png" />

## Use Cases

* Announce new product updates and improvements to increase feature adoption.
* Guide new users through key features and set up to ensure a smooth start.
* Provide step-by-step guidance on how to use specific tools or functionalities.
* Assist users in completing processes by providing in-app guidance, minimizing the need for additional support.

## How to create a Flow

Creating flows with Userpilot is simple and intuitive. However, before you begin, ensure that the [Userpilot Chrome extension](https://chromewebstore.google.com/detail/userpilot/ecmjjdafjebhegfhjincbdhgfonpibfm?hl=en) is installed to access the builder.

Once the Userpilot builder is installed, you can start building your flows in two ways:

1. Navigate to your web application and launch the Userpilot builder by clicking the extension icon in your browser’s toolbar.

   <img src="https://mintcdn.com/userpilot/wfz9MZaMqtGS7WBI/in-app-engagement/flows/getting-started/assets/images/Screenshot2025-02-23at12.14.16AM.png?fit=max&auto=format&n=wfz9MZaMqtGS7WBI&q=85&s=880a5c3e7905b4d81675c5f3917720fa" alt="" width="2920" height="770" data-path="in-app-engagement/flows/getting-started/assets/images/Screenshot2025-02-23at12.14.16AM.png" />
2. You can also start creating your flow from the Userpilot web app by navigating to **Engagement Layer > Flows > Create New Flow**.

<img src="https://mintcdn.com/userpilot/heoTLTAWD74i-7CB/in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-10at12.25.21AM.png?fit=max&auto=format&n=heoTLTAWD74i-7CB&q=85&s=fbe3cfce3923d8b85d1646a1ca27ab50" alt="" width="2746" height="1190" data-path="in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-10at12.25.21AM.png" />

Once the builder is launched, click on "Create New Content" and navigate to the page where you want to build the flow. Once you're ready, select "Start Here" to begin creating the flow on the chosen page. You will then see a selection of content types available. Click "Create a Flow" to proceed.

<img src="https://mintcdn.com/userpilot/heoTLTAWD74i-7CB/in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-10at12.28.29AM.png?fit=max&auto=format&n=heoTLTAWD74i-7CB&q=85&s=ae4bd4e255d7811e4e1947f16a83cb7f" alt="" width="1902" height="1248" data-path="in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-10at12.28.29AM.png" />

## Adding UI patterns

Choose the type of step to begin with from the following options:

<Tabs>
  <Tab title="Modal">
    Modals are Large, attention-grabbing announcements centered on the page and demand the user's full focus. They are ideal for welcoming new users, announcing major feature releases, or sharing critical updates like outages. To minimize disruption, it's best to use them sparingly.

    <img src="https://mintcdn.com/userpilot/i_hL61WZW7vm9Xm1/Disabledlogictab.png?fit=max&auto=format&n=i_hL61WZW7vm9Xm1&q=85&s=51bca300db841d2c3929ab7ac36944f2" alt="" width="5760" height="4096" data-path="Disabledlogictab.png" />

    After adding the desired UI Patterns/steps to your flow, you can configure the flow settings in the Userpilot web app as outlined here.
  </Tab>

  <Tab title="Slideout">
    Slideouts are non-intrusive, mid-sized modals designed to capture user attention with minimal disruption. They are ideal for introducing minor features, gathering feedback, reinforcing feature value, and sharing non-critical messages like webinar announcements. Unlike modals, slideouts offer a more subtle way to engage users without disrupting their workflow.

    <img src="https://mintcdn.com/userpilot/wfz9MZaMqtGS7WBI/in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-02at12.53.02AM.png?fit=max&auto=format&n=wfz9MZaMqtGS7WBI&q=85&s=a384de66a710e3f0044e9d13f7c563bb" alt="" width="2934" height="1506" data-path="in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-02at12.53.02AM.png" />
  </Tab>

  <Tab title="Tooltip">
    Tooltips are anchored to specific elements within your application, making them ideal for providing contextual guidance on particular features. They help users navigate your product by offering step-by-step instructions and highlighting key actions.

    <img src="https://mintcdn.com/userpilot/wfz9MZaMqtGS7WBI/in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-02at12.57.26AM.png?fit=max&auto=format&n=wfz9MZaMqtGS7WBI&q=85&s=1bcfc71be3249dc5f87e51d5760b46ce" alt="" width="2902" height="1462" data-path="in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-02at12.57.26AM.png" />
  </Tab>

  <Tab title="Driven Action">
    Driven actions resemble tooltips but function differently—they wait for users to interact with a specific element in your app. They are ideal for guiding user attention toward key actions, such as clicking a button or entering input, to ensure engagement.

    <img src="https://mintcdn.com/userpilot/wfz9MZaMqtGS7WBI/in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-02at12.59.22AM.png?fit=max&auto=format&n=wfz9MZaMqtGS7WBI&q=85&s=3530d813196546857430336666280c48" alt="" width="2930" height="1440" data-path="in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-02at12.59.22AM.png" />
  </Tab>
</Tabs>

### FAQs

<AccordionGroup>
  <Accordion title="Can i trigger a checklist from the button added to the flow?" defaultOpen="false">
    Yes, you can trigger a JavaScript function from the button and include the JS code to launch the checklist. You can find this code on the checklist settings page under the "only-manually" tab.

    <img src="https://mintcdn.com/userpilot/heoTLTAWD74i-7CB/in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-03at3.04.18AM.png?fit=max&auto=format&n=heoTLTAWD74i-7CB&q=85&s=9d4ffee6b33073bd2ef12503880aa4b1" alt="" width="1488" height="1136" data-path="in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-03at3.04.18AM.png" />
  </Accordion>

  <Accordion title="How can i add a video to the flow Modal?" defaultOpen="false">
    You can add the HTML embed code of your video to the flow Modal as mentioned below: Hover over the modal -> click on the '+' icon -> select "video" -> paste the HTML embed code.

    <img src="https://mintcdn.com/userpilot/wfz9MZaMqtGS7WBI/in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-02at1.28.17AM.png?fit=max&auto=format&n=wfz9MZaMqtGS7WBI&q=85&s=224834e9d1d2f35717cbd951d0586a63" alt="" width="2002" height="1258" data-path="in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-02at1.28.17AM.png" />
  </Accordion>

  <Accordion title="Can i add a back button to the flow tooltip?" defaultOpen="false">
    Yes, you can add a back button to tooltips if they belong to a group. Simply drag and drop the steps to create a new group and the back button option will appear in the builder settings.

    <img src="https://mintcdn.com/userpilot/wfz9MZaMqtGS7WBI/in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-02at1.45.35AM.png?fit=max&auto=format&n=wfz9MZaMqtGS7WBI&q=85&s=c275d3dbde5440110a9ffd8cc50b77f2" alt="" width="2868" height="1154" data-path="in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-02at1.45.35AM.png" />
  </Accordion>
</AccordionGroup>

## Expected Result

After creating and publishing a flow:

* Flow appears in the [Flows list](https://run.userpilot.io/flows) with status "Live"
* Targeted users see the flow when conditions are met
* Flow analytics show impressions and completion rates

## Common Issues

| Symptom                   | Cause                        | Solution                                      |
| ------------------------- | ---------------------------- | --------------------------------------------- |
| Flow not appearing        | User doesn't match targeting | Check audience and page targeting rules       |
| Flow not appearing        | Content not published        | Publish flow from settings page               |
| Element not found         | Dynamic selector changed     | Re-select element or use stable selector      |
| Flow shows to wrong users | Targeting too broad          | Add more specific segment or property filters |

## Related

* [Flow Settings](/in-app-engagement/flows/getting-started/flow-settings) - Configure targeting, frequency, triggers
* [Testing Flows](/in-app-engagement/flows/getting-started/testing-flows) - Preview before publishing
* [Flow Analytics](/in-app-engagement/flows/getting-started/Flow-performance-analytics) - Measure performance
* [UI Templates](/ce-basics/ui-templates) - Customize flow appearance
* [Element Selection](/ce-basics/select-element) - Best practices for stable selectors

<Frame>
  [**For any questions or concerns please reach out to support@userpilot.com**](mailto:support@userpilot.com)
</Frame>
