Adding a branch to a Flow
  • 26 Apr 2022
  • 5 Minutes To Read
  • Dark
  • PDF

Adding a branch to a Flow

  • Dark
  • PDF

You can add branches while creating a new Flow or when editing an existing one. Create the branched Flows before you create the main Flow. The following procedure explains how to create the main Flow and then link the branched Flows.

  1. Click the Whatfix Editor plugin to launch the Editor.2022-04-22_13-55-27

  2. Click Flow.

  3. Enter the name of the Flow as you want it displayed to a user.RB_editor_flow_name

  4. Click +Step.

  5. Select the element that encompasses all the options that you want to branch out from.
    branching drop down

  6. In the Editor, scroll down to Step Completion Rules and select the On click of selected element checkbox.Dashboard_flows_step_completion

  7. Under the Branching Rules section, configure the branching conditions for the step.


If you do not see Branching Rules, select the Advanced Options checkbox.

  1. Use the If condition to define the conditions for branching. The table at the end of this document explains each condition in detail.Dashboard_branching_if
  2. Use the Then condition to select and attach the flow you want to branch to.Dasboard_branching_then
  3. Select the step number you want the flow to jump to.
  4. Use the Add Another button to add multiple branching conditions as required.Editor_branching_addanother
  5. Finish creating the Flow.

Points to remember while creating Branching:

  • The element of the step from where you branch out (step 5 above) must contain all the elements that you want to branch out from.
  • The step on which Branching is added (see step 5 above) must be completed before the Branching rule is evaluated. Ensure step completion rule is done.
  • The step completion rule selected (in step 6) where the encompassing selection is done must match with the action being done when evaluating the branching rules (step 8).

Commonly used conditions when configuring branching rules.


Other Element


If you want to identify a page based on the presence of a particular element (other than the one you have selected) on your web page, you can use this condition. The values passed to this condition are CSS selectors like #ID, .class, or Jquery.

Window Variable


For Advanced Customization, you can choose to identify a page using the value of a particular Javascript global variable.
Example: If you want to check user.role='admin', you can set the condition.
You can also use this option to perform comparison options as below:
  • Greater than
  • Less than
  • Date Greater than
  • Date Less than
Note: You don't need to add a window at the start for window variables.

Action Element


This is the element that the user clicks to decide which branch to take. These are typically buttons or tabs that do not have any options to choose from. Ensure that when selecting an action element, the step completion must be set to on selected element.

Action Element Text


This is the text that is displayed on the Action Element that is selected above.

Selected Element


Your application uses unique IDs for some elements on the page. This is used when your element is selected from a list of options. For example, a drop-down menu. This lets you provide your own CSS selector identifier for the element. Sample values

Selected Element Text


This is the text that is displayed on the Element selector that is selected above.
If your application supports multiple languages, you can choose "is one of" option and add the name with a comma (,) as a delimiter.
Note: The value is case-sensitive.

For a better understanding of CSS selectors, see CSS Selectors.

  • When you select the Action element or Other element on-page as the condition, you do not need to find the code. Instead, use the Selector from the drop-down menu to click the element in your application and select the appropriate value.Branching Rule

  • When you select Action Element as the condition, the Step Completion Rule must always be On click of selected element.Dashboard_flows_step_completion(1)

Supported Operators

EqualsFor an exact match
Not EqualsDoesn't equal the value
ContainsSet value is present anywhere in the value of the condition. (Check for strings)
Not ContainsSet value is not present anywhere in the value of the condition
Starts WithSet value is at the beginning of the value of the condition
Ends WithSet value is at the end of the value of the condition
ExistsSet value is available (or true)
Not ExistsSet value is not available (or false)
  • Incomplete branches are not evaluated.
  • If you don't have the Flow that you want to skip to, you can add the conditions while creating the Flow and add the Flow later.
  • When a step has multiple branches, Whatfix selects the first branch whose conditions are evaluated as true.
  • If you have created Flows inside iFrames then the window variable must be pointed to the respective frame. You may use window.frames
  • If you are adding multiple conditions, then the tip will show up only if all the conditions are true. (Similar to Boolean AND) 
  • jQuery CSS selector options will always show in the UI, however, it is supported ONLY for applications that have jQuery in the underlying platform
For window variables:
  • Greater and less than only accept numerical values
  • For date greater than/less than, the default format is “MM/DD/YYYY”. The format can be changed to match your system date format. Contact Whatfix support to make this change.
Branching in an iFrame and ShadowDOM application

When trying to select an element Whatfix automatically detects the best element from your application pages. However, there may be instances where certain elements cannot be detected. This could be because the selected element is located inside multiple layers of code iFrame, ShadowDOM, or both.
The table below explains how branching can be done when you use iFrame or ShadowDOM applications. Note that the way you define element selection is different when you are dealing with an action element (when there is an action on the element) or if it is another element (when there is no action on the element and you use the element to distinguish the page from other pages). An example of a selected element is a drop-down menu that could have several possible values. A selected element works just like an action element.

  • In an iFrame application, if you are selecting an action element, then only the element and the immediate iFrame that contains the element needs to be identified.
  • In an iFrame application, if you are using the other element, the entire path is to be defined starting from the element back to the outermost iFrame
  • In a ShadowDOM application, if you are selecting an action element or an 'other' element, the entire path is to be defined starting from the element back to the outermost ShadowDOM

See the example below for a clearer understanding of how to select an action element or another element in each scenario.

When the element is inAction Element/ Selected ElementOther Element







ShadowDOM inside an iframe






Was this article helpful?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.