--- 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) 1. Under **CONTENT**, 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 any element latching. ![Free-floating flow step types](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Free-floating_Flows_application.png) > [!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) > - 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) 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) 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) 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) 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) 5. Click **Save Step**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Editor_flows_save_step.png) 6. Click **Save Flow**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Save_Flow_Studio.png) > [!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) > - [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) 2. Click **Flows**. ![ia_left%20nav_flows](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left%20nav_flows.png) 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) 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) 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) 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) > [!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)