Using Conditions in Embeddables
Hiding/showing content based on the user’s answers and other logic
Conditions are one of Embeddable’s powerful logic features, and have a variety of use-cases.
A Condition decides whether a page or component is shown or hidden, based on the value of a property in User Data.
To set up a Condition, you define which values are acceptable for a User Data property. If the property has those values, then the page or component is shown - if not, then it is hidden.
Showing/Hiding a component or page with Conditions
Go to the Page/Component Options
- Select the page or component, in the Layers sidebar or (in the case of a component) in the central preview pane.
- Make sure you’re on the Content tab at the top-left.
- Click on Options in the tabs at the top of the right-hand sidebar.
Add a Condition
- Click the
+ Add conditionbutton. - Choose the key in User Data that you want to impact whether this page/component is shown or hidden.
- Choose the type of operator for the Condition - usually this is
Is or includes. - Choose the value that should make this page/component be shown.
The way to think about key, operators and values in a Condition is like an equation.
For example, you might want to display a some warning text to users under 18, so the condition is effectively age_range = 'under_18'.
Here, age_range is the key, Is or includes is the operator, and under_18 is the value.
Available Condition Operators
Below is a detailed explanation of each operator type you can use in Conditions, and exactly how they work:
Is or includes (==)
Is or includes (==)
This operator checks if the user data value matches any of the specified values.
For single values:
- Returns true if the user data exactly matches any of the specified values
- Returns true if
_no_valueis specified and the user data is undefined/null - Returns false otherwise
For arrays:
- Returns true if any of the specified values are included in the user data array
- Returns true if
_no_valueis specified and any value in the user data array is undefined/null - Returns false otherwise
Special values like _true and _false will be automatically converted to their boolean equivalents.
Is not or excludes (!=)
Is not or excludes (!=)
This operator checks if the user data value does NOT match any of the specified values.
For single values:
- Returns true if the user data does not match any of the specified values
- Returns true if
_no_valueis specified and the user data exists - Returns false otherwise
For arrays:
- Returns true if none of the specified values are included in the user data array
- Returns true if
_no_valueis specified and all values in the user data array exist - Returns false otherwise
Special values like _true and _false will be automatically converted to their boolean equivalents.
Exists
Exists
Checks if the user data value exists (is not undefined or null).
For single values:
- Returns true if the value is defined and not null
- Returns false otherwise
For arrays:
- Returns true if the array contains any defined, non-null values
- Returns false if the array is empty or contains only undefined/null values
Does not exist (!exists)
Does not exist (!exists)
Checks if the user data value does not exist (is undefined or null).
For single values:
- Returns true if the value is undefined or null
- Returns false otherwise
For arrays:
- Returns true if the array is empty or contains only undefined/null values
- Returns false if the array contains any defined, non-null values
Is true (is-true)
Is true (is-true)
Checks if the user data value is exactly the value _true.
- Returns true only if the value is strictly equal to
_true - Returns false for any other value
Is false (is-false)
Is false (is-false)
Checks if the user data value is exactly the value _false.
- Returns true only if the value is strictly equal to
_false - Returns false for any other value
Is not true (is-not-true)
Is not true (is-not-true)
Checks if the user data value is not the value _true.
- Returns true for any value that is not strictly equal to
_true - Returns false only if the value is strictly equal to
_true
Is not false (is-not-false)
Is not false (is-not-false)
Checks if the user data value is not the value _false.
- Returns true for any value that is not strictly equal to
_false - Returns false only if the value is strictly equal to
_false
Is empty (is-empty)
Is empty (is-empty)
Checks if the user data value is empty. A value is considered empty if it is:
- undefined
- null
- An empty array (length = 0)
- An empty string (or string containing only whitespace)
Is not empty (is-not-empty)
Is not empty (is-not-empty)
Checks if the user data value is not empty. A value is considered not empty if it is:
- defined and not null
- A non-empty array (length > 0)
- A non-empty string (containing at least one non-whitespace character)
When working with arrays in conditions, remember that the behavior can be different from single values. For example, the “Is or includes” operator will match if ANY of the specified values are found in the array, while “Is not or excludes” will only match if NONE of the specified values are found.
Special values like _true, _false, and _no_value are automatically converted to their appropriate types when used in conditions. For example, _true becomes the boolean value true when evaluated.