---
title: "Create Free-floating Flows"
slug: "create-free-floating-flows"
updated: 2026-04-27T06:22:28Z
published: 2026-04-29T08:44:27Z
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, you need to understand three key actions:

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%0ADodli) to enable the feature.
> - You also have the option to [add screenshots in a Free-floating step](/desktop/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.

### Here’s how to create a Free-floating step type in Flows:

1. Log in to your application, and then launch the **Whatfix Desktop Studio**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Desktop_Studio_Application.png?sv=2026-02-06&spr=https&st=2026-10-30T02%3A10%3A15Z&se=2026-10-30T03%3A10%3A15Z&sr=c&sp=r&sig=p9B6e5We7g254GxpeRhSW2CCdIYRQljw8zQ21yWOn%2Fc%3D)
2. Under **CONTENT**, click **Flow**. ![Click Flows](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Click_Flows.png?sv=2026-02-06&spr=https&st=2026-10-30T02%3A10%3A15Z&se=2026-10-30T03%3A10%3A15Z&sr=c&sp=r&sig=p9B6e5We7g254GxpeRhSW2CCdIYRQljw8zQ21yWOn%2Fc%3D)
3. 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?sv=2026-02-06&spr=https&st=2026-10-30T02%3A10%3A15Z&se=2026-10-30T03%3A10%3A15Z&sr=c&sp=r&sig=p9B6e5We7g254GxpeRhSW2CCdIYRQljw8zQ21yWOn%2Fc%3D)
4. 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?sv=2026-02-06&spr=https&st=2026-10-30T02%3A10%3A15Z&se=2026-10-30T03%3A10%3A15Z&sr=c&sp=r&sig=p9B6e5We7g254GxpeRhSW2CCdIYRQljw8zQ21yWOn%2Fc%3D)

The Free-floating Flow step appears on the application without any element latching. ![Free-floating flow step types](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Free-floating_Flows_application.png?sv=2026-02-06&spr=https&st=2026-10-30T02%3A10%3A15Z&se=2026-10-30T03%3A10%3A15Z&sr=c&sp=r&sig=p9B6e5We7g254GxpeRhSW2CCdIYRQljw8zQ21yWOn%2Fc%3D)

> [!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](/desktop/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?sv=2026-02-06&spr=https&st=2026-10-30T02%3A10%3A15Z&se=2026-10-30T03%3A10%3A15Z&sr=c&sp=r&sig=p9B6e5We7g254GxpeRhSW2CCdIYRQljw8zQ21yWOn%2Fc%3D)
> - 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?sv=2026-02-06&spr=https&st=2026-10-30T02%3A10%3A15Z&se=2026-10-30T03%3A10%3A15Z&sr=c&sp=r&sig=p9B6e5We7g254GxpeRhSW2CCdIYRQljw8zQ21yWOn%2Fc%3D)

> [!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?sv=2026-02-06&spr=https&st=2026-10-30T02%3A10%3A15Z&se=2026-10-30T03%3A10%3A15Z&sr=c&sp=r&sig=p9B6e5We7g254GxpeRhSW2CCdIYRQljw8zQ21yWOn%2Fc%3D)
5. 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?sv=2026-02-06&spr=https&st=2026-10-30T02%3A10%3A15Z&se=2026-10-30T03%3A10%3A15Z&sr=c&sp=r&sig=p9B6e5We7g254GxpeRhSW2CCdIYRQljw8zQ21yWOn%2Fc%3D)
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?sv=2026-02-06&spr=https&st=2026-10-30T02%3A10%3A15Z&se=2026-10-30T03%3A10%3A15Z&sr=c&sp=r&sig=p9B6e5We7g254GxpeRhSW2CCdIYRQljw8zQ21yWOn%2Fc%3D)

> [!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.
> 
> 
> 
> ![Your end users can drag and place a Free-floating tooltip on a page](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Free-floating%20Flow_Behavior.gif?sv=2026-02-06&spr=https&st=2026-10-30T02%3A10%3A15Z&se=2026-10-30T03%3A10%3A15Z&sr=c&sp=r&sig=p9B6e5We7g254GxpeRhSW2CCdIYRQljw8zQ21yWOn%2Fc%3D)
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](/desktop/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?sv=2026-02-06&spr=https&st=2026-10-30T02%3A10%3A15Z&se=2026-10-30T03%3A10%3A15Z&sr=c&sp=r&sig=p9B6e5We7g254GxpeRhSW2CCdIYRQljw8zQ21yWOn%2Fc%3D)

#### 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. Click **Advanced options**.

![Click Advanced options on Flow steps](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_FlowSteps_Advancedoptions.png?sv=2026-02-06&spr=https&st=2026-10-30T02%3A10%3A15Z&se=2026-10-30T03%3A10%3A15Z&sr=c&sp=r&sig=p9B6e5We7g254GxpeRhSW2CCdIYRQljw8zQ21yWOn%2Fc%3D)
2. Expand the **Display Rules** section and then click **Add Rule**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_add_rule%285%29.png?sv=2026-02-06&spr=https&st=2026-10-30T02%3A10%3A15Z&se=2026-10-30T03%3A10%3A15Z&sr=c&sp=r&sig=p9B6e5We7g254GxpeRhSW2CCdIYRQljw8zQ21yWOn%2Fc%3D)
3. Set the desired conditions. For more information on the different conditions that can be used in **Display Rules**, see [Visibility and Display Rule Conditions](/desktop/docs/visibility-and-display-rule-conditions).

![Display rules for content and widgets on Studio](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Add_Rule.png?sv=2026-02-06&spr=https&st=2026-10-30T02%3A10%3A15Z&se=2026-10-30T03%3A10%3A15Z&sr=c&sp=r&sig=p9B6e5We7g254GxpeRhSW2CCdIYRQljw8zQ21yWOn%2Fc%3D)

Add multiple conditions using **Add Rule** if needed.
4. Click **Save Flow**. ![Save Flow on Studio](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Save_Flow_Studio.png?sv=2026-02-06&spr=https&st=2026-10-30T02%3A10%3A15Z&se=2026-10-30T03%3A10%3A15Z&sr=c&sp=r&sig=p9B6e5We7g254GxpeRhSW2CCdIYRQljw8zQ21yWOn%2Fc%3D)

#### 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?sv=2026-02-06&spr=https&st=2026-10-30T02%3A10%3A15Z&se=2026-10-30T03%3A10%3A15Z&sr=c&sp=r&sig=p9B6e5We7g254GxpeRhSW2CCdIYRQljw8zQ21yWOn%2Fc%3D)

1. Click **Flows**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image%28321%29.png?sv=2026-02-06&spr=https&st=2026-10-30T02%3A10%3A15Z&se=2026-10-30T03%3A10%3A15Z&sr=c&sp=r&sig=p9B6e5We7g254GxpeRhSW2CCdIYRQljw8zQ21yWOn%2Fc%3D)
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?sv=2026-02-06&spr=https&st=2026-10-30T02%3A10%3A15Z&se=2026-10-30T03%3A10%3A15Z&sr=c&sp=r&sig=p9B6e5We7g254GxpeRhSW2CCdIYRQljw8zQ21yWOn%2Fc%3D)
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?sv=2026-02-06&spr=https&st=2026-10-30T02%3A10%3A15Z&se=2026-10-30T03%3A10%3A15Z&sr=c&sp=r&sig=p9B6e5We7g254GxpeRhSW2CCdIYRQljw8zQ21yWOn%2Fc%3D)

> [!WARNING]
> Note:
> 
> 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?sv=2026-02-06&spr=https&st=2026-10-30T02%3A10%3A15Z&se=2026-10-30T03%3A10%3A15Z&sr=c&sp=r&sig=p9B6e5We7g254GxpeRhSW2CCdIYRQljw8zQ21yWOn%2Fc%3D)