Wized Docs

Appearance

Conditional logic ​

Conditional logic allows you to take control of your Wized app and make it behave differently depending on the circumstances. It's like a set of rules that tells your website, "If this happens, do this."

Why use conditional logic? ​

Conditional logic allows you to create more personalized and dynamic user experiences. Some of the things you can achieve with it are:

  • Show or hide elements: Do you want a button to appear only for logged in users? Or an error message to be displayed only if a form field is empty? With conditional logic, you can control the visibility of elements based on different conditions.
  • Personalize messages and styles: Want to greet your users by name or show them relevant content based on their interests? Conditional logic lets you dynamically adapt the text and appearance of your website.
  • Create dynamic workflows: Do you want your app to respond differently based on user actions? For example, you can redirect users to different pages after filling out a form, or display a success or error message based on the result of an API request.
  • Validate input data: Ensure that users enter correct information into forms, such as valid email addresses or strong passwords.
  • Handling API errors: If a request to an external API fails, you can display a user-friendly error message or perform some alternative action.

How does conditional logic work in Wized? ​

Conditional logic applies to element settings and event-related actions . In both cases, you use the Function Editor to write JavaScript code that defines the conditions and actions to be performed.

Example of a workflow with conditional logic:

  1. The user interacts with your site: For example, clicks a button or submits a form.
  2. An event is triggered: Wized detects the user interaction and triggers the corresponding event (for example, On Click or On Submit ).
  3. Condition is evaluated: If you have configured a condition in the Function Editor for that event or configuration, Wized evaluates it at that time.
  4. Action is executed or configuration is applied: If the condition is met ( true ), Wized executes the action associated with the event or applies the configuration to the element. If the condition is not met ( false ), the action or configuration is not executed.

Example ​

Imagine you have a registration form and you want to display an error message if the user enters a password that is too short.

  1. Settings: In the "Set Visibility" setting of a text element that will display the error message, type the following condition in the Function Editor:
JavaScript
return i.password.value.length < 8;

This condition checks if the length of the password entered in the password field is less than 8 characters. If so, it returns true and the error message will be displayed. If the password is 8 or more characters long, it returns false and the error message will remain hidden.

  1. Event: Associate the On Input event with the password input field. This will cause Wized to re-evaluate the condition every time the user types or deletes a character in the field, updating the error message visibility in real-time.