--- title: "Create Flows" slug: "create-flows" updated: 2026-07-08T09:27:29Z published: 2026-07-08T09:27:29Z canonical: "support.whatfix.com/create-flows" stale: true --- > ## 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 Whatfix Flows are sequential steps that help users learn an objective or complete a task through a series of step-by-step actions. Flows handhold users through various sequential tasks. These steps appear as a layer over your web application. Use the following steps to create a Flow: 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?sv=2026-02-06&spr=https&st=2026-10-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D) 2. 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-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D) 3. In the Studio toolbar, select a capture mode. ![std_toolbar_capture_modes](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/std_toolbar_capture_modes.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D) Note: - **Free floating step** 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. - For more information on different capture modes, see [Quick Capture Modes](https://support.whatfix.com/docs/what-are-quick-capture-flows#quick-capture-modes). 1. Click the desired elements on the application page. ![Create_Flow_Leads_Click](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Create_Flow_Leads_Click.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D) 2. After you have captured the required steps, click **Done**. ![std_toolbar_done1](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/std_toolbar_done%281%29.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D) 3. Enter the name of the Flow. ![Editor_flow_name6](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Editor_flow_name%286%29.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D) Info: - Whatfix enables you to add a Display Name for your end users. Use the Content Name for internal tracking, such as region, role, module, or release codes. Users then see the Display Name in the Self Help, Task List widgets, Hub, Flow Automation Popups and Exports. For more information, see [Add a Display Name to Whatfix Content](https://support.whatfix.com/docs/add-a-dislay-name-to-whatfix-content). ![The image shows the Flow name and the Display Name field while creating a flow on the Studio.](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/FlowDisplayName.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D) - To capture additional steps, click **Add Step**. ![Click Add Step](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click%20Add%20Step.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D) 1. Review or Edit the auto generated action text on the step. ![SF_Click_Leads](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SF_Click_Leads.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D) Info: Enter any additional information that you want to provide in the description section of the tooltip. 1. Under **CONFIGURATIONS**, expand **Appearance**. ![Studio_configureflow](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_configureflow.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D) Make the following configurations: - Select a Tool tip appearance from the available options. - Select the tip **Color** from the existing color picker or enter the hex code of the desired color. - Select the **Close (X) color** from the existing color picker or enter the hex code of the desired color. ![Choose_Flow_Theme.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Choose_Flow_Theme.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D) 1. Expand **Position** and select the desired position of the tooltip. ![Choose_Position_Flow.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Choose_Position_Flow.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D) 2. Under the **Step Completion Rules** section, select the desired rule. For more information on the Step Completion Rules, see [Define step completion rules](/studio/docs/defining-step-completion-rules) ![Define_step_completion rules.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Define_step_completion%20rules.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D) 3. Click **Save Step**. ![Click_Save_step.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Save_step.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D) Note: Click **Preview** to preview the Flow during the Flow creation 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**. ![Click_Previewflow.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Previewflow.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D) 1. Go to where you want to start the next step and then click **+ Add Step** on the Studio. ![Click Add Step.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click%20Add%20Step.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D) 2. Repeat steps 5 to 10 to add additional steps. your title goes here [Display Rules](/studio/docs/visibility-and-display-rule-conditions-1) enable you to configure Flows to display the tooltip only when pre-determined conditions are met. Use the following steps to add Display Rules to Flow steps: a. Click **ADVANCED OPTIONS**. ![Click_advanced_options.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_advanced_options%281%29.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D) b. Expand the **Display Rules** section and then click **+ Add Rule**. Display Rules enable you to configure Flows to display the tooltip only when pre-determined conditions are met. ![Click_add_rule.png](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-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D) c. Set the desired conditions. For more information on the different conditions that can be used in Display Rules, see [Visibility and Display Rule Conditions](/studio/docs/visibility-and-display-rule-conditions-1) ![Add_Rule.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Add_Rule.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D) Add multiple conditions using **+ Add Rule** if needed. 1. Click **Save Flow**. ![Click_Saveflow](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Saveflow.png?sv=2026-02-06&spr=https&st=2026-10-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D) Info: - Edit a Flow step during the Flow creation. For more information, see [Edit a Flow](/studio/docs/editing-a-flow). - The Flow you created is saved on Whatfix, the Flow needs to be pushed to the Whatfix CDN servers before it is available for your users. You might be able to see the content using the **Preview mode** or the **See Live** option (during content creation), but for the content to be live and reflect on your end user's application, you must perform a Push to Production. Use the following steps to push the Flow to Production: 1. On the Whatfix Guidance dashboard, click **Content**. ![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-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D) 2. Click **Flows**. ![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-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D) 3. In the **Draft** stage, select the Flow, and then click **Send to ready**. ![clm_db_send_to_ready](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_db_send_to_ready.jpg?sv=2026-02-06&spr=https&st=2026-10-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D) 4. Go to the **Ready** Stage and select the Flow to move it to Production Stage, and then click **Push to production**. ![clm_db_p2p](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_db_p2p.jpg?sv=2026-02-06&spr=https&st=2026-10-29T16%3A56%3A34Z&se=2026-10-29T17%3A56%3A34Z&sr=c&sp=r&sig=ymGefnrGNpkUeyGhbwD29YmpCrLuBXbmHOp%2BZCwV2Oo%3D)