Whatfix enables you to visualize a branching in a Flow. The visualization provides a single representation of the complete Flow, including all the branched Flows under the main Flow. Expand the branched Flows to view all the steps that are part of the Flow. Visualization of branching helps you understand all the possible paths that an end user can choose based on different branching rules.
- The Visualize icon appears only when you create a Branched Flow.
- The Visualization flow chart can be viewed even for the existing Branched Flows.
Use the following steps to view the visualization of the Branching in a Flow:
-
Log in to the application where you want to create content, and then launch the Whatfix Studio.
-
Click Flow.
-
Enter the name of the Flow as you want it displayed to the users.
-
Click + Add Step.
-
Click the desired element on the page that the user needs to select.
- 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.
| 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. |
-
For more information, see Free-floating Flows and Create a Free-floating Flow step.
-
Free-floating Flows is currently Beta. Contact support@whatfix.com for more information.
-
After element selection, under the Configurations tab, scroll down to the Step Completion Rules section and choose the Manual option.
-
Select On click of selected element as the step completion rule.
-
Click Save Step.
-
Hover your cursor over the step you want to create a branch and then click the branching icon.
Use either of the two ways to visualize branching in a Flow:
Use the following steps to create a Branch Flow:
-
Once you click the branch icon, click Create new Flow.
-
Under Set Rules, define the branching rules. For more information, see Visibility Rules for Flow steps on Studio.
-
To define the conditions for branching, click Add Rule and then add a rule.
-
Go to the Steps tab, and then click Add Step.
-
Click the desired element on the page that the user needs to select.
-
Review or edit the auto-generated action text on the step.
-
Under CONFIGURATIONS, expand Appearance.
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.
-
Expand Position and select the desired position of the tooltip.
-
Scroll down to the Step Completion Rules section and set the step completion rule.
-
Go to the ADVANCED OPTIONS tab, and then set the Display Rules.
-
Click Save Step.
-
To add additional steps, repeat steps 6 to 10.
-
Click Save Branch.
-
Once done, click the Visualize icon.
View the following details in the visualization chart:
- The main Flow and its steps
- The branched Flows and their steps
- Branching conditions for the branched Flows
- A map view of the visualization flow chart
A map view gives you an idea of the view port area. It is a rough sketch of the Visualization flow chart.
- Once the branches are created, click Save Flow.
Use the following steps to Import an existing Flow:
-
Once you click the Branch icon, click Import Flow.
-
Click Add Rule to define the conditions for branching.
-
Click Attach flow to select and attach the Flow you want to branch to.
-
Select the step number you want the Flow to jump to, and then click Attach.
-
Use the Add Another Branch button to add multiple branching conditions as required.
-
Click Save Branch.
-
Once done, click the Visualize icon.
View the following details in the visualization chart:
- The main Flow and its steps
- The branched Flows and their steps
- Branching conditions for the branched Flows
- A map view of the visualized flow chart
A map view gives you an idea of the viewport area. It is a rough sketch of the Visualization flow chart.
- Click Save Flow.
Branching Rules are now available as New Visibility Rules in Studio.
With New Visibility Rules for Branching on Studio, you can define exactly where, when, and for whom a Branch Flow appears. These rules apply only to the specific step they're configured on, making it easier to create more personalized and dynamic experiences. For more information, see New Visibility Rules for Branching in Flows.