--- title: "Create Free-floating Flows" slug: "create-free-floating-flows" updated: 2026-04-29T09:07:18Z published: 2026-04-29T09:07:18Z canonical: "support.whatfix.com/create-free-floating-flows" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.whatfix.com/llms.txt > Use this file to discover all available pages before exploring further. # Create a Flow with Free-floating steps To get started with a Flow that includes a Free-floating step, follow the steps as mentioned below: 1. Creating Free-floating steps in Flows 2. Configuring Free-floating steps in Flows 3. Publishing Flows with Free-floating steps > [!WARNING] > Note: > > - Flows with Free-floating step type feature is **Beta** currently. Contact [support@whatfix.com](mailto:support@whatfix.com ?subject=Enable%20Flows%20with%20Free-floating%20steps%20&body=Hi%0A%0ACould%20you%20please%20enable%20the%20Flows%20with%20Free-floating%20steps%20on%20my%20ENT.%0A%0AThanks%0A) to enable the feature. > - You also have the option to [add screenshots in a Free-floating step](/studio/docs/add-screenshot-component-in-free-floating-flows) and re-capture the screenshots when the UI changes. Re-capturing screenshots helps in maintaining contextualization for the Flow steps and also avoids re-creation of the steps from scratch. ### Follow the steps mentioned below to create a Free-floating Flow step: 1. Log in to your application, and then launch the **[Whatfix Studio](/studio/docs/how-to-install-the-whatfix-editor)**. ![CLM_editor plug in2](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CLM_editor%20plug%20in%282%29.png) 1. Under **C****ONTENT**, click **Flow**. ![Click Flows](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Click_Flows.png) 2. Name the Flow and then click **Add Step**. ![Add steps in a Flow on Studio](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Flows_AddSteps.png) 3. On the dialog box that appears, under **Choose step type** select **Free-floating**. ![Dialog box on Studio to choose between Flow step types](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Switcher_Flow_Types.png) The Free-floating Flow step appears on the application without latching on to any element.![Free-floating flow step types](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Free-floating_Flows_application.png) > [!NOTE] > Info: > > - **Attached to element** flow step works the same way as a normal Flow step. For more information to understand how a normal Flow works, see [Create a Flow](/studio/docs/creating-a-flow). > - You can choose to follow a particular step type throughout the Flow creation process, by selecting **Set as Default**. For instance, if you set **Free-floating** as a default step at the start, all the subsequent steps follow the same step type. ![Choose a default step type for Flows on Studio](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/STudio_Flow_StepTypes_Default.png) > - However, use the minimized Studio editor to switch over to either step at any point during Flow creation. > > ![Switch between Flow steps on Studio using the minimized Studio editor](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_FlowStep_switcher.png) > [!WARNING] > Note: > > - You can also set the default step type for Flows under the **Style** section on Dashboard. The selection that you make at the Dashboard level applies to the Studio level. > > > > ![Change Flow step types from the Style section on Dashboard](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard-Style_Flows_StepTypes.gif) 4. Customize the flow step type based on your requirements. a. Select the tip **Color** from the existing color picker or enter the hex code of the desired color. b. Select the **Close (X) color** from the existing color picker or enter the hex code of the desired color. c. Expand the **Position** and select the desired position of the tooltip out of the 9 options as shown below. ![Customize the color and position of the free-floating step in a Flow on Studio](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Free-floating_Flows_Customization.png) 5. Select the required **Step Completion Rules** for the selected step type. The **Step Completion Rules** for Free-floating step type are of only two types: ![There are only 2 types of step completion for free-floating flows on Studio](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_StepCompletion_Flow_Steps.png) | What does the step type mean? | | --- | | On click of “next” button | The next step is displayed when users click the "next" button in the tooltip. It is used when users have to select multiple options using a checkbox or in text fields, and then move to the next step after giving inputs. | | On page refresh (in case of change in URL) | The next step is displayed when users refresh the page. It is used in payment pages after successful payment where the page automatically refreshes. | For more information on the **Step Completion Rules** for **Attached to element** Flows, see [Define step completion rules](/studio/docs/defining-step-completion-rules). 6. Click **Save Step**. ![Save steps of a Free-floating Flow on Studio](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/FlowSteps_SaveStep.png) > [!NOTE] > Info: > > - Click **Preview** to preview the Flow during the Flow creation process on Studio. The Flow opens in a new tab and displays the steps that are created on the application. You must create and save at least one step to enable **Preview**. > - Your end users can choose to drag the Free-floating Flow step. The flexibility helps them avoid the step from hiding an UI element. Also, the action applies only to your end users, and not you. 7. Add additional steps based on your requirements. > [!NOTE] > Info: > > - You can copy the Flow steps either at Studio or Dashboard level. For more information on copying steps on Studio, see [Copy Flow Steps](/studio/docs/copying-flow-steps). > > > > Here’s how you can copy the Flow steps - **Attached to element** or **Free-floating** types - on the Dashboard. > > > > ![Copy Flow steps on Dashboard](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Flows_CopySteps.gif) #### Configure Free-floating steps in Flows Display Rules enable you to configure Flows to display the tooltip only when you meet the pre-determined conditions. Use the following steps to add Display Rules to Free-floating Flow steps: 1. On the Whatfix Studio, click **Visibility Rules**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Click_VR.png) 2. On the **Visibility Rules** page, set the following conditions: - **Where does the step appear?** - **When does the step start appearing?** - **Who does the step appear to?** ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Flow_AVR.png) 1. Once you have added all the required Visibility Rules, click **Save Step**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Save_Flow_Step.png) 2. Click **Save Flow**. ![Save Flow on Studio](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Save_Flow_Studio.png) For more information on the new visibility rules for Flows on Studio, see [New Visibility Rules for Flow steps](/studio/docs/advanced-visibility-rules-for-flow-steps) on Studio. #### Publish Flows with Free-floating steps Use the following steps to push the Flow to Production: 1. On the Whatfix Guidance dashboard, click **Content**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image%28320%29.png) 1. Click **Flows**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image%28321%29.png) 2. In the **Draft** stage, select the Flow, and then click **Send to Ready**. ![Move Flows from draft to ready](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Flows_SendtoReady.png) 3. Go to the **Ready** stage and select the Flow to move it to production stage, and then click **Publish**. ![Publish Flows on Dashboard](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Flows_Publish.png) > [!WARNING] > Note: > > **Re-capture Flow steps on Studio:** > > You can also re-capture the screen on Studio when switching steps on a page or when the UI screen changes on the same page. This way it helps you to avoid re-creating the step, while also ensuring the contextualization of steps on the page is maintained. Use the **Update** button to re-capture the screen. Once the process is successful, a toaster message appears saying **Step updated**. > > ![Re-capture Free-floating Flow steps in the same step without re-creating the steps](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Flows_re-capture.png) **Here’s a video on how to create and use Free-floating Flow step type:** [Video](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Free-floating%20Flow%20steps.mp4) ## Related - [Flows Best Practices](/flows-best-practices.md)