To get started with a Flow that includes a Free-floating step, follow the steps as mentioned below:
Creating Free-floating steps in Flows
Configuring Free-floating steps in Flows
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.
You also have the option to add screenshots in a Free-floating step and re-capture the screenshots when the UI changes. Re-capturing screenshots helps in maintaining contextualization for the Flow steps and also avoids re-creation of the steps from scratch.
Follow the steps mentioned below to create a Free-floating Flow step:
- Log in to your application, and then launch the Whatfix Studio.
Under CONTENT, click Flow.
Name the Flow and then click Add Step.
On the dialog box that appears, under Choose step type select Free-floating.
The Free-floating Flow step appears on the application without latching on to any element.
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.
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.
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.
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.
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.
Configure Free-floating steps in Flows
Display Rules enable you to configure Flows to display the tooltip only when you meet the pre-determined conditions.
Use the following steps to add Display Rules to Free-floating Flow steps:
On the Whatfix Studio, click Visibility Rules.
On the Visibility Rules page, set the following conditions:
Where does the step appear?
When does the step start appearing?
Who does the step appear to?
Once you have added all the required Visibility Rules, click Save Step.
Click Save Flow.
For more information on the new visibility rules for Flows on Studio, see New Visibility Rules for Flow steps on Studio.
Publish Flows with Free-floating steps
Use the following steps to push the Flow to Production:
On the Whatfix Guidance dashboard, click Content.
Click Flows.
In the Draft stage, select the Flow, and then click Send to Ready.
Go to the Ready stage and select the Flow to move it to production stage, and then click Publish.
Note:
Re-capture Flow steps on Studio:
You can also re-capture the screen on Studio when switching steps on a page or when the UI screen changes on the same page. This way it helps you to avoid re-creating the step, while also ensuring the contextualization of steps on the page is maintained. Use the Update button to re-capture the screen. Once the process is successful, a toaster message appears saying Step updated.
Here’s a video on how to create and use Free-floating Flow step type: