Key Concepts
Reference
🚦
Conditions
On the Options Tab of any Page or Component, you'll find the conditions area, with a button for adding Show/Hide conditions. Here we'll explain a little bit about what they are and how to use them.
What are conditions for?
Conditions help hide and show content depending on the user's selections. With a condition, you can show certain pages and hide others if a user selects a specific option.
Where they can be placed
- Conditions on pages
- Conditions on components
- Conditions on buttons
Types of conditions
- Is / Includes: It means the component will be displayed if another component is or includes any of the selected value/s.
- Is Not / Does Not Include: It means the component will be displayed if another component isn't or doesn't include any of the selected value/s.
- Exists: It means the component will be displayed if another component exists or has a value.
- Does Not Exist: It means the component will be displayed if another component doesn't exist or doesn't have a value.
Example use-cases
- Showing a "We don't work in your area" or "You must be older than 18" page if the user's input doesn't match your requirements, hide it if it does.
- Create a couple of groups of bullet points describing the different service plans you're offering. Show one or the other depending on the plan you recommend for the user.
- You can have a Stripe component for subscriptions, another for one-time payments, and another one for collecting card details. You can hide the ones you don't need for a particular customer.
How to add a condition
Step 1:
- Click on "+ Add Condition" on the Options tab after selecting the page, component, or button you want the condition for.
.png?alt=media&token=ded32140-b40b-4868-91a4-7cedab1acb6a)
Step 2:
- Select a property for your condition. For example: if you want plain text to appear if the user selects a specific option of an Options Selector, you would select the key of the Options Selector in which that option is.
Step 3:
- Select the type of condition.
- You can only select Is/Includes or Is Not/Does Not Include if you are making a condition on an Options Selector.
- If the selection is Exists/Does Not Exist, skip the next step.
Step 4:
- Select a value for the condition. This is the key value of the property selected.
- You can select more than one value and it will work as an OR condition of the values. For example: If your property is a Color and you select Is/Includes Blue, Gray, and Yellow as values, if any of those values have been selected, the condition will be true and the component will be displayed.
If more than one condition is added to a page, component, or button, both conditions need to be true for the component to be displayed.
Tip: An alternative way to Hide components, pages or buttons is toggling on "Hide Page"/"Hide Component"/"Hide Button".
Useful Links
Last modified 2mo ago