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

1. 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.
2. Add a Condition

   • Click the + Add condition button.
   • 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 (==)

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_value is 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_value is 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 (!=)

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_value is 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_value is 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

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)

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)

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)

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)

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)

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)

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)

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.