---
title: "Add Screenshot Section in Free-floating Flows"
slug: "add-screenshot-component-in-free-floating-flows"
updated: 2026-02-17T15:41:48Z
published: 2026-02-17T15:41:48Z
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](/studio/docs/free-floating-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.

Use screenshots to -

- Create guidance content on elements which were earlier difficult to create Flow steps on. Screenshot Section makes it easy to specify the element with a visual marker, with no dependency on CSS selectors.
- Offer interactive, reliable guidance for your end users ensuring Flow completion.

---

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

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

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?sv=2026-02-06&spr=https&st=2026-11-12T07%3A26%3A21Z&se=2026-11-12T08%3A26%3A21Z&sr=c&sp=r&sig=KqmfouLFlyK33zzPcmyqD9ybN1LMDYpsfqA1Lk2AX7A%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-12T07%3A26%3A21Z&se=2026-11-12T08%3A26%3A21Z&sr=c&sp=r&sig=KqmfouLFlyK33zzPcmyqD9ybN1LMDYpsfqA1Lk2AX7A%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-12T07%3A26%3A21Z&se=2026-11-12T08%3A26%3A21Z&sr=c&sp=r&sig=KqmfouLFlyK33zzPcmyqD9ybN1LMDYpsfqA1Lk2AX7A%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-12T07%3A26%3A21Z&se=2026-11-12T08%3A26%3A21Z&sr=c&sp=r&sig=KqmfouLFlyK33zzPcmyqD9ybN1LMDYpsfqA1Lk2AX7A%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-12T07%3A26%3A21Z&se=2026-11-12T08%3A26%3A21Z&sr=c&sp=r&sig=KqmfouLFlyK33zzPcmyqD9ybN1LMDYpsfqA1Lk2AX7A%3D)

> [!WARNING]
> Note:
> 
> - **Attached to element** Flow step works the same way as a normal Flow step. For more information, 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?sv=2026-02-06&spr=https&st=2026-11-12T07%3A26%3A21Z&se=2026-11-12T08%3A26%3A21Z&sr=c&sp=r&sig=KqmfouLFlyK33zzPcmyqD9ybN1LMDYpsfqA1Lk2AX7A%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-12T07%3A26%3A21Z&se=2026-11-12T08%3A26%3A21Z&sr=c&sp=r&sig=KqmfouLFlyK33zzPcmyqD9ybN1LMDYpsfqA1Lk2AX7A%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-12T07%3A26%3A21Z&se=2026-11-12T08%3A26%3A21Z&sr=c&sp=r&sig=KqmfouLFlyK33zzPcmyqD9ybN1LMDYpsfqA1Lk2AX7A%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-12T07%3A26%3A21Z&se=2026-11-12T08%3A26%3A21Z&sr=c&sp=r&sig=KqmfouLFlyK33zzPcmyqD9ybN1LMDYpsfqA1Lk2AX7A%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-12T07%3A26%3A21Z&se=2026-11-12T08%3A26%3A21Z&sr=c&sp=r&sig=KqmfouLFlyK33zzPcmyqD9ybN1LMDYpsfqA1Lk2AX7A%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-12T07%3A26%3A21Z&se=2026-11-12T08%3A26%3A21Z&sr=c&sp=r&sig=KqmfouLFlyK33zzPcmyqD9ybN1LMDYpsfqA1Lk2AX7A%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-12T07%3A26%3A21Z&se=2026-11-12T08%3A26%3A21Z&sr=c&sp=r&sig=KqmfouLFlyK33zzPcmyqD9ybN1LMDYpsfqA1Lk2AX7A%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-12T07%3A26%3A21Z&se=2026-11-12T08%3A26%3A21Z&sr=c&sp=r&sig=KqmfouLFlyK33zzPcmyqD9ybN1LMDYpsfqA1Lk2AX7A%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-12T07%3A26%3A21Z&se=2026-11-12T08%3A26%3A21Z&sr=c&sp=r&sig=KqmfouLFlyK33zzPcmyqD9ybN1LMDYpsfqA1Lk2AX7A%3D)
> - [Customize the Free-floating steps](/studio/docs/create-free-floating-flows) further based on your use-case. Add [Step Completion Rules](/studio/docs/defining-step-completion-rules) to define how to show the Flow steps. For more information, see [Create a Flow with Free-floating steps](/studio/docs/create-free-floating-flows) and [Create a Flow](/studio/docs/creating-a-flow).
> - Add [display rules when you want to configure](/studio/docs/visibility-and-display-rule-conditions-1) 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](/studio/docs/action-buttons-in-flows) and [Edit Action Buttons in Flows](/studio/docs/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-12T07%3A26%3A21Z&se=2026-11-12T08%3A26%3A21Z&sr=c&sp=r&sig=KqmfouLFlyK33zzPcmyqD9ybN1LMDYpsfqA1Lk2AX7A%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-12T07%3A26%3A21Z&se=2026-11-12T08%3A26%3A21Z&sr=c&sp=r&sig=KqmfouLFlyK33zzPcmyqD9ybN1LMDYpsfqA1Lk2AX7A%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-12T07%3A26%3A21Z&se=2026-11-12T08%3A26%3A21Z&sr=c&sp=r&sig=KqmfouLFlyK33zzPcmyqD9ybN1LMDYpsfqA1Lk2AX7A%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-12T07%3A26%3A21Z&se=2026-11-12T08%3A26%3A21Z&sr=c&sp=r&sig=KqmfouLFlyK33zzPcmyqD9ybN1LMDYpsfqA1Lk2AX7A%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-12T07%3A26%3A21Z&se=2026-11-12T08%3A26%3A21Z&sr=c&sp=r&sig=KqmfouLFlyK33zzPcmyqD9ybN1LMDYpsfqA1Lk2AX7A%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-12T07%3A26%3A21Z&se=2026-11-12T08%3A26%3A21Z&sr=c&sp=r&sig=KqmfouLFlyK33zzPcmyqD9ybN1LMDYpsfqA1Lk2AX7A%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](/studio/docs/publish-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).

Whatfix Studio is a browser plug-in that enables you to create various types of Whatfix content, such as Flows, Smart Tips, Beacons, and so on. The plug-in can be installed on Google Chrome and the new Microsoft Edge browsers.

The Whatfix Dashboard is where you can perform the following actions:

- Access all content that has been created by users in your organization.
- Access and manage content widgets like Self Help, Pop-ups, Smart tips, Beacons, and Task List
- Manage users
- Manage tags
- Access Analytics
- Manage translations
- Manage Tip or Flow configurations

## Related

- [Free-floating steps in Flows](/free-floating-flows.md)
- [Understand Action Buttons in Flows](/action-buttons-in-flows.md)