---
title: "Add a branch to a Flow"
slug: "adding-a-branch-to-a-flow"
updated: 2024-10-18T08:51:29Z
published: 2024-10-18T08:51:29Z
---

> ## 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 a branch to a Flow

Branching enables you to guide end users through several possible options. For example, if there are multiple paths that an end user can choose as part of a Flow, then branching can be used to ensure the users are guided irrespective of which option they select.

Add branches while creating a new Flow or while editing an existing one.

Use the following steps to create a branched 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)
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. Review or edit the auto generated action text on the step.  

![image.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image%28194%29.png)

          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)

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)

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)
2. Under the **Step Completion Rules** section, select **On click of selected element** as the Step Completion rule. ![Editor_flow_on_selected_element](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Editor_flow_on_selected_element.png)

          Info:

          

For more information on Step Completion Rules, see [Define step completion rules](/studio/docs/defining-step-completion-rules).

1. Click **Save Step**. ![Click_Save_step.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Save_step.png)
2. Hover your cursor over the step you want to create a branch, and then click the **branching** icon. ![Click_branch_icon.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2024-06-12_09-26-07.png)

Create a Branched Flow using one of the following ways:

- Create Branch
- Import Flow

    Create a Branch
    
     

Use the following steps to create a Branch Flow:

1. Once you click the branch icon, click **Create Branch**. ![Studio_createbranch](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2024-10-18_13-43-23.png)
2. Enter a name for the Branch Flow. ![Studio_branchflow](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2024-10-18_13-39-32.png)
3. Under **BRANCH DETAILS**, in the **Branch description** text box, add the description. ![Add_branchdescription](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2024-10-18_14-00-44.png)

          your title goes here

          

- The **Branch description** text is solely for your (Content creator's) reference and is not visible to your end users.
- The maximum character limit for Branch description is 100 characters.

1. To define the conditions for branching, click **+ Add Rule**, and then add a rule. ![Studio_addrule](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2024-10-18_14-02-18%281%29.png)
2. Go to the **STEPS** tab, and then click **+Add Step**. ![clm_branching_branched flow_add step](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_branched%20flow_add%20step.png)
3. Click the desired element on the page that the user needs to select.
4. Review or edit the auto-generated action text on the step. ![clm_branching_edit the tip](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_edit%20the%20tip.png)
5. Under **CONFIGURATIONS**, expand **Appearance**. ![Studio_configureflow](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_configureflow.png)

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)

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)
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)
3. Go to the **ADVANCED OPTIONS** tab, expand the **Display Rules** section, and then click **+ Add Rule** to set the **Display Rules**. ![2024-06-12_09-39-32.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2024-06-12_09-39-32%281%29.png)
4. Click **Save Step**. ![clm_branching_save step](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_save%20step.png)
5. To add additional steps, repeat steps 6 to 11.
6. Click **Save Branch**. ![clm_branchong_save branch](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branchong_save%20branch.png)

          Note:

          

- Once you create a Branch Flow, a visualization icon appear on the bottom right of Whatfix Studio. ![clm_flows_branching_visualize icon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_flows_branching_visualize%20icon.png)
- A Flow chart that displays a single view representation of complete Flow appears: ![flowchart](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/flowchart.png)

For more information, see [Visualize the Branching in a Flow.](/studio/docs/visualize-the-branching-in-a-flow)

          Info:

          

- In the same way Multi-level branches can also be created. The Multi-level Branch Creation feature enables you to create branched Flows while creating the main Flow or attach an existing flow to the main Flow. This eliminates the need to create flows and then attach them to the main flow while creating it.
- The branched Flow is saved on your Dashboard and you can reuse the same Flow as a branch in other Flows.

1. Once the branches are created, click **Save Flow**.  

![clm_branching_save flow](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_save%20flow.png)

          Note:

          

Use the Whatfix Dashboard to update a branch in an existing flow.

    Import Flow
    
     

Use the following steps to add a branch by importing an existing Flow:

1. Once you click the Branch icon, click **Import Flow**. ![clm_branching_import flows](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_import%20flows.png)
2. To define the conditions for branching, click **+ Add Rule**. ![clm_branching_import flow](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_import%20flow.png)
3. Click **Attach flow** to select and attach the Flow you want to branch to. ![Studio_AttachFlow](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2024-10-18_13-49-55.png)
4. Select the Flow.
5. Select the step number you want the Flow to jump to, and then click **Attach**. ![clm_branching_add steps](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_add%20steps.png)
6. Use the **Add Another Branch** button to add multiple branching conditions as required. ![clm_branching_add another branch](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_add%20another%20branch.png)
7. Click **Save Branch**. ![clm_branchong_save branch](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branchong_save%20branch.png)

          Note:

          

- Once you create a Branch Flow, you can see a visualization icon on the bottom right of Whatfix Studio. ![clm_flows_branching_visualize icon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_flows_branching_visualize%20icon.png)
- A Flow chart that displays a single view representation of complete Flow appears: ![flowchart](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/flowchart.png)

For more information, see [Visualize the Branching in a Flow.](/studio/docs/visualize-the-branching-in-a-flow)

1. Click **Save Flow.**  

![clm_branching_save flow](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_save%20flow.png)