Creating new apps

To set up a new app in the Wized configurator, follow these steps:

1. Access the apps panel: Click on the apps icon on the left sidebar.

2. Click on + icon at the top right of the apps panel. Then, the right app settings panel will open

3. Setting up the app:

   • Name: Provide a clear and descriptive name for your app to ensure easy identification.
   • App: In this dropdown, you can see the native integrations that Wized has, or the REST option which you should choose if you want to integrate any other Web service.

What to do based on your app type?

Supabase

Supabase is a native integration, so you only need to add the URL and key it's that simple! If you're unsure how to get these values, this video will guide you through the process

Firebase

Firebase is a native integration, so you only need to add the Project ID, app ID, API Key it's that simple! If you're unsure how to get these values, this video will guide you through the process

Memberstack

Memberstack is a native integration, so you only need to add the Public Key it's that simple!

Airtable

Airtable is a native integration, so you only need to click on Connect Airtable it's that simple!

WordPress

WordPress is a native integration. You need to add the Site URL of your WordPress installation.

To authenticate Wized with your WordPress site, provide your WordPress Admin Username or Email and Admin Password as secrets. These credentials are securely stored and only used server-side when calling WordPress API endpoints.

::: tip Recommendation We recommend creating a separate WordPress admin account dedicated to Wized, rather than using your personal admin credentials. :::

For more details on WordPress request methods, see the WordPress requests documentation.

REST integration

Specify the base URL of the API you are integrating.

Setup Default Headers (Optional)

• Default headers allow you to configure headers at the REST app level that will be automatically included in all requests using that app. This feature simplifies the management of common headers like authentication tokens, content types, and API keys across multiple requests.

• Default App headers are used to avoid repeating same headers for every request, and they can be overridden by app request.

::: info Note

• For this example, we are using this public API
• Be sure to put only the base URL, you should not add the endpoint. :::

Intro to the apps

In Wized, the term Apps refers to the various APIs integrations that you will utilize throughout your project. Each App corresponds to a specific integration, and it is essential to create one App for each integration, as each request made represents a different endpoint.

Wized comes equipped with a range of native integrations, such as Memberstack, Supabase, Firebase, Airtable, and WordPress, which streamline the connection process by requiring only necessary credentials and configuration settings.

App types in Wized

• Native integrations: These are pre-configured connections to popular services that simplify the integration process. You only need to provide essential information to establish a connection with these services.
• Custom REST integrations: If your project involves connecting to an external web service that provides a REST API, you can define the base URL and other request details as needed.

Basic concepts

APIs

What are APIs?

APIs (Application Programming Interfaces) are like messengers that allow different applications to communicate and exchange information with each other. Think of them as a set of rules that facilitate communication between different systems, like a common language that computers understand.

In the context of Wized, APIs allow you to connect your Webflow project to external services, such as databases, payment gateways, email delivery platforms, and more. This gives you the ability to access functionality and data that is not directly available in Wized, extending the capabilities of your web application.

Why are APIs important?

APIs are fundamental to developing modern web applications, as they allow you to:

• Save time and resources: Instead of developing all the functionalities from scratch, you can take advantage of the work of other developers and companies that offer ready-to-use APIs.
• Enrich your app: APIs allow you to add advanced and custom features to your app, such as online payments, email notifications, interactive maps, social media integration, and more.
• Access real-time data: You can obtain up-to-date information from external services, such as product prices, news, sports scores, or any other type of data relevant to your application.
• Create automated workflows: You can set up actions that trigger automatically in response to specific events, such as sending a welcome email when a new user registers or updating data in an external database.

How do APIs work in Wized?

Wized allows you to interact with external APIs through API requests. These requests are like messages you send to the API, specifying what information you need or what action you want to perform. The API processes your request and responds to you with the requested data or with a confirmation or error message.

To set up an API request in Wized, you need to set up the following:

• Endpoint: The specific web address of the service you want to access (for example, https://api.example.com/users ).
• HTTP Method: The type of action you want to perform (GET to get information, POST to send data, etc.).
• Headers (optional): Additional information about your request, such as the type of data you expect to receive or authentication credentials.
• Body (optional): The data you want to send to the API, usually in JSON format.

How to read API documentation and use it in Wized?

Each API has its own documentation explaining how to interact with it. When reading the documentation, pay attention to:

• Available Endpoints: Identify the different routes or endpoints that the API offers and what type of information you can obtain or send through each one.
• Allowed HTTP Methods: Check which HTTP methods (GET, POST, etc.) you can use for each endpoint.
• Parameters and Body: Determines which query parameters or data in the body you should include in your requests to obtain the desired results.
• Required Headers: Some APIs require specific headers for authentication or to indicate the format of the data.
• Response Structure: Understand how the API returns information, usually in JSON format, so you can process it correctly in Wized.

DOM (Document Object Model)

The DOM is a tree-like representation of the structure of a web page. In Wized, you can use JavaScript to interact with the DOM, allowing you to modify page elements, add or remove content, and respond to user events dynamically.

JSON (JavaScript Object Notation)

JSON is a lightweight format for exchanging data between different systems. At Wized, JSON is widely used to represent structured data, such as the results of API requests or information stored in the database.

Reactivity

Responsiveness is one of the core pillars of Wized, allowing you to create web applications that feel alive and respond immediately to changes in data and user interactions.

What is reactivity?

In simple terms, reactivity means that your app updates automatically without the need to reload the entire page. Imagine you are viewing a list of products in an online store, and you apply a filter to show only the items on sale. In a reactive app, the list would instantly update to show only the filtered products, without you having to wait for the page to reload.

Why is reactivity important in Wized?

Responsiveness is essential to creating a fluid and modern user experience. By eliminating page reloads and updating only the necessary parts of the interface, Wized allows you to:

• Improve your app’s speed and performance: Real-time updates make your website feel faster and more responsive, improving the overall user experience.
• Create more dynamic and engaging interactions: Elements on your page can instantly change and adapt to user actions, such as clicking a button, selecting an option from a menu, or submitting a form.
• Display up-to-date information in real time: You can integrate data from external APIs or your own backend to display up-to-date information in real time, such as product prices, notifications, or search results.

How does reactivity work in Wized?

Wized constantly monitors the state of your application, including the value of variables, cookies, API responses, and other relevant data. Whenever a change occurs in any of this data, Wized automatically re-evaluates all conditions associated with your element configurations. If a condition changes, Wized instantly updates the appearance or behavior of the corresponding element, without the need to reload the page.

JSON (JavaScript Object Notetion)

JSON is a lightweight format for exchanging data between different systems. It plays a crucial role in interoperability, allowing Wized to communicate seamlessly with various APIs and services. At Wized, JSON is widely used to represent structured data, such as the results of API requests or information stored in the database.

DOM (Document Object Model)

The DOM is a tree-like representation of the structure of a web page. In Wized, you can use JavaScript to interact with the DOM, which is essential for creating engaging and dynamic user interfaces. This allows you to modify page elements, add or remove content, and respond to user events in real-time.

Return

In Wized, the return keyword is required for every action that needs to return a value. This value can be the result of a validation, the response from an API, or any other data necessary for the action to work correctly. Proper use of return is key to the flow logic of applications in Wized. For example, if you want to change the color of an element, you must use return followed by the color you want (in hexadecimal or text).

Null

In JavaScript, null represents the intentional absence of any value. In Wized, you can use null to indicate that a variable or property has no value assigned.

Undefined

In JavaScript, undefined indicates that a variable has been declared but no value has been assigned to it. In Wized, you might encounter undefined when accessing properties of objects that don't exist or when using variables that haven't been initialized. Handling undefined appropriately also helps to prevent errors during program execution.

True and False

true and false are the two boolean values in JavaScript, representing truth and falsity, respectively. In Wized, you can use these values in conditionals and other logical expressions to control the execution flow of your application.

::: tip Example Example of using boolean values in a conditional statement:

let userLoggedIn = true;

if (userLoggedIn) {
  console.log('Welcome back!');
} else {
  console.log('Please log in.');
}

:::

If...else

The if...else structure is a method to implement conditional statements in JavaScript. In Wized, you can use if...else to perform different actions depending on whether a condition is met or not.

Logical Operators (&&, ||, !)

Logical operators are used to combine or negate boolean expressions. In Wized, you can use && (AND), || (OR), and ! (NOT) to create more complex conditions and control the flow of your logic precisely.

::: tip Example Example of using logical operators:

let isAdmin = false;
let isUser = true;

if (isAdmin || isUser) {
  console.log('Access granted');
} else {
  console.log('Access denied');
}

:::

Ternary Operator (? : )

The ternary operator is a shorthand way of writing an if...else statement on a single line. In Wized, you can use the ternary operator to assign a value to a variable based on a condition.

::: tip Example Example of using the ternary operator:

let age = 18;
let canVote = age >= 18 ? 'You can vote' : 'You cannot vote';

console.log(canVote);

:::

Wized attributes

In your Webflow-powered website, you need to add custom HTML attributes with the wized key and the value you want (e.g., wized="my_button"). Esto permite a Wized reconocer y utilizar dicho elemento dentro del configurador.

Note: All elements on your website are visible in the Wized configurator, but only those with the wized attribute can be used to create features.

Wized-cloak

The wized-cloak attribute is used to hide UI elements until Wized has finished loading and rendering the page. This prevents users from seeing raw content or flashing elements while the application is initializing.

Note: The cloak elements should not be a child of a wized element or be wized elements themselves. ::: tip Example This will not work because the wized-cloak attribute is added to a wized element

<div wized="wized_element_name" wized-cloak></div> 

This will not work because the wized-cloak attribute is a child to a wized element

<div wized="wized_element_name">
  <div wized-cloak></div>
</div> 

:::

Wized-loader

The wized-loader attribute is used to display a loading indicator while Wized is processing an action or retrieving data from an API. This provides visual feedback to the user and improves the overall application experience.

Return

In Wized, the return keyword is required for every action that needs to return a value. This value can be the result of a validation, the response from an API, or any other data you need for the action to work correctly. For example, if you want to change the color of an element, you must use return followed by the color you want (in hexadecimal or text).

Creating a New Branch

Creating a new branch is essential when working on a new feature or fixing a bug.

It helps keep your work organized and ensures the main branch remains stable.

Follow the steps below to create a new branch.

Steps to Create a Branch

1. Open the branch dropdown menu
   

2. Select "Create new"
   Click on the "Create new" option from the dropdown menu.
   

3. Name your branch
   Provide a clear and descriptive name for your branch. Use names that reflect the purpose of the branch, such as staging, feature/posts-rendering, or bugfix/login-issue.

4. Click "Create"
   Confirm your action by clicking the "Create" button.

Once created, your new branch will appear in the branch list and will automatically be set as the active branch.

Best Practices for Naming Branches

• Use lowercase letters and hyphens (-) to separate words (e.g., feature/add-user-authentication).
• Include a prefix to indicate the type of work, such as feature/, bugfix/, or hotfix/.
• Keep names concise but descriptive.

Important:
Branches can only be created from the default main branch.

By following these steps and best practices, you can effectively manage your workflow and collaborate with your team.

Delete Branch

Removing branches that are no longer needed helps keep your workspace organized and reduces clutter.

How to Delete a Branch

Follow these steps to delete a branch:

1. Locate the branch: Find the branch you want to delete in the branch list.
2. Select the branch: Click on the branch name to ensure it is selected.
3. Open the options menu: Click the dropdown button next to the selected branch name.
   
4. Select Delete: Choose the Delete option from the dropdown menu.
5. Confirm the deletion: A confirmation popup will appear. Review the details and click Confirm to permanently delete the branch.

Warning: Deleting a branch is irreversible. Ensure the branch is no longer needed and all important changes have been merged or saved elsewhere before proceeding.

Branching

Branching allows you to create, manage, and work with multiple versions of your project configuration.

Use branches to experiment, develop features, or collaborate safely without affecting the main configuration.

Use Cases

• Feature Development: Work on new features in a separate branch without affecting the main or production configuration. This allows for safe experimentation and testing.

• Bug Fixes and Hotfixes: Quickly patch issues by creating a branch from the current state, applying the fix, and merging it back when ready.

• Experimentation: Try out new ideas, settings, or integrations in an isolated branch. If the experiment is successful, merge it; if not, simply delete the branch.

• Collaboration: Multiple team members can work on different branches simultaneously, reducing conflicts and making it easier to review and integrate changes.

• Release Management: Prepare and test release candidates in dedicated branches before merging them into the main branch for deployment.

Tips for Managing Branches

• Keep branches organized: Use clear and descriptive names for your branches to make it easier to identify their purpose.
• Regularly merge changes: To avoid conflicts, merge changes from the main branch into your working branch frequently.
• Delete unused branches: Once a branch is no longer needed, delete it to keep your repository clean and manageable.
• Test thoroughly: Before merging a branch, ensure all changes are tested to avoid introducing bugs or breaking functionality.

Learn to:

• Create a New Branch
• Rename a Branch
• Switch Branches
• Preview Branch Changes
• Merge Branch Changes
• Update Branch from Main
• Delete Branch
• Revert Merged Changes

Merge Branches

Merging changes from one branch into the main branch allows you to publish updates and integrate new features or fixes into your primary codebase.

This process ensures that the latest developments are consolidated and made available for deployment or further collaboration.

Steps to Merge Branches

1. Select the branch: Ensure the branch you want to merge is selected. If it is not active, switch to it.
2. Open branch options: Click the dropdown button next to the branch name.
3. Click the "Merge" button.
   
4. Review changes: Compare and review the changes to ensure everything is correct.
   
5. Confirm the merge: Click the Merge or Merge and delete branch option to finalize merging

Once the merge is complete, the changes from the selected branch will be integrated into the main branch. The page will automatically reload to reflect the updates.

Preview Site Changes from a Branch

Previewing changes from a specific branch allows you to test updates in the site before merging.

Follow the steps below to preview your branch changes on the website:

Steps to Preview Branch Changes

1. Select the branch: Ensure the branch you want to preview is selected. If it is not active, switch to it first.
2. Click the "Publish" button: Locate the "Publish" button in the top-right bar of the interface. Click it to open a popup menu.
3. Select "Preview" option: In the popup menu, choose the "Preview" option. This will generate a temporary preview link for the branch.
4. View the preview: Use the provided link to view the website with the changes from the selected branch.

By previewing branch changes, you can ensure everything looks and functions as expected before publishing.

Rename a Branch

Follow the steps below to update the name of a branch.

Renaming a branch can help keep your repository organized and make branch names more descriptive.

Steps to Rename a Branch

1. Select the branch: Ensure the branch you want to rename is selected. If it is not active, switch to it first.
2. Open branch options: Click the dropdown button next to the branch name to access its options.
3. Choose "Rename branch": From the dropdown menu, select the "Rename branch" option.
4. Update the branch name: Enter the new name for the branch.
5. Save changes: Confirm and save the updated branch name.

Note: The name of the main branch cannot be changed.

Reverting Changes

If you are unsatisfied with the changes after merging, you can revert the changes.

After each merge to the main branch, a backup is automatically created for you. This backup contains the main configuration prior to the merge.

To restore this backup, follow these instructions:

Steps to Restore a Merge Backup

1. Switch to the Main Branch
   Ensure you are on the main branch to access the backups.

2. Open the Settings Panel
   Navigate to the settings panel in your application.

3. Access the Backups Section
   Locate the backups section within the settings panel.

4. Restore or Preview the Auto-Created Backup
   Choose to either restore or preview the automatically created backup.
   

Switching Branches

Easily switch between branches to manage different versions of your configuration.

Steps to Switch Branches

1. Open the Branches Selector popup.
2. Select the branch you want to switch to.
3. The page will reload, allowing you to work on the selected branch.

Updating Your Branch from Main

Keep your branch up-to-date by incorporating the latest changes from the main branch.

Steps to Update Your Branch

1. Switch to Your Branch
   Ensure the branch you are working on is active. If not, select it.

2. Access Branch Options
   Open the branch dropdown menu.
   

3. Click update
   Click the "Update" button to start the process.

4. Review Changes
   Compare and review the changes before proceeding.
   

5. Confirm the Update
   Finalize the update to merge changes from the main branch into your current branch.

Once completed, your branch will include all updates from the main branch, ensuring you're working with the latest code.

Dashboard

The Dashboard is the central hub where you can manage all your projects in Wized. Here, you’ll find an organized grid displaying every project you’ve created, making it easy to access and manage them. Each project card provides key information, including its URL and the current plan type, ensuring you have a clear overview of your projects at a glance.

Managing your projects

• Project grid:
  Each project is displayed in a structured grid, allowing for quick navigation. Clicking on a project will take you directly to its workspace.

• Settings access:
  Each project card includes a gear icon (⚙️), which opens the workspace settings. From here, you can:

  • Change the workspace name.
  • Add collaborators to work on the project.
  • Delete the workspace, if necessary.

Collaborators

Wized allows you to invite collaborators to your projects, enabling teamwork and efficient development. However, collaborators have limited permissions compared to the project owner.

What can collaborators do?

✔ Access the project and contribute to its development.
✔ Modify logic, interactions, and API connections.
✔ Work alongside other team members in the same environment.

What can’t collaborators do?

❌ Delete the project.
❌ Move the project to another workspace.
❌ Change the ownership of the project.

Ownership and transfer

• The original creator of a project is always its owner.
• Owners can transfer a project to another workspace if needed.
• There is no limit to the number of collaborators you can add to a project.

With these features, the Dashboard gives you full control over your projects and team, making it easy to manage, collaborate, and organize your work efficiently.

Transferring projects

Transferring a project is a crucial step, especially for freelancers delivering work to clients or teams moving projects between workspaces. In Wized, only the project owner has the ability to transfer a project to another workspace.

How to transfer a project

To ensure a smooth transfer, follow these simple steps:

1. Invite the recipient to the current workspace

Before transferring the project, make sure the person receiving it has access to the destination workspace. To do this:

• Go to your current workspace settings (⚙️).
• Add the recipient as a collaborator.
• Once invited, they will be able to see and access the project.

2. Move the project

Once both the current owner and the recipient are collaborators in the same workspace:

• Locate the project in your dashboard.
• Click the gear icon (⚙️) on the project card.
• Select "move to workspace".
• A list of available workspaces (both your own and those where you're a collaborator) will appear.
• Choose the destination workspace and confirm the transfer.

And that’s it! The project is now in the new workspace.

Important considerations

Active subscriptions must be canceled

Before transferring a project, ensure that there is no active subscription associated with it. Subscriptions are linked to the payment methods of the current owner, so they must be canceled before the project can be moved.

Ownership after transfer

Once the project is transferred, it will belong to the new workspace. The original owner will no longer have control over it unless they are added back as a collaborator.

Cookies

Cookies are small pieces of information stored in the user's browser, acting as long-term memory for your website. Unlike variables, cookies persist even after the user closes the page or browser, allowing you to retain important data over time.

Why use cookies?

• Personalization: Store user preferences such as language, or theme settings for a tailored experience.
• Authentication: Maintain user sessions by storing authentication tokens, preventing the need to log in repeatedly.
• Tracking and analytics: Track user behavior, visited pages, or viewed products to optimize the experience.
• Shopping carts and dynamic storage: Temporarily store cart contents or other session data without losing selections when navigating.

Creating and managing cookies

In the Data Store Panel, you'll find the Cookies section, where you can:

• View existing cookies: See a list of all created cookies and their current values.
• Create new cookies: Click on the + icon. This will open the right panel, where you can set the new cookie.

Once created, cookies can be accessed in the function editor, using c. parameter.

::: info To modify or delete a cookie Go to the data sotre panel and choose a cookie, then in the right panel you can delete it or modify its current values. :::

Cookie settings options

Once you choose a cookie, or create a new one, the right panel will open, where you can:

• Name: Assign a descriptive name to identify the cookie.
• Lifetime: Define how long the cookie remains in the user's browser: 1 day, 7 days, 30 days, 1 year The cookie persists for the selected period.
• Delete: Permanently deletes the selected cookie.

Cookies and the function editor

To access a cookie value in the function editor, use the parameter c followed by the cookie name. For example, if a cookie is named preferredTheme, you can retrieve its value with: c.preferredTheme

return c.preferredTheme;

Examples of using cookies in Wized

1. Toggle between light and dark mode using a cookie

In this example, a user can toggle between light and dark mode by clicking a button. This is achieved by:

• Using a cookie (theme) to store the user's preferred theme.
• Using an element event (On Click) on a button to update the theme cookie value.
• Using a CSS Classes configuration on the body element to apply the "dark" class if c.theme === "dark".

Setup:

1. Create the cookie: theme

   • Default value: "light"
   • Can be: "light" or "dark"

2. Button event: Updates the cookie value when clicked.

3. CSS Classes on body: Adds "dark" class when the cookie value is "dark".

---

Updating the theme cookie with a button click

• Add an "On Click" event to a toggle button.
• Set the action to "Set Cookie", updating theme to its opposite value.

return c.theme === 'light' ? 'dark' : 'light';

---

Applying the dark mode class to body

• Add a CSS Classes configuration to body.
• Apply "dark" only if the theme cookie is "dark".

return c.theme === 'dark' ? 'dark' : '';

How it works:

1. When the page loads, the theme cookie is checked.
2. If the value is "dark", the "dark" class is added to body, applying dark mode.
3. When the user clicks the toggle button:
   • The theme cookie updates to its opposite value.
   • Wized reacts to this change and updates the CSS class automatically.

---

2. Show or hide an element based on authentication status

In this example, the visibility of an element (e.g., a "Logout" button) is controlled based on whether the user is authenticated.
Since cookies store string values, it is assumed that a token is stored in auth, and its presence is validated.

Setup:

1. Cookie: auth

   • Value: Contains a session token when logged in (e.g., "abc123xyz").
   • Empty (null or "") if the user is not logged in.

2. Visibility configuration on the element:

   • The element is shown only if auth contains a token.

Validating authentication status

• Add a visibility configuration to the "Logout" button.
• The button is visible only if auth contains a valid token.

return c.auth && c.auth.length > 10;

How It works:

1. When the page loads, Wized checks the auth cookie.
2. If auth contains a session token (length > 10):
   • The Logout button is shown.
3. If auth is missing or too short:
   • The Logout button is hidden.
4. If the user logs out and the auth cookie is cleared:
   • Wized detects the change and hides the Logout button in real time.

::: info Note Cookies store data for a predefined lifetime. However, for long-term data storage, such as user settings, it is often better to store information in a database to ensure reliability and security. :::

Forms

Forms in Wized allow you to collect and process user input efficiently. They work by grouping multiple input fields into an object, making it easier to handle data and submit it through requests.

::: warning Note Make sure to read and understand the differences between using inputs and forms before choosing one. Avoid using both for the same elements, as they behave differently. :::

How do forms work?

Wized automatically detects and structures native Webflow forms without requiring complex setups. Here’s how:

1. Create a form in Webflow

• Add a Webflow form element to your page.
• Include the necessary input fields (text, email, password, etc.).
• Assign a unique name to each input field in Webflow’s settings. This name will be used in Wized.

::: info Note You can also use embedded custom elements :::

2. Wized attribute

• Do not add Wized attributes to individual inputs.
• Add the Wized attribute only to the form element.
• Wized will automatically recognize the form and all its inputs.

3. How Wized structures form data

Once detected, the form will appear in the data store under the “Forms” section:

• The form itself is converted into an object.
• Each input field inside the form becomes a property of this object.
• The input names set in Webflow are used as the keys of the object.

::: info Note At first, the form values will be empty since Wized only fills them after the form is submitted. :::

---

Accessing form values

Unlike inputs (which update in real time), form values are only available after submission. To access a value from a submitted form, use:

return f.loginForm.email; // Retrieves the email input value

If the form hasn’t been submitted, this will return empty.

---

Submitting a form and sending data via API

::: warning Note Enabling bot protection in webflow disables the submit button for a few seconds. Disabling the submit button prevents the submit event from occurring. :::

To process and send form data via an API request, follow these steps:

1. Select the form element in Wized.
2. Add an On Submit event.
3. Enable Prevent Default to stop Webflow’s default form submission.
4. Use a perform request action to send the form data.

Example sending a login request:

Imagine a login form where users enter their email and password. To send this data to an API, follow these steps:

1. Create a Request in Wized (e.g., login).
2. In the Body section, add the required key-value pairs (e.g., email, password).
3. Set the values using the Function Editor:

For email:

return f.loginForm.email;

For password:

return f.loginForm.password;

This ensures that the submitted form values are dynamically passed to the API request.

---

Key takeaways

✔ Wized automatically recognizes Webflow forms (no need to manually create forms in Wized).

✔ Form inputs are grouped into an object for easy data handling.

✔ Form values are only accessible after submission.

✔ Forms must have an "On Submit" event with "Prevent default" to send data to an API instead of Webflow.

---

Inputs vs forms

When working with Wized, it is important to understand the difference between forms and inputs to use them correctly and avoid common mistakes.

Forms: Structured data collection

Forms are used to group multiple input fields into a single structure, making data management easier. They are particularly useful when you need to collect structured information, such as login credentials or contact details.

Key characteristics of forms

• Data grouping: Forms bundle multiple input fields together, making it easier to send structured data.
• Accessibility: Users can submit forms by pressing the Enter key.
• Native Webflow validations: Forms support Webflow’s built-in validation, such as required fields, email formatting, and number restrictions.
• Delayed value access: The values inside a form are only accessible after submission, not in real time.
• Recommended use: Forms are best used when collecting structured user data that needs to be validated before submission.

---

Inputs: Real-time value detection

Inputs allow you to collect and process user input on an individual basis, making them useful when you need real-time value updates. Unlike forms, inputs do not require submission to access their values.

Key characteristics of inputs

• Independent data handling: Inputs work individually rather than as part of a structured form.
• No Enter key submission: Unlike forms, pressing Enter does not trigger submission.
• Real-time value access: Input values can be accessed and modified as the user types, enabling instant feedback.
• Recommended use: Inputs are ideal when you need to process user input dynamically, such as formatting numbers, validating age restrictions, or enabling/disabling elements based on input values.

Example use case

A currency input field where a user enters a number, and it is automatically formatted as a currency value ($1,234.56) in real time.

---

Choosing between inputs and forms

Feature	Forms	Inputs
Data grouping	Groups multiple inputs into a single structure	Each input is handled individually
Accessibility	Can be submitted by pressing Enter	Cannot be submitted with Enter, requires a separate button
Validation	Uses Webflow’s native validations (required fields, email format, numbers, etc.)	Requires custom validation via function editor
Real-time value access	❌ Values are only accessible after form submission	✅ Values can be accessed in real time
Best use case	Collecting structured user data that requires validation before submission (e.g., login, contact forms)	Running real-time logic based on user input (e.g., formatting numbers, validating age dynamically)

Intro to the data store

The data store is the central hub for monitoring and managing all real-time data within your Wized project. It provides a comprehensive overview of the state of your application, allowing you to track and interact with variables, cookies, URL parameters, API requests, and other critical data points.

Why is the data store important?

Building a dynamic web application requires managing data efficiently. The data store simplifies this by providing a real time, centralized view of all data elements that power your app’s functionality. With it, you can:

• Monitor the live state of your application – Instantly see how variables, cookies, and other data points change as users interact with your site.
• Debug requests and logic efficiently – Track API requests and responses, validate authentication tokens, and detect errors in data flow.
• Optimize app behavior – Ensure that dynamic elements update correctly by checking their current values in real time.
• Simplify development – Use the data store as a workspace to experiment with different data configurations before implementing them in your app.

Navigating the data store

You can access the data store from the left sidebar by clicking on data store. This opens a panel divided into two main sections:

1. General overview

This section provides a real time snapshot of all key data elements, including:

• Variables – All variables created within Wized, displayed with their current values.
• Navigation – Information about the current page and navigation-related data.
• Cookies – A complete list of cookies managed by your application, with their live values.
• Secrets – Securely stored values that can be used for authentication or API calls.
• Input fields & forms – Any input fields or forms detected on the current page (e.g., login forms, search bars), along with their current user-entered values.

Each subsection displays data as a list, where you can instantly see the current value of each item. These values update in real time, making it easy to test and refine logic configurations without leaving the dashboard.

Additionally, from this section, you can create new variables, cookies, secrets, and parameters directly, streamlining the setup of your application’s dynamic behavior.

2. Requests overview

This section lists all API requests created in Wized. Each request is displayed with its status and response details, allowing you to track and debug external data interactions. Next to each request, you will find three action buttons:

• Play – Manually trigger the request to test its execution.
• Preview – Open and edit the request configuration in the right panel.
• Expand – View real-time request details, including:
  • Whether the request has been executed (hasRequested).
  • If the request is currently running (isRequesting).
  • The HTTP status (status and statusText).
  • Whether the request was successful (ok).
  • The received data (data).
  • The headers of the response (headers).

Before a request is executed, these properties will be null or false. Once triggered, they update in real time, allowing you to monitor its success and response data.

How to use the data store effectively

• Debug your application:

  • Check if variables, cookies, or parameters are updating as expected.
  • Verify requests responses and diagnose issues if a request is failing.

• Test real-time interactions:

  • Modify variables and cookies on the fly to see how your app responds.
  • Ensure that navigation-based data updates correctly.

• Optimize API calls:

  • Manually execute requests to test endpoints.
  • Validate API responses before integrating them into your app logic.

Key takeaway

The data store is an essential tool for developing and debugging your Wized project. It provides live visibility into all critical data points, helping you build a more robust, responsive, and error-free application.

Make sure to explore the data store regularly while building your app—it’s the best way to stay in control of your data and ensure everything works as expected.

Inputs

Inputs in Wized allow you to capture and use data entered by users in real time. Unlike forms, inputs do not group data but provide immediate access to the values typed by the user. This makes them ideal for dynamic interactions, real-time logic execution, and live data formatting.

::: warning Note Make sure to read and understand the differences between using inputs and forms before choosing one. Avoid using both for the same elements, as they behave differently. :::

How do inputs work?

When an input field in Webflow has the Wized attribute, it is automatically detected and listed in the Data Store under the Inputs section. Unlike forms, inputs are recognized individually.

Key characteristics of inputs:

• Real-time data access: The value of an input updates in real time as the user types.
• Independent behavior: Each input is treated as a separate element, meaning it does not depend on a form submission.
• Event-driven logic: Inputs can trigger actions based on user input.

Where do inputs appear in Wized?

Inputs are dynamically recognized based on the current page in the Wized configurator. If you are on the /dashboard page, only the inputs present on that page will be listed in the Data Store.

How to use inputs in Wized?

Inputs are primarily used to capture user data and integrate it into the logic of your Wized application. You can:

Use input values in logic

The input values can be used in the Function Editor to dynamically update elements, validate data, or interact with API requests.

Example 1: Validate user age in real time

return i.age >= 18;
// Returns true if the user is 18 or older

Example 2: Format currency input as the user types

return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(i.price);

Trigger events based on input changes

You can configure On Change or On Input events to execute logic when the user modifies an input field.

Example 3: Show a warning message when the input is empty

return i.email.trim() === '' ? true : false;
// Shows a warning if the email field is empty

Send input data via API requests

To send input values in an API request, configure an On Click event on a button and use the Function Editor to pass the input values.

Example 4: Sending input data in a request

1. Ensure the div button has the Wized attribute.
2. Add an On Click event to the button.
3. Configure the request in Wized and map the inputs inside the Function Editor.

Each key-value pair in the request body must be set individually:

• Key: email → Value: return i.login.email
• Key: password → Value: return i.login.password

This structure ensures that input values are properly sent when the user clicks the submit button.

When should you use inputs instead of forms?

Feature	Inputs	Forms
Real-time value updates	✅ Yes	❌ No
Grouping multiple fields	❌ No	✅ Yes
Trigger actions on every key press	✅ Yes	❌ No
Submit using the Enter key	❌ No	✅ Yes
Use Webflow native validations	❌ No	✅ Yes
Best for data collection	❌ No	✅ Yes
Best for interactive logic	✅ Yes	❌ No

Best practices

• Use inputs when you need to capture user input in real time for dynamic updates, live validation, or interactive logic.
• Use forms when you need to collect structured data and submit it in one action.
• Avoid mixing both approaches unless necessary for a specific use case.

Navigation

The navigation section in the Data Store provides real-time information about the current state of the URL in your web application. This includes the full URL, any parameters present, and previously defined parameters with their current values.

Understanding and utilizing navigation data is essential for controlling application logic dynamically. You can use these values to trigger API requests based on the active page, conditionally show or hide elements, or pass information between different pages.

What information does navigation provide?

The navigation section consists of three main data points:

1. href (n.href)

   • A string containing the full URL of the current page.
   • Updates automatically as you navigate between pages within your website.

2. parameter (n.parameter)

   • An object containing all URL parameters created.
   • Each parameter is stored as a key-value pair, where:
     • The key is the name of the parameter.
     • The value is the current assigned value or null if it is not set.

3. parameter.name (n.parameter.<parameter_name>)

   • A list of all previously defined parameters, each displaying:
     • The name of the parameter.
     • Its current value (updates in real time).
     • If the parameter exists in the URL but is not defined in the Data Store, its value remains null until it is explicitly added.

4. path (n.path)

   • A string containing the path without the base URL.
   • Updates automatically as you navigate between pages within your website.

How navigation works in real time

The navigation data updates instantly as you browse your site within the Wized configurator. This means that:

• If you visit another page, the href value updates automatically.
• If a URL contains parameters, they are reflected immediately in n.parameter.
• If you manually add parameters via the Canvas, they appear in real time in the Data Store.

::: tip Note

• For a parameter to be visible in the Data Store, it must exist within Wized.
• Even if a parameter is present in the URL, if it is not explicitly added, its value will be inaccessible. :::

How to use navigation data

navigation data is a powerful tool for dynamic behavior in your application. Here are some common use cases:

1. Execute requests based on the active page

You can use navigation data to control when a request runs.
For example, you can set up an event to execute a request only when the user is on any dashboard page:

return n.path.includes('/dashboard');

This ensures that the request will not trigger on other pages.

2. Show or hide elements based on URL parameters

With Wized’s reactive system, elements can be conditionally displayed depending on navigation values.

For example, you can configure an element to be visible only if a specific parameter is present, such as showing a discount banner only when the "promo" parameter exists:

• Create a visibility configuration for the element you want to show or hide dynamically. Then, use the following code, replacing the parameter names as needed

return n.parameter.promo !== null;

Since Wized constantly listens for changes, the element will dynamically appear or disappear as the parameter changes.

3. Modify UI based on parameter values

navigation parameters can be used in JavaScript functions to modify UI elements. For example, if a product page contains an id parameter, you can dynamically set the product name:

• Create a text configuration for the element you want to modify. Then, use the following code, replacing the parameter names as needed

return n.parameter.id === '1' ? 'Product 1' : 'Other Product';

This allows you to personalize content without needing separate pages for each product.

Interacting with navigation in the function editor

In the function editor, navigation values can be accessed using the n object. For example, to retrieve the current "id" parameter, you would use:

return n.parameter.id;

Requests

The requests section within the data store provides a centralized view of all API requests in your project. This section allows you to monitor, debug, and manually execute requests, giving you full control over their behavior and responses.

Overview

Each request is represented as a collapsible item in the list. The request name is displayed alongside three icons:

1. Play icon: Executes the request manually.
2. Preview icon: Opens the right panel to display request settings.
3. Expand/collapse icon: Reveals or hides the request’s response details.

By expanding a request, you will see its current properties and state, making it easier to track execution, inspect returned data, and troubleshoot issues.

---

Request properties

Each request contains several key properties, dynamically updated upon execution. These are displayed in a structured format resembling a JavaScript object.

Property	Type	Default Value	Description
hasRequested	Boolean	false	Indicates if the request has been executed at least once.
isRequesting	Boolean	false	Becomes true while the request is in progress.
statusText	String	null	Displays the response status text (e.g., "Success", "Forbidden", "Not Found").
status	Number	null	The HTTP response code (e.g., 200, 404, 500).
ok	Boolean	false	true if the request was successful (200-299 status range).
data	Object	null	Stores the response payload, dynamically structured based on the returned data as Key-value pairs.
headers	Object	null	Stores the response headers as key-value pairs.

When a request is executed, its status, response data, and headers update in real time. This provides a clear snapshot of the request’s success or failure, making it an essential tool for debugging.

---

Using requests values

Requests are not just for viewing responses they are fully accessible within the function editor, allowing dynamic data manipulation and logic execution.

Accessing request data

You can access request properties directly using the r parameter in the function editor.

Get a user’s name from a request

return r.get_user.data.name;

Render a list of products

return r.products_request.data.products;
// Assuming "products" is an array

Check if a request was successful

return r.login.ok ? 'Login successful' : 'Login failed';

Debugging requests

Since request states are visible in real time, you can:

• Identify errors by checking the statusText and status properties.
• Verify successful execution using the ok boolean.
• Inspect the returned payload in the data object.

Secrets

Secrets in Wized allow you to securely store API keys needed for requests. These secrets are encrypted and stored on our servers, ensuring that only the project owner can access them. When a request using a secret is executed, it is processed through our servers, where the actual API key is retrieved and applied securely. This prevents exposure of sensitive credentials on the client side.

Why use secrets?

• Security: By storing your API keys in secrets, you prevent them from being visible in your webapp source code, reducing the risk of leaks and unauthorized access.
• Requests via Wized server: When you use a Secret in a request, the request is executed through our servers instead of directly from the user's browser. This adds an extra layer of security, especially for APIs that only accept requests from servers.
• Encryption: Secrets are stored encrypted, ensuring that only you, as the project owner, can access their value.

What kind of information should I store in secrets?

• API keys: API keys are unique credentials that allow you to access external services, such as databases, third-party APIs, or payment platforms. Storing them in secrets is essential to protect them from potential leaks.

::: info Note Auth tokens are temporary credentials that allow users to access protected areas of your application after logging in. These tokens are typically stored in cookies. :::

Creating a secret

1. Access the data store panel: Click on the Data Store tab in the leftside bar.
2. Secrets section: You will find a list of the secrets you have previously created.
3. Click the +: Right panel will open, there you will be able to set the values of this secret.
4. Fill in the fields:
   • Name: Choose a descriptive name for your secret (for example, api_key_stripe).
   • Value: Enter the value of your API key.
5. Save the secret: Click the "Save" button to encrypt and store the secret securely.

Using a secret

To use a secret in a request, simply access its value in the Function Editor using the s. parameter followed by the secret name. For example:

// In the "Headers" configuration of a request:
return s.my_secret_token

Variables

Variables in Wized act as dynamic containers that store data in real time, making them an essential part of your application's state. Wized variables are reactive, meaning that any change to their value automatically updates all elements, events, or configurations that depend on them.

They can store various data types, including:

• Text (strings)
• Numbers
• Booleans (true or false)
• Objects
• Arrays (lists)

These variables allow you to create logic-driven behaviors, such as showing or hiding elements, triggering events, and modifying element configurations based on their current values. ::: warning Important Variable values reset to their initial state every time the page reloads or navigates to another page. To maintain values across pages, use cookies or enable the persist values option. :::

Managing variables in the data store

The Variables section within the Data Store provides a clear overview of all created variables, including their names, current values, and persistence settings. Here’s what you can do:

• View existing variables: See a real-time list of all stored variables and their values.
• Create new variables: Click the "+" button to define a new variable.
• Modify variables: Click a variable to edit its name or value.
• Delete variables: Click the trash icon next to a variable to remove it.

Configuring variables

When creating or modifying a variable, you can define the following properties:

1. Name

Choose a clear, descriptive name.
Example: If storing a username, name the variable userName instead of var1.

2. Initial value

Set the starting value using the function editor.
You can use any data available in Wized, such as cookies, API responses, or user inputs.

3. Persistence options

Variables can persist across different scopes:

• None (Default): The variable resets when the page reloads.
• Session Storage: The variable persists as long as the browser tab is open.
• Local Storage: The variable remains saved even after the browser is closed.

::: info Example If storing a shopping cart, session storage ensures it remains available while the tab is open, whereas local storage keeps it even after closing and reopening the browser. :::

4. Computed variables

If enabled, the variable automatically recalculates whenever any of its dependencies (such as API data or user inputs) change.
Useful for values that must update dynamically without manual intervention.

---

Using variables in the function editor

Once created, variables can be accessed and manipulated directly within the function editor.

Accessing a variable

To use a variable, prefix its name with v.
Example: If you have a variable named username, retrieve its value using:

return v.username;

Practical Use Cases

1. Displaying dynamic text

return `Welcome, ${v.username}!`;

• Calculate the total price of a shopping cart:

// In the "Set Text" configuration of an item that displays the total price:

let total = 0;

for (const product of v.cart) {

total += product.price * product.quantity;

}

return `Total: $${total.toFixed(2)}`;

• Controlling the visibility of an element:

// In the "Set Visibility" configuration of an element:

return v.showElement; // Show the element if v.showElement is true, hide it if false

Variables and reactivity

Variables in Wized are reactive, meaning that any change in their value will trigger an automatic update of events and configurations of elements that depend on them. This allows you to create dynamic and responsive user interfaces without the need to reload the page.

• Example:

  Imagine you have a button that, when clicked, increments a counter stored in a variable called v.clickCount . You also have a text element that displays the value of this counter.

  1. Event: On Click on the button
  2. Action: Set Variable to increment the counter: v.contadorClics += 1;
  3. Configuration: Set Text on the text element, with the return value Clicks: ${v.contadorClics} ;

  Every time the user clicks the button, the event will fire, the v.ClickCount variable will increment, and the element's text will automatically update to reflect the new value, all in real time!

Multi-use configurations

Multi-use configurations allow you to apply multiple instances of the same configuration to a single element. These configurations give you the flexibility to manipulate various properties dynamically, enabling more complex and interactive behaviors.

Why Use multi-use configurations?

• Greater flexibility: Modify multiple aspects of an element without restrictions.
• Advanced customization: Combine multiple configurations to achieve unique interactions.
• Data-Driven adaptability: Dynamically adjust styles, attributes, or behaviors based on real-time data.

How do multi-use configurations work?

Unlike single-use configurations, which can only be applied once per element, multi-use configurations allow multiple instances on the same element. For example, you can add multiple CSS classes, HTML attributes, or inline styles to an element, each serving a different purpose.

Common use cases

• Applying multiple CSS classes dynamically based on user actions.
• Assigning multiple HTML attributes for improved accessibility and behavior.
• Using multiple inline styles to modify different visual aspects of an element in real time.
• Setting multiple URL parameters dynamically for API calls or navigation.

CSS classes

This configuration allows you to dynamically manage CSS classes for elements, enabling efficient control over their appearance and behavior based on specific conditions.

How does It work?

1. Select element: Start by choosing an element in the elements panel in Wized where you want to apply the class configuration.
2. Setting up Go to the right panel and select the CSS classes configuration.
3. Enter class name: Input the exact name of the CSS class you want to add or remove from the element.
4. Define the condition: Use the Function Editor to specify the condition that will determine whether the class is added or removed. This condition should return a boolean value (true or false).

::: warning Note

• The class must exist in Webflow: Ensure that the CSS class you specify is defined in your Webflow project. Otherwise, you will not see visual changes when applying the class. :::

Advantages

• Style reuse: You can define complex styles in Webflow and easily apply or remove them using Set Class.

• Organization and clarity: By using CSS classes, you keep your code more organized and easier to understand, especially in large projects with many elements and styles.

• Flexibility: You can combine Set Class with other settings and configurations to create dynamic and customized interactions, such as animations, appearance changes, or hover effects. This allows you to create more engaging and unique user experiences.

Practical example

For example, you have a button that you want to highlight only if the user is logged in. You can achieve this like this:

1. In Webflow, create a CSS class named 'highlight': Add the styles you want to apply to the button (for example, a different background color).
2. In Wized, select the button and apply the set class setting.
3. In the "Class name" field, type "highlight."
4. In the Function Editor, type the following condition:

Set HTML attribute

The Set HTML attribute configuration enables you to modify the value of any HTML attribute of an element.

How It works

1. Select element: Start by choosing the element in the element panel to which you wish to apply this configuration.

2. Setting up: Navigate to the right panel, in the properties section select the Set HTML attribute configuration.

3. Specify the attribute key: Input the name of the HTML attribute you intend to modify (for example, src, href, etc.).

4. Define the value: Use the Function Editor to specify the new value for the attribute. You can incorporate any data available in Wized, such as variables, cookies, request responses, or any other value.

5. Add conditions (optional): If desired, you can include a condition in the Function Editor to modify the attribute only under specific circumstances.

Examples

• Change a product image:

  • Attribute: src

  • value:

    return r.getProduct.data.imageUrl; // Retrieves the image URL from the API response
    

• Update a Button link:

  • Attribute: href

  • value:

    return v.destinationPage; // Provides the URL stored in a variable
    

• Enable or disable an input:

  • Attribute: disabled

  • value:

    return !v.formularioValido; // Disables the input if the form is invalid
    

Inline style

The inline style configuration allows you to dynamically modify any CSS property of a selected element. This enables real-time visual adjustments based on user interactions, data changes, or other conditions within your application.

Why use inline style?

• Dynamic styling: Adjust the appearance of elements based on real-time data from variables, cookies, API responses, or other sources.
• Flexible customization: Modify colors, sizes, visibility, and more without predefined styles.
• Reactive updates: Since Wized is reactive, any change in the data source will automatically update the element's styles.

How does It work?

1. Select the element: In Wized, in the elements panel click on the element you want to style. Make sure that the element has the Wized attribute.
2. Setting up In the right panel, select the Inline style configuration.
3. Choose the CSS property: Use the dropdown menu to select the CSS property you want to modify (e.g., background, color, width, etc.).To activate the dropdown, you must type the name of the property and Wized will show you a few suggestions
4. Set the value: Use the Function Editor to specify the new value dynamically. The value can be derived from variables, cookies, API responses, or conditional logic.

Example:

/* Keep in mind that this example has fixed values, however,
you can replace any value with a value from a cookie, variable, form, input, etc. */
return '#ff0000'; // for background color
return '10px'; // for size
return 'flex'; // for display

5. Multiple styles: You can use this configuration multiple times on the same element, allowing you to modify several CSS properties simultaneously.

6. Conditional styling (optional): Add conditional logic within the Function Editor to apply styles only under specific conditions.

   Example: Assuming you want to change the background color of an element using Ternary operators

   return r.request_name.status !== 200 && r.request_name.hasRequested ? 'red' : 'black';
   

Creating smooth transitions

By default, styles are applied instantly. However, you can create smooth transitions by combining Inline style with Webflow's built-in CSS transitions.

Steps to apply transitions:

1. Set Up CSS transitions in Webflow:

   • Select the element and go to the "Effects" tab.
   • Under "transitions," click the "+" button.
   • Choose the CSS property you want to animate (e.g., background-color, opacity).
   • Set the duration and easing (e.g., ease-in-out).
   • If you want all properties to transition, select "All Properties."

2. Apply inline style in Wized:

   • Choose the same CSS property in the inline style setting.
   • In the Function Editor, write the logic to update the property based on your conditions.

//Change a button's background color when a request completes.
return r.request_name.hasRequested ? 'blue' : 'red';

Webflow interactions vs. Wized inline style

Webflow’s built-in interactions allow for animations like hover effects, click-based visibility toggles, and scroll-triggered animations.

Wized’s inline style expands these capabilities by providing dynamic, data-driven styling.

When to use Wized instead of Webflow?

Use Wized when:

• You need conditional logic (e.g., change styles based on a user's role or API response).
• You want to connect styles to external data, such as real-time product availability or API-driven updates.
• You require flexibility beyond Webflow’s predefined interaction triggers.

Practical examples

1. Change the background color of a button

CSS Property: background

return 'red';

2. Display a progress bar based on request data

CSS Property: width

return `${r.request_name.data.progress}%`;

3. Change text color based on user role

CSS Property: color

return r.getUserData.data.role === 'admin' ? 'gold' : 'black';

4. Hide an element if no data is available

CSS Property: display

return r.getData.data.length > 0 ? 'block' : 'none';

5. Adjust font size dynamically

CSS Property: font-size

return r.getSettings.data.isLargeText ? '20px' : '14px';

Add parameter to link

The Add parameter to link configuration allows you to add additional information to links on your website. This information is appended to the end of the URL in the form of query parameters, which are key-value pairs separated by question marks ? and ampersands &&.

For example, if you have a link to a product page with the URL https://mystore.com/product, you can add a query parameter called id with the value 12345 to indicate which specific product should be displayed: https://mystore.com/product?id=12345.

How does it work?

1. URL destination: In Webflow, set the url or destination page to which you want the user to be redirected once clicked.
2. Select the element: Choose the element from the elements panel in Wized. Ensure that the element has a configured destination URL and has the Wized attribute
3. Setting up: In the settings tab of the right panel, select the add parameter to link configuration.
4. Choose the parameter: Use the dropdown menu to select the parameter you want to add to the link. Make sure you have created the parameter in the data store first, or you can create it by clicking on the + icon.
5. Define the value in the function editor: In the function editor specify the value you want to assign to the parameter. You can use any available data, such as variables, cookies, API responses, or even the value of other inputs.

When you click the element, the parameter and its value will be automatically added to the destination URL. On the destination page, you can access this value using n.parameters.parameter_name in the function editor.

::: tip Note You can add as many parameters as you want. For each parameter, click on add parameter, and Wized will automatically append all set parameters to the destination URL. :::

Why use add parameter to link?

• Dynamic detail pages: Pass the ID of a product, item, or other to load specific information about that product on the destination page.
• Filters and searches: Pass search criteria or filters through parameters to display relevant results on the next page.
• Campaign tracking: Add UTM parameters to your links to analyze traffic and performance of your marketing campaigns.
• Personalization: Pass user information or preferences to personalize the content or functionality of the destination page.

Example

Imagine you have a list of products on your website and want to redirect the user to a details page with specific information about that product when they click on it. You can achieve this as follows:

1. In Webflow, create a link element in the product card that points to the details page.
2. Apply the Add parameter to link setting.
3. Select the parameter productId (make sure you have created it previously in the Data store panel).
4. In the function editor, write:

// Get the product ID from the rendered list
return r.getProducts.data[v.i].id; // 'v.i' must correspond to the index of the product being clicked

// Get the product ID
return r.getProduct.data.id;

Now, when clicking on a product, the destination URL will include the productId parameter with the corresponding ID, allowing you to display the correct information on the details page.

Single-use configurations

Single-use configurations are settings that can only be applied once per element. These configurations directly control an element’s content, structure, or visibility, making them essential for managing core interactions and display logic.

Why are these configurations single use?

• Element-Specific control: Some settings directly modify an element’s primary function (e.g., text content, visibility).
• Avoiding conflicts: Allowing multiple instances of these settings on the same element could create inconsistencies or unpredictable behavior.
• Performance optimization: Restricting these configurations ensures optimal rendering and updates.

How do single use configurations work?

Each element can have only one instance of a single-use configuration. For example, an element can have only one text setting, since defining multiple text sources would create conflicts.

Common use cases

• Setting dynamic text content based on request responses.
• Controlling visibility based on conditions.
• Rendering lists dynamically using render list.
• Pre-filling input fields using form value or input value.

Render List

The Render List configuration allows you to dynamically generate lists of elements based on real-time data. Whether pulling information from variables, cookies, request responses, or other sources, Wized ensures that elements are duplicated and displayed according to the number of items in your data set.

::: info Note Render List does not automatically update the content of each item it only duplicates the selected element. To make each duplicated item display unique data, additional configurations like Text, Visibility must be applied to each child element inside the selected element. :::

How It works

1. Design the template element

Before using Render List, you must define a template element in Webflow, which will be the base structure for each item in the list. This element can contain text, images, buttons, and other UI components. ::: info Note Be sure to add the Wized attribute to the template element. Additionally, add the Wized attribute to any child elements you want to have dynamic behavior. :::

---

2. Set render list to the element

Once the template element is ready:

• Select the element in Wized's elements panel.
• Define an index variable : (e.g., v.i) is required. This variable allows child elements to reference specific data for each item in the list.
• List value: Provide an array (list) of data that determines how many copies of the template should be rendered.

::: warning Important
If there are several rendering lists on the same page, each must have a different index variable to avoid conflicts.
:::

---

3. Setting up child elements

Once you select the list you want to render and the index variable, the template element will be duplicated according to the number of items in the list.

Each duplicated element will initially be an exact copy of the original, including text, images, and other content.

To display dynamic information for each element, you need to set configurations each child element to render dynamic data. Follow this steps to personalize each list item:

Ensure child elements have the Wized attribute

• Every child element that should display dynamic data must have a Wized attribute

Verify hierarchy

• Child elements must be direct descendants of the template element in Webflow.

Select the child element in Wized

• Open the elements panel and select the desired child element.

Apply configurations (Text, Visibility, Style, etc.)

• Use Wized configurations like Set Text, Set Visibility, or Set Style to make elements dynamic.

Use the index variable in function editor

• This variable ensures that each duplicated element references the correct data.

---

Examples:

• Text : To each text element such as titles, descriptions, etc. You must apply a text confituration to render text dynamically for each element.

You can use the dot notation to access the desired path, or you can also click on the name of the property you want to use in the data store window, clicking on it will autocomplete the path inside the function editor, just replace the index [0] by the name of the chosen variable.

Example

return r.get_all_products.data.products[v.index].name;
// Assuming that `index` is the name of the variable that was selected as the index variable

::: info Note Make sure you are using the index variable in the path you are using in the function editor, this will iterate over the list and each element will have its own information. :::

---

• Images: To render images dynamically, you must add an HTML attribute to the image element where the key will be SRC and the value will be the URL of the image, make sure the URL ends in .png, .jpg, etc.

You can use the dot notation to access the desired path, or you can also click on the name of the property you want to use in the data store window, clicking on it will autocomplete the path inside the function editor, just replace the index [0] by the name of the chosen variable.

Example

return return r.get_all_products.data.products[v.index].main_image_url;
// Assuming that `index` is the name of the variable that was selected as the index variable

::: info Note Make sure you are using the index variable in the path you are using in the function editor, this will iterate over the list and each element will have its own information. :::

Structuring and styling lists

Wized handles duplication of list items, but layout and styling depend on how the container is structured in Webflow. To ensure proper rendering:

• Use flexible container layouts that adapt to different amounts of content.
• Apply CSS grid or flexbox for better responsiveness.
• Keep the template element simple to avoid unnecessary complexity in duplication.

---

The importance of the index variable

The index variable (e.g., v.index) allows Wized to iterate over the data and assign a unique value to each duplicated item.

Item in List	Index Value (v.i)
First Item	0
Second Item	1
Third Item	2
...	...

Using v.index, child elements inside the list can reference different data points.

// Example: Only show "Add to Cart" button when stock is available
return r.getProducts.data[v.index].stock > 0;

::: info Note If v.index is not used, all items will display the same data, preventing dynamic behavior. :::

---

Rendering lists inside lists

Wized supports nested lists, allowing you to display lists within lists (e.g., categories and subcategories).

How to render nested lists:

1. Apply render list to the parent element

• Example: A list of product categories (uses v.i for indexing).

2. Apply render list to a child element inside the parent

• Example: A list of products within each category (uses v.j for indexing). ::: warning Note You should not use the same index variable for different lists rendered on the same page. :::

3. Ensure different index variables for Each Level

• v.i for the parent list (categories).
• v.j for the nested list (products inside categories).

// Example: Accessing nested product data
return r.getProducts.data[v.i].categories[v.j].name;

Example structure

[Main List]   -> Categories
  ├── [Item 1] -> "Electronics"
  │      ├── [Sub Item 1] -> "Laptop"
  │      └── [Sub Item 2] -> "Smartphone"
  ├── [Item 2] -> "Clothing"
  │      ├── [Sub Item 1] -> "T-shirt"
  │      ├── [Sub Item 2] -> "Jeans"

---

Practical examples

Display product name in each list item

return r.getProducts.data[v.i].name;

Show "Add to cart" button only when stock is available

return r.getProducts.data[v.i].stock > 0;

Show index number for each item

return v.i + 1;
// Displays item number starting from 1 instead of 0

Form values

The Form Values configuration allows you to automatically populate form fields with predefined values. This is useful for improving user experience by pre-filling forms with existing data, dynamically updating fields based on user actions, or ensuring consistency in form submissions.

How does It work?

The form values configuration assigns values to multiple input fields within a form using the function editor. It allows you to retrieve and inject data from various sources, such as:

• Variables (e.g., stored user preferences)
• Cookies (e.g., authentication tokens)
• URL parameters (e.g., tracking campaign data)
• API responses (e.g., retrieving user profile data)
• Other inputs (e.g., filling a field based on another input's value)

How to use it?

1. Select the target form

Ensure your form is properly set up in Webflow and contains the fields you want to populate. The form must have the wized attribute to work correctly with this configuration.

Once you have set up the form in Webflow, go to the elements panel in Wized and click the form element

2. Setting up

• In the right panel, on the settings tab, go to the form values section.
• Open the Function Editor to define the values.

3. Define values in the function editor

Write a JavaScript function that returns an object where:

• Keys correspond to the exact names of the input fields.
• Values contain the data to populate the fields.

Example:

/* Keep in mind that this example has fixed values, however,
you can replace any value with a value from a cookie, variable, form, input, etc. */
return {
  name: 'nelson',
  email: 'test@test.com',
  age: r.getUser.data.age || '',
};

4. Enable "merge" (optional)

The Merge checkbox controls whether to retain existing form values:

• Enabled: Keeps existing values and updates only the specified fields.
• Disabled: Replaces all form values with the ones defined in the function. Any field not included will be cleared.

---

Considerations

When using form values, keep in mind the following behaviors to ensure correct functionality:

• Matching field names: The input field names in Webflow must exactly match the keys in the object returned by the function. If there is a mismatch, the corresponding fields will remain empty.

  In this example, we create a new input called new_input in Webflow.

  ---

  For an input called new_input this is what the function should look like in Wized

return {
  new_input: 'Hello there!',
};

• Data type compatibility: Ensure that the values you assign match the expected data types of the inputs. For example, if an input field is of type number, providing a string will result in an empty field.

• Data store visibility: In the Data store panel, you can view the values assigned to the form through form values configuration. However, if a user manually modifies an input field, these changes will not be reflected in the Data store or accessible via Wized until the form is submitted.

• Reactive behavior: Since Wized is reactive, if the data source used to populate the form is not available at the time of execution, the inputs will remain empty. However, as soon as the data becomes available, Wized will automatically update and fill the fields.

Use cases

• Pre-filling user information: Auto-fill forms with user details from an API response.
• Persistent form data: Restore previously entered values using cookies or local storage.
• Dynamic form updates: Adjust form fields based on user interactions (e.g., auto-filling a shipping address after selecting a user profile).
• Tracking and customization: Populate forms with campaign data from URL parameters.

Example:

Auto-Fill Form with User Data Imagine a registration form where we want to pre-fill the user's name and email with data from an API response:

return {
  name: r.getUserProfile.data.fullName,
  email: r.getUserProfile.data.email,
};
// With this setup, as soon as the data request completes, the form will automatically populate the fields.

Input value

The input value configuration allows you to dynamically pre-fill a specific input field within your form. Unlike form values, which enables setting multiple inputs at once, input value focuses on a single field, providing more granular control.

How does It work?

1. Select the input field: Ensure the input field you want to populate has the wized attribute so that Wized can recognize and manipulate it.

2. Apply the input value: In Wized, Navigate to the settings tab in the right panel and select the input value configuration.

3. Define the value in the function editor: Use the Function Editor to return the specific value that should populate the input. The value can come from various sources such as variables, cookies, URL parameters, API responses, or other dynamic data.

   return r.get_user.data.name || '';
   

4. Real time updates: If the user manually changes the value of the input, the new value will be reflected in the Data Store in real-time, allowing you to track changes dynamically.

Considerations

• Wized attribute required The input field must have the wized attribute to be recognized and updated by Wized.

• Data type compatibility The assigned value must match the expected data type of the input field (e.g., a number input must receive a numerical value).

• User modified values: Unlike Form Values, user-modified input values are accessible in real-time. If a user manually updates the field, the new value will be reflected in the Data Store and can be used dynamically within Wized.

• Reactive behavior If the assigned value is not available at the time of execution, the input will remain empty. However, once the data source becomes available, Wized will automatically update the input field.

Use cases

• Pre-filling forms: If you have user information stored in cookies or variables, or your DB, you can use "Input Value" to pre-fill form fields.
• Displaying search results: When performing a search, this function can be used to show the search terms within an input field. This allows you to edit or refine your queries.
• Updating input fields based on other values: You can use conditional logic in the Function Editor to update the value of an input based on other data from your application.

Text configuration

The text configuration in Wized allows you to dynamically display text based on the data available in your application. This includes variables, cookies, URL parameters, request responses, and more. You can formatting any text string using formulas

You can also set validations and conditions to create customized text outputs based on different scenarios.

What is dynamic text?

Dynamic text means that instead of writing static text (like "Hello World"), your text can change automatically based on real-time data.

For example:

• If you want to greet a user by name, you can use:

  return 'Hello ' + r.userRequest.data.name;
  //This will display `Hello John` if the request response data returns `John` as the name.
  

• If you want to show a different message based on the current page:

  return n.path === '/dashboard' ? 'Welcome to your dashboard' : 'Welcome to the site';
  

Key benefits

• Fully dynamic: Use real-time data to personalize text.
• Flexible logic: Apply conditions, format data, and combine multiple sources.
• Seamless integration: Works with request responses, variables, cookies, and more.

How it works

::: info Note

• The text configuration can only be applied to text elements.
• The value of the text is set using the function editor, where you can write JavaScript expressions to define how the text should be displayed.

:::

1. Select the element

In the Wized elements panel, click on the element where you want to set dynamic text.

2. Choose the text type

In the right panel, go to the text section and select the type of content you want to display:

• Plain text → Basic text (recommended for most cases).
• HTML → If you need rich formatting.
• Markdown → For formatted text like titles, lists, etc.

::: warning Note

When using HTML or Markdown, ensure that the text does not contain untrusted content. If displaying data from external sources, sanitize it to prevent security risks like XSS attacks.

:::

3. Define the content

Use the function editor to write the JavaScript expression that will determine the text content.

---

Writing expressions in the function editor

The function editor allows you to write JavaScript formulas to define what text will be displayed. Here are some useful examples:

Using request response data

return 'Your balance is: $ ' + r.request_name.data.balance;
//Displays a user's balance dynamically.

---

Formatting request response data

If your request returns a timestamp, you can format it into a human-readable date:

return new Date(r.request_name.data.timestamp).toLocaleDateString();
//Converts `"1672531200000"` into `"1/1/2023"`.

---

Combining multiple data sources

return (
  'Hello ' + (v.userName || r.userDetails.data.name) + '! Your role is: ' + (v.userRole || 'Guest')
);
//Prioritizes the `userName` variable but falls back to an request response if not set.

---

Formatting numbers (e.g., Prices)

return `${r.request_name.data.price.toFixed(2)}`;
//Ensures the price always has two decimal places.

---

Conditional text based on user input

return i.userAge >

… [truncated — open the raw llms.txt above for the full file]