--- title: "Customize a Flow" slug: "customizing-flows" updated: 2026-02-06T11:29:53Z published: 2026-02-06T11:29:53Z --- > ## 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. # Customize a Flow Each Flow in Whatfix can have its unique properties, such as themes, end messages, tooltip color, font size, and more. For example, all the Flows in your account can have the Classic theme, but one or more Flows of your choice can have the Modern theme applied to them. You also have the option to customize the tooltips for Flows using CSS customization and AI CSS customization. For more information, see how to use [CSS customization of tooltips](/studio/docs/configure-tooltips-with-css-customization) and [AI CSS customization of tooltips](/studio/docs/use-ai-functionality-for-css-customization-of-tooltips). There are two ways of customizing a Flow: - [Customize a Flow using Whatfix Dashboard](/studio/docs/customizing-flows#here-are-the-ways-you-can-customize-a-flow-on-whatfix-dashboard) - [Customize a Flow using Whatfix Studio](/studio/docs/customizing-flows#here-are-the-ways-you-can-customize-a-flow-on-whatfix-studio) ### Customize a Flow 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) 4. Click **Customize**. ![db_flow_customize](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/db_flow_customize.png) 1. Make the necessary changes, such as adding or removing **End Message**, adding or removing **Feedback**, and more. ![Image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-PW3ZQLB4.png) Note: Whatfix enables you to change the Flow's End Message, Feedback, Flow Automation Pop-up properties, and more. 1. Once the changes are made, click **Save**. ![db_flow_save_customize](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/db_flow_save_customize.png) ### Customize a Flow on Whatfix Studio 1. Log in to the application where you want to create content, and then launch the **Whatfix Studio**. ![CLM_editor plug in2](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CLM_editor%20plug%20in%282%29.png) 2. Click **Flow**. ![Studio_Click_Flow](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Flow%281%29.png) 3. Enter the name of the Flow as you want it displayed to the users. ![Studio_Enter_Flow_Name](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Enter_Flow_Name.png) 4. Click **Add Step**. ![Studio_Click_Add_Step](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Add_Step.png) 5. Under **Choose step type**, select the Flow step type. ![Switch over to the Flow step types from the dialog box that appears ](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Flow_Step%20Types_Switch.png) Note: - With the Flow enhancement feature, you have the option to select two types of Flow steps, and not just element latching Flows. A dialog box appears on the application to highlight the two types of Flows. Under **Choose step type**, select a Flow step based on your requirements: either **Attached to element** or **Free-floating**. ![Studio switcher enables you to switch between 2 flow types: element-attached flow types and free-floating flow types](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Switcher_Flow_Types.png) | Attached to element | Free-floating | | --- | --- | | When you select this type of Flow step, it remains attached to an element on your application. | When you select this type of Flow step, it remains flexibly positioned devoid of any element attachment. | - You also have the option to select a default template by clicking **Set as Default** for all the subsequent steps in a Flow. If you change the default step at an enterprise (ENT) level, it appears the same for all the users using that ENT. - For more information, see [Free-floating Flows](/studio/docs/free-floating-flows) and [Create a Free-floating Flow step](/studio/docs/create-free-floating-flows). - Free-floating Flows is currently Beta. Contact [support@whatfix.com](http://mailto:support@whatfix.com?subject=Enable%20Free-floating%20Flow%20step%20&body=Hi%0A%0AI%20would%20like%20to%20explore%20the%20new%20Free-floating%20Flow%20step%20type.%20Kindly%20enable%20it%20on%20my%20ENT%0A%0AThanks) for more information. 1. Click the desired element on the page that the user needs to select. ![Create_Flow_Leads_Click](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Create_Flow_Leads_Click.png) 1. Choose any desired **Step Type** on Studio, either **Free-floating** or **Attached to element**. ![Change the step type for Flow on Studio. Switch between free-floating and attached to element step types. ](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Flows-StepType.png) 2. Click **Change** to change the tooltip template. There are three types of templates available: **Classic**, **Modern**, and **Ivory**. ![Dashboard_FlowTooltip_Change](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_FlowTooltip_Change.png) 3. Go to **Color** and choose the required color for the tooltip. ![Select the color of the tooltip for Flows ](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Flows_Tooltip_color.png) 4. In the **Close (X) color** section, choose the color of the close icon. ![Change the color of the close icon on Flows ](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Flows_close_icon_color.png) 5. Align the **Position** of Flow tooltips on Studio. ![Align the position of the tooltip for Flows using Studio](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Flows_Position.png) 6. Click **Save Step**. ![Click Save Step FLow](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click%20Save%20Step%20FLow.png) 7. Click **Save Flow**. ![Image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Save_Flow_Studio.png) Note: - Ensure you choose the required **Step Completion Rules** based on the Flow type you choose. For more information, see [Define Step Completion Rules](/studio/docs/defining-step-completion-rules). - Publish the Flows so that the content starts appearing with the customizations, for your end users. For more information, see [Publish all Whatfix content and widgets to Production](/studio/docs/pushing-whatfix-content-to-production). Info: A Flow can be configured at both Flow level and Account level. For example, if you have set your Flow theme as Modern at the Account level and set the theme for a particular Flow as Ivory at a Flow level, then that Flow would have the Ivory theme. If you want to change the account level configuration, see [Configure Themes and Tooltips](/studio/docs/configure-themes-and-tooltips). ## Related - [Configure Style and Tooltips](/configure-themes-and-tooltips.md)