---
title: "Add Screenshot Section in Free-floating Flows"
slug: "add-screenshot-component-in-free-floating-flows"
updated: 2026-01-07T10:55:03Z
published: 2026-01-07T10:55:03Z
canonical: "support.whatfix.com/add-screenshot-component-in-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.

# Add Screenshot Section in Free-floating Flows

#### Overview

The Screenshot Section in Free-floating Flows is designed to give a clear visual reference of the exact screen a Flow step is meant to point at for your users. For more information on Free-floating Flows and how to create them, see [Free-floating steps in Flows](/desktop/docs/clone-free-floating-steps-in-flows).

> [!WARNING]
> Note:
> 
> The Screenshot Section in Free-floating Flows is Beta. Contact [support@whatfix.com](mailto:support@whatfix.com?subject=Enable%20Screenshot%20Component%20in%20Free-floating%20Flows%20&body=Hi%20%0A%0APlease%20enable%20Screenshot%20Component%20in%20Free-floating%20Flows.%0A%0AThanks) for more information.

The screenshot becomes your most valuable diagnostic tool to help you with:

- Identifying a failure: Instantly see if the UI element is missing, has changed, or if the user is on the wrong screen.
- Reducing the troubleshooting time: You have the visual proof right next to your Flow step, helping you move faster on the UI. This helps you quickly rule out: “Is the user on the wrong page?” or “Is the UI not loading for them?”

---

#### Use the following steps to use Screenshot Section in Free-floating Flows:

****Add Screenshot Section in Free-floating Flows on Whatfix Desktop Studio****

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-11-12T08%3A19%3A39Z&se=2026-11-12T09%3A19%3A39Z&sr=c&sp=r&sig=l%2BJv2eBRY%2F5AG0oKxnDOeNA4U6zIJQ7uShyhKH14TvE%3D)

1. 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-11-12T08%3A19%3A39Z&se=2026-11-12T09%3A19%3A39Z&sr=c&sp=r&sig=l%2BJv2eBRY%2F5AG0oKxnDOeNA4U6zIJQ7uShyhKH14TvE%3D)
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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A19%3A39Z&se=2026-11-12T09%3A19%3A39Z&sr=c&sp=r&sig=l%2BJv2eBRY%2F5AG0oKxnDOeNA4U6zIJQ7uShyhKH14TvE%3D)
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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A19%3A39Z&se=2026-11-12T09%3A19%3A39Z&sr=c&sp=r&sig=l%2BJv2eBRY%2F5AG0oKxnDOeNA4U6zIJQ7uShyhKH14TvE%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-11-12T08%3A19%3A39Z&se=2026-11-12T09%3A19%3A39Z&sr=c&sp=r&sig=l%2BJv2eBRY%2F5AG0oKxnDOeNA4U6zIJQ7uShyhKH14TvE%3D)

> [!WARNING]
> Note:
> 
> - **Attached to element** Flow step works the same way as a normal Flow step. For more information, 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-11-12T08%3A19%3A39Z&se=2026-11-12T09%3A19%3A39Z&sr=c&sp=r&sig=l%2BJv2eBRY%2F5AG0oKxnDOeNA4U6zIJQ7uShyhKH14TvE%3D)
> - You have the option to use the minimized Studio editor to select **Free-floating** steps in Flows.![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-11-12T08%3A19%3A39Z&se=2026-11-12T09%3A19%3A39Z&sr=c&sp=r&sig=l%2BJv2eBRY%2F5AG0oKxnDOeNA4U6zIJQ7uShyhKH14TvE%3D)

1. On Studio, enable the **Add screenshot section** toggle.

![Enable the screenshot toggle for capturing images in Free-floating Flows](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Flows-Screenshot_toggle.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A19%3A39Z&se=2026-11-12T09%3A19%3A39Z&sr=c&sp=r&sig=l%2BJv2eBRY%2F5AG0oKxnDOeNA4U6zIJQ7uShyhKH14TvE%3D)
2. On the Flow step, Click **Capture image from screen**.

![Capture image from screen](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Flows_Screenshot_capture.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A19%3A39Z&se=2026-11-12T09%3A19%3A39Z&sr=c&sp=r&sig=l%2BJv2eBRY%2F5AG0oKxnDOeNA4U6zIJQ7uShyhKH14TvE%3D)
3. Drag and select a portion of the screen to add it to the screenshot.

![Captured screenshot in Free-floating steps in Flows](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Flows_Screenshot_captured.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A19%3A39Z&se=2026-11-12T09%3A19%3A39Z&sr=c&sp=r&sig=l%2BJv2eBRY%2F5AG0oKxnDOeNA4U6zIJQ7uShyhKH14TvE%3D)
4. Add a title and description for the Flow step.

![Add title and description to the Flow tooltip](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Flows_Screenshot_description.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A19%3A39Z&se=2026-11-12T09%3A19%3A39Z&sr=c&sp=r&sig=l%2BJv2eBRY%2F5AG0oKxnDOeNA4U6zIJQ7uShyhKH14TvE%3D)
5. Click **Save Step**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Editor_flows_save_step.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A19%3A39Z&se=2026-11-12T09%3A19%3A39Z&sr=c&sp=r&sig=l%2BJv2eBRY%2F5AG0oKxnDOeNA4U6zIJQ7uShyhKH14TvE%3D)
6. Click **Save Flow**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Save_Flow_Studio.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A19%3A39Z&se=2026-11-12T09%3A19%3A39Z&sr=c&sp=r&sig=l%2BJv2eBRY%2F5AG0oKxnDOeNA4U6zIJQ7uShyhKH14TvE%3D)

> [!WARNING]
> Note:
> 
> - You have the option to **Add Alt Text** or **Recapture** the screen while creating the Flow on Studio.
> 
> 
> 
> ![Add alt text or recapture steps in Flows while creating content on Studio](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Flows_add_alttext_recapture.gif?sv=2026-02-06&spr=https&st=2026-11-12T08%3A19%3A39Z&se=2026-11-12T09%3A19%3A39Z&sr=c&sp=r&sig=l%2BJv2eBRY%2F5AG0oKxnDOeNA4U6zIJQ7uShyhKH14TvE%3D)
> - [Customize the Free-floating steps](/desktop/docs/create-free-floating-flows) further based on your use-case.
> - Add [display rules when you want to configure](/desktop/docs/visibility-and-display-rule-conditions) how you want to show the tooltip to your users.
> - You can also add **Action Buttons** along with the **Screenshot Section** in your Free-floating step types. For more information, see Understand Action Buttons in Flows and Edit Action Buttons in Flows.

****Add or remove Screenshot Section in Free-floating Flows on Whatfix Dashboard****

1. On the Whatfix Guidance dashboard, click **Content**. ![ia_left_nav_content](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left_nav_content.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A19%3A39Z&se=2026-11-12T09%3A19%3A39Z&sr=c&sp=r&sig=l%2BJv2eBRY%2F5AG0oKxnDOeNA4U6zIJQ7uShyhKH14TvE%3D)
2. Click **Flows**. ![ia_left%20nav_flows](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left%20nav_flows.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A19%3A39Z&se=2026-11-12T09%3A19%3A39Z&sr=c&sp=r&sig=l%2BJv2eBRY%2F5AG0oKxnDOeNA4U6zIJQ7uShyhKH14TvE%3D)
3. Hover your cursor over the required Flow, and then click the **Edit** icon. ![image.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-QSOJQNUO.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A19%3A39Z&se=2026-11-12T09%3A19%3A39Z&sr=c&sp=r&sig=l%2BJv2eBRY%2F5AG0oKxnDOeNA4U6zIJQ7uShyhKH14TvE%3D)

1. Click open the content card for the Flow that you want to edit.

![Edit the screen captured in Flows](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Flows_Screenshotcapture_edit.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A19%3A39Z&se=2026-11-12T09%3A19%3A39Z&sr=c&sp=r&sig=l%2BJv2eBRY%2F5AG0oKxnDOeNA4U6zIJQ7uShyhKH14TvE%3D)
2. You can either **Add Alt Text** or remove the screenshot by disabling the **Add screenshot section** toggle.

![Edit the screenshot in Free-floating steps in Flows on Dashboard](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot_capture_dvmedit.gif?sv=2026-02-06&spr=https&st=2026-11-12T08%3A19%3A39Z&se=2026-11-12T09%3A19%3A39Z&sr=c&sp=r&sig=l%2BJv2eBRY%2F5AG0oKxnDOeNA4U6zIJQ7uShyhKH14TvE%3D)
3. Click **Save**.

![Click Save to save the Flow on dashboard](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Flows_screenshot_Save.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A19%3A39Z&se=2026-11-12T09%3A19%3A39Z&sr=c&sp=r&sig=l%2BJv2eBRY%2F5AG0oKxnDOeNA4U6zIJQ7uShyhKH14TvE%3D)

> [!WARNING]
> Note:
> 
> - Your end users can also zoom in to an image to visualize the entire screenshot captured at a Flow step level.
> - [Publish the Flows](/desktop/docs/publishing-whatfix-content) so that the content starts appearing to your users.

The feature release stage in which functionality is made available to a limited group of users for testing and feedback. Beta features are generally stable but may still undergo changes before becoming Generally Available (GA).