Create a Flow with Free-floating steps

To get started with a Flow that includes a Free-floating step, you need to understand three key actions:

1. Creating Free-floating steps in Flows

2. Configuring Free-floating steps in Flows

3. Publishing Flows with Free-floating steps

Note:

Flows with Free-floating step type feature is Beta currently. Contact support@whatfix.com to enable the feature.

Here’s how to create a Free-floating step type in Flows:

2. Under CONTENT, click Flow.  

3. Name the Flow and then click Add Step.  

4. On the dialog box that appears, under Choose step type select Free-floating.  

   The Free-floating Flow step appears on the application without any element latching.  

   Info:

   • Attached to element flow step works the same way as a normal Flow step. For more information to understand how a normal Flow works, see Create a Flow.

   • You can choose to follow a particular step type throughout the Flow creation process, by selecting Set as Default. For instance, if you set Free-floating as a default step at the start, all the subsequent steps follow the same step type.  

   • However, use the minimized Studio editor to switch over to either step at any point during Flow creation.

     

   Note:

   • You can also set the default step type for Flows under the Style section on Dashboard. The selection that you make at the Dashboard level applies to the Studio level.

     

5. Customize the flow step type based on your requirements.

   a. Select the tip Color from the existing color picker or enter the hex code of the desired color.

   b. Select the Close (X) color from the existing color picker or enter the hex code of the desired color.

   c. Expand the Position and select the desired position of the tooltip out of the 9 options as shown below.

   

6. Select the required Step Completion Rules for the selected step type. The Step Completion Rules for Free-floating step type are of only two types:

   What does the step type mean?
   On click of “next” button	The next step is displayed when users click the "next" button in the tooltip. It is used when users have to select multiple options using a checkbox or in text fields, and then move to the next step after giving inputs.
   On page refresh (in case of change in URL)	The next step is displayed when users refresh the page. It is used in payment pages after successful payment where the page automatically refreshes.

   For more information on the Step Completion Rules for Attached to element Flows, see Define step completion rules.

7. Click Save Step.

   

   Info:

   • Click Preview to preview the Flow during the Flow creation process 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.

   • Your end users can choose to drag the Free-floating Flow step. The flexibility helps them avoid the step from hiding an UI element. Also, the action applies only to your end users, and not you.

     

8. Add additional steps based on your requirements.

   Info:

   • You can copy the Flow steps either at Studio or Dashboard level. For more information on copying steps on Studio, see Copy Flow Steps.

   • Here’s how you can copy the Flow steps - Attached to element or Free-floating types - on the Dashboard.