What is the Onboarding Flow Screen and how do I use it?
The Onboarding Flow Screen is your workspace for crafting the onboarding sequence. It allows you to add, customize, and organize screens, establish connections, and define navigation.
How to create an onboarding screens sequence?
Just drag and drop any random screen from the chosen template located on the right menu or click the "Add first page" button to start editing the very first screen of the template
What exactly is the 'first screen' in the onboarding sequence?
The 'first screen' in your onboarding sequence is essentially the starting point of your onboarding process. It's the initial screen that users encounter when they begin the onboarding journey in your application. This screen is typically indicated by an arrow and labeled as 'first screen' in the onboarding flow interface.
Can several screens be first at once in the onboarding flow?
No, the default design of the visual constructor is built with only one screen set as the first one in the onboarding flow.
Is it possible to change the 'first screen' once it's set?
Yes, you can change the 'first screen' in your onboarding sequence. If you decide to alter the flow or structure of your onboarding, you can designate a different screen as the new 'first screen.'
What happens if I don’t set a 'first screen'?
If your onboarding sequence lacks a designated 'first screen', you will likely encounter issues or error messages when attempting to publish the onboarding or create a web link. The proper functionality and structure of your onboarding process must have a clear 'first screen' set.
I attempted to set the needed screen as the first one with the button "... ," what are my further steps to follow?
The pop-up is designed the way if you select "Cancel," it will be closed, meaning that you do not proceed with your choice and the screen will not be set as the first one in the constructor. If you opt for "OK," the screen will be set as the first one, and the button "..." will disappear from the settings for this particular screen as it has already become the screen to start with.
I dragged and dropped any random screen from the template to the onboarding flow, will it be automatically the first screen in the constructor?
Yes, indeed, if there are no more screens in the flow at the moment. However, you may always set any other screen as the first and main one in your onboarding by clicking the "..." sign above the needed screen.
How do I add more screens to my onboarding sequence?
Continue building your sequence by dragging and dropping additional screens into the flow.
What functionalities do screens in the flow have?
Each screen includes inputs, outputs, and a top panel. Inputs are for establishing connections, while outputs link to successive screens and vary depending on screen elements. The top panel offers options to clone, delete, edit, or set a screen as the first.
What happens if I delete a screen?
Deleting a screen removes it permanently. If you delete the first screen, ensure to designate another screen as the first to prevent disruption.
What is the '...' option functionality in the onboarding screen?
The '...' feature gives you options to apply content, set the first screen, and enable/disable the theme application for individual screens. It offers control over how these changes are applied to screens.
Can I prevent certain screens from receiving theme updates?
Yes, by choosing "Disable apply theme" for a specific screen, it will be exempt from new design changes applied to the overall onboarding theme.
How to create edges/connections between screens in the onboarding flow?
Each screen has several active buttons placed outside the screen itself e.g. such as "Input," "Button 1/2," "Skip," and/or "list_item_#" etc. To create an edge, you should pull the arrow from the needed button to another screen's button, which means that once the customer clicks such a button, their action will switch to the connected screen in the app.
Or, you may drag a screen from the template panel and drop it on top of the screen you need to create an edge with, thus, a pop-up "Select action to connect" will appear with the active buttons to be connected. However, please note that if you drop a screen on a screen in the onboarding flow itself, an edge will not be established, please follow the instructions specified above then.
Can there be several edges established from one active button of the screen?
Yes, but with different screens only since you cannot duplicate the already established edge; however, you will have to set the edge conditions by clicking the "i" sign on the arrow itself to specify its terms when this or that screen should be displayed depending on the customer's previously entered information and/or your app logic.
How can I delete the edge created by mistake with another screen?
Please click the "i" on the created edge where you will see the menu with edge conditions and the opportunity either to save the established connected, or delete it per your request. If no changes are required in this edge, you just close the "Transitions Conditions" menu by clicking the "Cancel" button.
What transition kinds are possible to set between screens in the onboarding flow?
On the "Transitions Conditions" menu in the "i" sign there are 2 possible transition kinds embedded: default and modal. The Modal sheet implies a new page sliding over the previously opened one, however, not closing it entirely so that its edge can be viewed; while the Default sheet means standard screen opening in full. However, more details about iPhone functionality can be found on the official website
How do I start adding conditions for user segmentation?
To add conditions:
Identify the screen in your onboarding flow from which you want to segment users based on inputs.
Click "+ADD" to begin adding conditions.
Choose the screen from the dropdown list provided.
Is it possible to delay segmentation to a later screen?
Yes, you can delay segmentation by storing initial selections and using them for segmentation on subsequent screens. This approach allows for more interaction before funneling users into specialized paths.
What are transition conditions and how do they help in user segmentation?
Transition conditions determine the next screen based on the user's choice or input. They allow you to segment users, enhancing the personalization of the onboarding experience.
What screens can I add as conditions for connections?
You can add Table multiple/single selection, Text field, 2-column multiple/single selection, Image title subtitle Picker, Title subtitle Picker, Image Title Subtitle Selection, and Custom screens. Note: Condition settings apply when certain field types like "int" or "double" are chosen.
How do I know if a connection has added transition condition?
The point on the connection becomes colored, indicating the presence of conditions.
Can I delete a transition condition?
Yes, click on the "Trash" button in the list with the conditions to delete it.
What is the importance of managing connections in onboarding?
Managing connections and transition conditions are crucial for creating an effective and intuitive onboarding path. They help in guiding users through a personalized journey based on their choices and inputs.
What's the significance of multiple connections in onboarding?
Multiple connections allow users to be directed from several screens to a single screen or vice versa, enabling diverse user interaction scenarios.
How can I segment users based on their choices from a multi-selection table?
Using operators like "==", "!=", "in", and "contains" in table multiple selections, you can segment users based on their exact choices, directing them along varied navigation paths.
How can I segment users based on their choices from a single-selection table?
Using operators like "==", "!=", and "in" in single multiple selections, you can segment users based on their exact choices, directing them along varied navigation paths.
How can I segment users based on their choices from a picker or text field with type int or double?
Using operators like <, >, <=, >=, != in text fields and pickers, you can segment users based on their inputs, directing them along varied navigation paths.
What happens if a user's choice doesn’t match any conditions?
Direct users along a default pathway without specific conditions if their choices don’t align with your predetermined paths.
How does the system handle user selections that don't meet established pathways?
If a user's selection doesn't meet any conditional pathways, they are redirected to the pathway defined by the first programmed condition, ensuring a clear, predefined path for every user.
How does adding multiple conditions to a single transition work?
You can add multiple conditions to govern a single transition. These conditions act together like an AND logical operator, directing the user only when all conditions are met.
Why cannot I create an edge from the active button "Button 1" to the button "Skip?"
It happens so to retain the logic of the visual constructor since the customer cannot click the "Continue" button and skip the screen simultaneously as the "Skip" button means moving forward to the next screen, the same functionality as the button "Continue" possesses.
Can I connect the button "Action" to "Skip" or "Button 1?"
No; otherwise, the logic of your visual constructor will be affected. You may connect it to the "Input" button only.
How many edges can be established from one action button on the screen in the onboarding flow?
The number of established edges from one button of the screen is unlimited, however, we do recommend remembering to set the logic between the screens by switching with the "Edge Conditions" menu if several edges are required from one button.
What if I clone the screen with connections?
Tthe clone will not have connections but the parent screen will retain them. Plus, the cole will have all other settings inside the screen: image, titles, backgrounds, header and footer settings, etc