` tag from any URL. Useful for displaying link previews. **Request:** `GET /api/site-info/title?url={url}` ```ts app.get('/api/site-info/title', async (c) => { const url = c.req.query('url'); if (!url) { return c.json({ success: false, error: "Missing 'url' query parameter" }, 400); } try { const response = await fetch(url); const html = await response.text(); const titleMatch = html.match(/<title[^>]*>([^<]+)<\/title>/i); const title = titleMatch ? titleMatch[1].trim() : null; if (!title) { return c.json({ success: false, error: 'No title found' }, 404); } return c.json({ success: true, title }); } catch (error) { return c.json({ success: false, error: 'Failed to fetch the URL' }, 500); } }); ``` ### Redirect & Track Click Handles the short link redirect. When a user visits a short URL, this endpoint: 1. Sends click data (IP, browser, location) to the backend for analytics 2. Redirects the user to the destination URL **Request:** `GET /:identifier` ```ts app.get('/:identifier', async (c) => { const { identifier } = c.req.param(); const response = await fetch('<XANO_BASE_URL_HERE>/track_click', { method: 'POST', headers: { 'content-type': 'application/json', }, body: JSON.stringify({ identifier, ip: getIpAddress(c), browser: getBrowser(c), location: getLocation(c), }), }); const data: any = await response.json(); if (data.redirect_url) { return c.redirect(data.redirect_url); } return c.json({ message: 'Link does not exist!' }, 404); }); ``` ## Deployment This service is designed to be deployed on [Cloudflare Workers](https://workers.cloudflare.com/), which provides: - Global edge distribution for low-latency redirects - Access to Cloudflare headers like `cf-connecting-ip` and `cf-ipcountry` - Serverless scaling with minimal cold starts   # Connecting Everything with Wized This guide walks you through connecting your WordPress frontend with the Xano backend using Wized. We'll cover Apps, Requests, Variables, Elements, and Workflows. ## Step 1: Create Apps Apps in Wized represent your API connections. For this URL shortener, we need two Xano apps: | App Name | Base URL | Purpose | | -------------- | --------------------------------------------------------------------- | ------------------------- | | Xano Auth | `Xano base url for auth endpoints` | User authentication | | Xano Short Url | `Xano base url for short url endpoints` | URL shortening operations | | Hono helper | `We use this to fetch the title of the Website before saving to Xano` | Fetch title | ![Wized Apps](../images/wized-apps.webp) ::: tip Learn More Check out the [Apps documentation](/apps/creating-apps) to learn how to create and configure Apps in Wized. ::: ## Step 2: Set Up Variables Variables store data that persists across your application. Create the following variables: User management variables: | Variable Name | Storage Type | Initial Value | Purpose | | ------------- | --------------- | ------------- | ------------------------------------ | | `token` | Session Storage | `''` | Stores the authentication JWT token | | `user_data` | Session Storage | `null` | Stores the authenticated user's data | Links management variables: | Variable Name | Storage Type | Initial Value | Purpose | | --------------- | ------------- | ------------- | --------------------------------- | | `user_links` | Local Storage | `[]` | Stores the user's shortened URLs | | `links_loading` | None | `true` | Stores the loading state of links | Index variables | Variable Name | Storage Type | Initial Value | Purpose | | --------------------------- | ------------ | ------------- | ------------------------------------------------------------- | | `urls_index` | None | `0` | Helper to render the list of urls, and access a specific item | | `analytics_countries_index` | None | `0` | Helper to render country analytics | | `analytics_devices_index` | None | `0` | Helper to render device analytics | Constant variables | Variable Name | Storage Type | Initial Value | Purpose | | ------------- | ------------ | ------------------------------- | ---------------------------------------- | | `ORIGIN_URL` | None | `https://short-url.wizedwp.com` | Save the Origin of the url shortener app | UI State management | Variable Name | Storage Type | Initial Value | Purpose | | --------------------------- | ------------ | ------------- | -------------------------------------------------------- | | `show_details_section_open` | None | `false` | state of the analytics details section, opened or closed | ![Variables Setup](../images/variables-setup.webp) ::: tip Learn More Check out the [Variables documentation](/data-store/variables) to learn how to create and configure Variables in Wized. ::: ## Step 3: Create Reusable Helper functions Reusable helper functions in Wized allow you to define custom JavaScript logic that can be called from any expression throughout your project. Example: For our URL shortener, we'll create a function called `get_random_string` that generates random alphanumeric strings for short codes. | Function Name | Parameters | Purpose | | ------------------- | ---------- | --------------------------------------- | | `get_random_string` | `n` | Generates a random string of length `n` | ```javascript // get_random_string function return Math.random().toString(36).slice(2, p.n); ``` This function is called when creating new short URLs: `Wized.functions.get_random_string({ n: 10 })` generates a unique 10-character code for each shortened link. Below are all functions used in this demo: | Function Name | Purpose | | ---------------------------- | ----------------------------------------------------------- | | `toggle_section` | Shows or hides a UI section (e.g., analytics details panel) | | `show_success_message` | Displays a success notification to the user | | `get_random_string` | Generates a random alphanumeric string of specified length | | `get_link_analytics_summary` | Returns aggregated analytics data for a shortened link | | `get_device_type_from_ua` | Parses the user agent string to determine device type | | `get_country_name` | Converts a country code to its full country name | | `get_country_flag` | Returns the flag emoji for a given country code | | `format_date` | Formats a date value into a human-readable string | | `enable_form` | Enables form inputs (e.g., after successful submission) | | `disable_form` | Disables form inputs (e.g., while a request is in progress) | ![Wized functions](../images/wized-functions.webp) ::: tip Learn More Check out the [Functions documentation](/functions/) to learn how to create and use reusable functions in Wized. ::: ## Step 4: Create Wized Requests Requests in Wized are how you communicate with external APIs. Each request defines an endpoint, method, headers, and body parameters. They can be executed from workflows or triggered by element interactions, and their responses can be stored in variables for use throughout your application. For our URL shortener app we need these requests ![Url Shortener Wized requests](../images/wized-requests.webp) ### Authentication Requests #### Sign Up Request Creates a new user account. | Property | Value | | -------- | ------------------- | | App | Xano Auth | | Props | `email`, `password` | | Method | POST | | Endpoint | `/auth/signup` | | Body | `email`, `password` | Values for body: ``` email = 'return p.email' password = 'return p.password' ``` #### Sign In Request Authenticates an existing user and returns a token. | Property | Value | | -------- | ------------------- | | App | Xano Auth | | Props | `email`, `password` | | Method | POST | | Endpoint | `/auth/login` | | Body | `email`, `password` | Values for body: ``` email = 'return p.email' password = 'return p.password' ``` #### Load User Data Request Fetches the current user's data using the stored token. | Property | Value | | ------------- | --------------------------- | | App | Xano Auth | | Method | GET | | Endpoint | `/auth/me` | | Authorization | Bearer Token from `v.token` | ### URL Management Requests #### Create Short URL Request Creates a new shortened URL. | Property | Value | | ------------- | ---------------------------- | | App | Xano Short Url | | Props | `url`, `title` | | Method | POST | | Endpoint | `/short_link` | | Authorization | Bearer Token from `v.token` | | Body | `url`, `title`, `short_code` | Values for the body: ``` email = 'return p.email' password = 'return p.password' short_code = 'return Wized.functions.get_random_string({ n:10 })' ``` #### Load User URLs Request Fetches all shortened URLs for the authenticated user. | Property | Value | | ------------- | --------------------------- | | App | Xano Short Url | | Method | GET | | Endpoint | `/short_link` | | Authorization | Bearer Token from `v.token` | #### Delete URL Request Deletes a shortened URL by ID. | Property | Value | | ------------- | --------------------------- | | App | Xano Short Url | | Method | DELETE | | Endpoint | `/short_link/${p.id}` | | Authorization | Bearer Token from `v.token` | | Props | `id` (URL ID to delete) | ## Step 5: Create Wized Workflows Workflows orchestrate multiple actions in sequence. Here are the key workflows: ### Sign In Workflow Handles user login and redirects to the dashboard. Name: `sign_in_workflow` Props: `email` and `password` ``` 1. Execute Request: sign_in (with form email & password) 2. Condition: Check if request succeeded ├─ Success: │ ├─ Set Variable: token = response.authToken │ ├─ Run Workflow: load_user_workflow │ └─ Navigate: /dashboard/ └─ Error: └─ Show error message (alert) ``` ![Sign In Workflow](../images/sign-in-workflow.webp) ### Sign Up Workflow Handles user registration and redirects to the dashboard. Name: `sign_up_workflow` Props: `email` and `password` ``` 1. Execute Request: sign_up (with form email & password) 2. Condition: Check if request succeeded ├─ Success: │ ├─ Set Variable: token = response.authToken │ ├─ Run Workflow: load_user_workflow │ └─ Navigate: /dashboard/ └─ Error: └─ Show error message (alert) ``` ![Sign Up Workflow](../images/sign-up-workflow.webp) ### Load User Workflow Fetches and validates the current user's authentication status. Name: `load_user_workflow` ``` 1. Execute Request: load_user 2. Condition: Check if request succeeded ├─ Success: │ └─ Set Variable: user_data = response.data └─ Error: └─ Run Function: Alert session expired, clear token & user_data ``` ![Load user workflow](../images/load-user-workflow.webp) ### Log Out Workflow Clears user session and redirects to sign-in page. Name: `log_out_workflow` ``` 1. Set Variable: token = null 2. Set Variable: user_data = null 3. Set Variable: user_links = [] 4. Navigate: /sign-in/ ``` ![Log Out Workflow](../images/log-out-workflow.webp) ### Load User URLs Workflow Fetches the authenticated user's shortened URLs. Name: `load_user_urls` ``` 1. Execute Request: load_user_urls 2. Set Variable: user_links = response.data 3. Set Variable: links_loading = false ``` ![Load User URLs Workflow](../images/load-user-urls-workflow.webp) ### Short URL Workflow Creates a new shortened URL with automatic title fetching. Name: `short_url` Props: `original_url` ``` 1. Run Function: disable_form 2. Execute Request: get_title (fetch page title from URL) 3. Execute Request: create_short_url (with original_url & fetched title) 4. Run Function: enable_form 5. Set Variable: user_links = [new_url, ...existing_urls] ``` ![Short URL Workflow](../images/short-url-workflow.webp) ### Delete URL Workflow Removes a URL and updates the list. Name: `delete_url_workflow` Props: `id` ``` 1. Execute Request: delete_url (with URL id) 2. Set Variable: user_links = filtered array (remove deleted item) ``` ![Delete URL workflow](../images/delete-url-workflow.webp) ### Require Authentication Workflow Redirects unauthenticated users to sign-in page. Name: `require_authentication_workflow` ``` 1. Condition: Check if token is missing ├─ No token: │ └─ Navigate: /sign-in/ └─ Has token: └─ Continue (no action) ``` ![Require Authentication Workflow](../images/require-authentication-workflow.webp) ### Redirect Authenticated Users Workflow Redirects already authenticated users away from auth pages. Name: `redirect_authenticated_users` ``` 1. Condition: Check if token exists ├─ Has token: │ └─ Navigate: /dashboard/ └─ No token: └─ Continue (no action) ``` ![Redirect Authenticated Users Workflow](../images/redirect-authenticated-users-workflow.webp) ::: tip Learn More Check out the [Workflows documentation](/workflows/) to learn how to create and configure Workflows in Wized. ::: ## Step 4: Configure Elements Elements connect your WordPress HTML to Wized's logic. Add the `wized` attribute to elements in WordPress, then configure them in Wized. For each element, you can configure visibility conditions, set dynamic values, define events. **Sign Out button example:** For the sign out button, we set visibility to `return v.user_data`, so it only shows when the user is loaded. ![Sign out button example](../images/sign-out-button-example.webp) ### Visibility examples | Element Name | Type | Configuration | | ----------------- | ------ | ------------------------------------------------------- | | `sign-in-button` | Button | Visibility: `return !v.user_data` (hide when logged in) | | `sign-out-button` | Button | Visibility: `return v.user_data` (show when logged in) | ### Text value example | Element Name | Type | Configuration | | ------------ | ---- | -------------------------------------------------------------------- | | `user-name` | Text | Text: `return v.user_data.name \|\| v.user_data.email.split('@')[0]` | ### Rendering a List of Items To render a list of items, select the container element that wraps each item. In this example, we render link items from the `user_links` variable. **Configuration:** 1. **Index Variable:** Create a variable (e.g., `urls_index`) to access individual items within the list 2. **List Value:** Set the render list expression to `return v.user_links` Elements inside the container can then reference the current item using the index variable, such as `v.user_links[v.urls_index]`. ![Render list example for shorted url](../images/shorted_url_render_list_example.webp) Now we render items, for example for the title, we setup text value `return v.user_links[v.urls_index].title` ![Element inside list](../images/element-inside-list-example.webp) ### Form submit and events | Element Name | Type | Configuration | | -------------- | ---- | ----------------------------- | | `url-form` | Form | Triggers `short_url` workflow | | `sign-in-form` | Form | Triggers `sign_in_workflow` | ![Short url example](../images/short-url-form-example.webp) ### Complete Elements Reference Below is a comprehensive table of all elements configured in the URL shortener demo: #### Authentication Elements | Element Name | Configuration Type | Configuration | | ----------------- | ------------------ | ------------------------------------------------------------------------ | | `sign-in-button` | Visibility | `return !v.user_data` | | `sign-out-button` | Visibility | `return v.user_data` | | `sign-out-button` | Event (Click) | Triggers `log_out_workflow` | | `sing-in-form` | Event (Submit) | Triggers `sign_in_workflow` with `email` and `password` from form fields | | `sing-up-form` | Event (Submit) | Triggers `sign_up_workflow` with `email` and `password` from form fields | | `user-name` | Visibility | `return v.user_data` | | `user-name` | Text | `return v.user_data.name \|\| v.user_data.email.split('@')[0]` | #### URL List Container | Element Name | Configuration Type | Configuration | | ----------------------- | ------------------ | ---------------------------------------------------------- | | `shorted_url_container` | List | Value: `return v.user_links`, Index Variable: `urls_index` | | `links-title` | Visibility | `return v.user_links.length>0` | | `links-loader` | Visibility | `return v.links_loading && v.user_links.length===0` | #### URL Item Elements | Element Name | Configuration Type | Configuration | | ----------------- | ------------------ | ----------------------------------------------------------------------------------------- | | `title` | Visibility | `return v.user_links[v.urls_index].title` | | `title` | Text | `return v.user_links[v.urls_index].title` | | `shorted_url` | Text | `` return `${v.ORIGIN_URL}/${v.user_links[v.urls_index].short_code}` `` | | `original_url` | Text | `return v.user_links[v.urls_index].original_url` | | `link-created-at` | Text | `return Wized.functions.format_date({time:\`${v.user_links[v.urls_index].created_at}\`})` | #### URL Actions | Element Name | Configuration Type | Configuration | | --------------- | ------------------ | ----------------------------------------------------------------------------- | | `url-form` | Event (Submit) | Triggers `short_url` workflow (condition: `return !w.short_url.isRunning`) | | `copy-url` | Event (Click) | Copies short URL to clipboard using `navigator.clipboard.writeText()` | | `go-to-url` | Event (Click) | Opens short URL in new tab: `window.open(\`${v.ORIGIN_URL}/...\`, '\_blank')` | | `remove-button` | Event (Click) | Triggers `delete_url_workflow` with `id` from `v.user_links[v.urls_index].id` | #### Analytics Elements | Element Name | Configuration Type | Configuration | | ------------------------ | ------------------ | ------------------------------------------------------------------------------------ | | `visits-count-text` | Text | `` return `${v.user_links[v.urls_index].analytics.length} visits` `` | | `show-details` | Text | Returns `'Hide details'` or `'Show details'` based on `v.show_details_section_open` | | `show-details` | Event (Click) | Toggles section visibility and loads analytics summary via `toggle_section` function | | `extra-analytics` | Visibility | `return v.user_links[v.urls_index].id === v.show_details_section_open` | | `locations-section-item` | List | Value: `return v.analytics.top_countries.slice(0,5)`, Index: `analytics_list_index` | | `locations-section-item` | Text | Returns formatted country with flag and count using `get_country_name` function | | `devices-section-item` | List | Value: `return v.analytics.devices`, Index: `analytics_devices_index` | | `devices-section-item` | Text | `` return `${v.analytics_devices_index + 1}. ${item.name} (${item.count})` `` | ## Step 6: Set Up Global Events Global events trigger workflows on specific pages when certain conditions are met. ### Dashboard Page Load When the dashboard page loads, we trigger the `load_user_urls` workflow to fetch and display the user's shortened URLs. ![Load event example](../images/load-urls-event.webp) Other events on this project: | Event Name | Type | Configuration | | ------------------------------ | -------------------------------- | ------------------------------------------------ | | `Redirect authenticated users` | Page starts loading (Auth Pages) | Triggers `redirect_authenticated_users` workflow | | `Dashboard Check auth` | Page starts loading (Dashboard) | Triggers `require_authentication_workflow` | ## Summary By following these steps, you've connected: 1. **WordPress** → Provides the visual structure with Wized attributes 2. **Wized** → Manages all dynamic behavior, data binding, and API calls 3. **Xano** → Handles authentication, database storage, and business logic 4. **Redirect Service** → Handles short URL redirects and click tracking The result is a fully functional URL shortener where users can sign up, log in, create shortened URLs, view their links, and delete them, all without writing complex code in WordPress.   # WordPress Setup This page describes the WordPress pages we created for the URL Shortener product demo. ## Pages Created For the URL Shortener product, we set up the following pages in WordPress: ### 1. Dashboard Page The main page where users can shorten URLs, view their links, and track click statistics. **URL:** `/dashboard` **Purpose:** Display and manage all shortened URLs created by the user ![Dashboard Page](../images/dashboard-page.webp) > **Note:** We render all static elements that will be used by Wized to make them dynamic. In this case, we render the Link Item, analytics, and loader components statically, then Wized manages showing, hiding, or loading the dynamic content based on the data fetched from the backend. ### 2. Home/Landing Page The public homepage that introduces the URL shortener functionality. **URL:** `/` **Purpose:** Marketing and entry point for the application ![Home Page](../images/home-page.webp) ### 3. Sign In / Sign Up Pages Used for authenticating users with the Xano backend ![alt text](../images/sign-in-page.webp) ![alt text](../images/sign-up-page.webp) ## Setting up Wized Attributes When you need dynamic functionality with Wized, such as rendering a list of components, showing or hiding elements based on conditions, or managing form submissions, you add the `wized` attribute to HTML elements. For example, to render links fetched from Xano, add `wized="shorted_url_container"` to the static container inside WordPress/Elementor. ![Shorted URL Container](../images/link-item-container.webp) ### Other Attribute Examples | Attribute | Element | Purpose | | ------------------------ | --------- | ------------------------------------------------------------------------- | | `wized="sign-in-button"` | Button | Dynamically show or hide the button based on user authentication status | | `wized="username"` | Paragraph | Dynamically display the authenticated user's username or hide the element | | `wized="url-form"` | Form | Handle form submission functionality | Below you can see all the Wized attributes used in this demo displayed on Wized dashboard: ![Dashboard attributes](../images/dashboard-attributes.webp) ## How It Works 1. **WordPress** provides the page structure and HTML elements with Wized attributes 2. **Wized** identifies the attributes and manages the dynamic functionality 3. **Xano** provides API endpoints and database management for authentication and URL storage ## Next Step Continue to the Xano setup guide to learn how the backend API and database are configured: - [Setting up Xano](./xano.md)   # Xano setup ## Step 1: API Setup We'll first set up our API in Xano to manage authentication and URL shortening. This involves creating the database schema and API endpoints that handle user registration, login, and all URL shortener operations. The API will provide secure endpoints for managing authentication tokens and CRUD operations on shortened URLs with analytics integration. ## Database Tables The Xano backend uses three core tables: **user** - Stores user account information including name, email, and password for authentication. **short_link** - The main table for URL shortcuts, containing the original URL, generated short code, title, and the user ID of the creator with a timestamp for when it was created. **click_analytic** - Tracks analytics for each short link click, recording the IP address, geographic location, browser type, and the associated short link ID to measure engagement. ![Xano tables](../images/xano-tables.webp) ## Xano Authentication The authentication system consists of three key endpoints: **1. <span style="color: green;">POST</span> auth/login** - Authenticates existing users with email and password, returning an authentication token for subsequent requests. **2. <span style="color: green;">POST</span> auth/signup** - Creates new user accounts and returns an authentication token, accepting email, password, and name as inputs. **3. <span style="color: lightblue;">GET</span> auth/me** - Retrieves the current user's profile information using the authentication token, used to verify the user session. ![alt text](../images/xano-auth.webp) ## URL Shortener Endpoints The URL shortener service provides three main endpoints: ![Url shortener endpoints](../images/url-shortener-endpoints.webp) **1. <span style="color: lightblue;">GET</span> short_link** - Query all short links for the authenticated user, joining with the click_analytic table to include analytics data. This endpoint filters results using `short_link.user_id == $auth.id` to show only the current user's links along with their click statistics. ![Short links list](../images/short-links-query-current-user.webp) **2. <span style="color: green;">POST</span> short_link** - Create a new short link record, storing the original URL, generated short code, title, and associating it with the authenticated user. **3. <span style="color: red;">DELETE</span> short_link/{short_link_id}** - Delete a short link record (private endpoint). ## Helper Service: Track Click Endpoint ### POST /track_click This helper endpoint is called by the Hono proxy service to handle URL redirections. It accepts the short link identifier along with click analytics data: **Inputs:** - `identifier` - The short code of the URL (text) - `ip` - The visitor's IP address (text) - `location` - The geographic location of the click (text) - `browser` - The browser information of the visitor (text) **Process:** 1. Retrieves the short_link record using the identifier ![Get record](../images/track-click.webp) 2. Creates a new click_analytic record with the provided tracking data and links it to the short_link ![Add record](../images/track-click-add-record-in.webp) 3. Returns the original URL for the proxy to redirect to **Response:** - `redirect_url` - The original URL to redirect the visitor to This endpoint enables seamless tracking of all clicks while maintaining a clean redirect experience for end users. ## Next Step Now that the Xano backend is configured, proceed to the Wized setup guide to connect your frontend with these API endpoints. [Connecting Everything with Wized →](./wized.md)   # Introduction ## What is Wized? Wized is a powerful visual development platform that allows you to add dynamic functionality to your websites without writing complex code. It bridges the gap between static website designs and fully functional web applications by providing a visual interface to connect your frontend elements to backend services, APIs, and databases. For WordPress users, Wized opens up a world of possibilities beyond what traditional plugins offer. Instead of being limited to pre-built plugin functionality, you can create custom solutions tailored to your exact needs. Wized handles the logic, data fetching, and interactivity while you maintain full control over your WordPress design and content. ## What Can You Build with Wized + WordPress? The combination of WordPress and Wized is incredibly powerful. You can transform your WordPress site into a fully dynamic web application. Here are some examples of what you can create: **Membership Portals & Dashboards** - Build user dashboards that display personalized data from external services like Airtable, Supabase, or Firebase. Create member-only areas with dynamic content that updates based on user permissions, subscription status, or activity history. **E-commerce Extensions** - Extend WooCommerce functionality with custom product configurators, real-time inventory displays from external systems, dynamic pricing calculators, or integrate with third-party fulfillment and CRM services. Build custom checkout flows that connect to any payment processor or backend system. **Dynamic Directories & Listings** - Create searchable directories with advanced filtering, real-time search, and data pulled from external databases. Perfect for job boards, real estate listings, business directories, or any content that needs powerful search and filter capabilities beyond what WordPress offers natively. **Forms & Multi-Step Workflows** - Build sophisticated multi-step forms with conditional logic, real-time validation, and data that saves to any backend service. Create booking systems, application processes, or onboarding flows that integrate with your existing tools and databases. **Custom Integrations** - Connect your WordPress site to virtually any API or service. Display live data from CRMs, project management tools, analytics platforms, or any service with an API. Automate workflows between your website and external services without relying on Zapier or similar tools.   # Integration ## Prerequisites Before you begin, make sure you have: - A WordPress website with admin access - A Wized account - Access to your WordPress theme files or a plugin that allows adding custom scripts ## Creating a Wized Project From the Wized dashboard, click **New Project** in the top right corner. 1. Paste the staging domain of your WordPress site. ![Creating new project](./images/create-new-project.webp) 2. The name and platform will be automatically detected. You can change the name if needed. If the system fails to detect the platform, select **WordPress** manually. 3. Copy the generated code at the bottom to add to your WordPress site. This step is optional for testing and can be done later. To add custom code, you can either edit your theme files directly or use a plugin like [Elementor](https://elementor.com/) to manage custom scripts. ## Using Elementor to Integrate Wized 1. Go to your WordPress admin dashboard. 2. In the left sidebar, click **Elementor**. 3. Hover over **Editor**, then click **Tools**. ![Elementor tools](./images/elementor-tools.webp) 4. In the Elementor left panel, click **Code**. 5. In the top right corner, click **Add New**. 6. Paste the Wized script, enter a name for it, and set the location to **Head** with priority **1**. ![Wized script](./images/paste-wized-scripts.webp) ![Elementor Custom Code](./images/elementor-custom-code.webp)   # Wized Cloak attribute When loading dynamic data, it's essential to hide static content or display a loading state until Wized finishes loading and initialization. ## Using Wized Cloak Add the `wized-cloak` attribute to elements you want to hide during the loading phase. Then, add CSS to hide these elements initially. Wized will automatically show them once fully loaded: This example hides elements with `wized-cloak` on the live site while keeping them visible in the Elementor editor: ```css html:not(.elementor-html) [wized-cloak] { display: none !important; } ```   # WordPress Plugin Releases The Wized WordPress plugin is a companion plugin that adds server-side functionality to your WordPress site. It is required for specific Wized features that cannot be handled through the standard WordPress REST API alone. ::: info Required for - [Send Email Verification](/requests/wordpress/methods/authentication/send-email-verification/) — sends a verification email to confirm a user's email address - [Verify Email](/requests/wordpress/methods/authentication/verify-email/) — verifies a user's email using the token from the verification link - **ACF field filtering** — enables filtering posts by Advanced Custom Fields values ::: ## Installation 1. Download the `.zip` file from the release you want below. 2. In your WordPress admin, go to **Plugins → Add New → Upload Plugin**. 3. Select the downloaded `.zip` file and click **Install Now**. 4. Click **Activate Plugin**. --- ## v1.0.0 **Released:** March 2, 2026 <a href="https://wordpress-plugin-releases.wized.com/wized_1.0.0.zip" class="wp-download-btn" download="wized_1.0.0.zip">↓ Download v1.0.0</a> ### Changes - Added Wized metadata to WordPress users to support the email verification flow. - Enabled post filtering by ACF (Advanced Custom Fields) field values. --- <style> .wp-download-btn { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.75rem 0 1.25rem; padding: 0.5rem 1.25rem; background-color: var(--vp-c-brand-1); color: var(--vp-c-white) !important; border-radius: 6px; font-size: 0.875rem; font-weight: 600; text-decoration: none !important; transition: background-color 0.2s; } .wp-download-btn:hover { background-color: var(--vp-c-brand-2); } </style>   > [!NOTE] > To use this method, you will need to enable authentication in the App configuration   # Airtable Requests ## What is an Airtable Request? <iframe width="100%" height="400" src="https://www.youtube.com/embed/JsF0woyUWbg?si=jKJ03S_KdYK1mR3D" frameborder="0" allowfullscreen></iframe> An Airtable request is a way to integrate your Application with Airtable. You can retrieve data, create new records, update existing ones, or delete information with Airtable as your backend database. You can use Airtable to just fetch data without any authentication like in public blogs, or you can use authentication build by Wized so users can create account, sign in, read and write data based on permission setup in Wized configurator. To create airtable requests you will need to first create an Airtable Wized App. ## How to Create Airtable App ### 1. Go to My Apps Begin by going to the 'My Apps' panel in Wized. 1. Click the `+` button at the top of the panel. 2. Add a name for your app for later reference, i.e. `Airtable App`. 3. Pick the `Airtable` option. ![Adding an Airtable App to my apps](my-apps.png) 4. Connect Airtable using OAuth and select bases you want to use with this app 5. Click "Add base" and select Airtable Base 6. Click "Grant access" and wait for the authorization ![Connect Airtable Oauth Popup](wized-airtable-connect-popup.png) ### 2. Configure your request #### Create a new request, and add basic info - Name your request i.e. `get_blog_posts` - Add your request to a folder (optional) - Select your Airtable App from the dropdown ![Adding basic info to our request](airtable-request.png) #### Select method You will need to select one of the methods for a specific functionality - [Create user](./methods/authentication/create-user/index.md) Create a user with specified email and password and store in the table you selected in app configuration - [Login user](./methods/authentication/login-user/index.md): Login a user with email and password - [Load user](./methods/authentication/load-user/index.md): Load authenticated user - [Logout user](./methods/authentication/logout-user/index.md): Sign out currently authenticated user - [Delete user](./methods/authentication/delete-user/index.md): Delete currently authenticated user - [Request password reset](./methods/authentication/request-password-reset/index.md): Request password reset - [Password reset](./methods/authentication/password-reset/index.md) Reset password with new password - [Get item](./methods/data/get-item/index.md): Get Airtable Record item - [Get list items](./methods/data/get-list-items/index.md): Get Airtable Record list of items - [Create item](./methods/data/create-item/index.md): Create Airtable Record - [Update item](./methods/data/update-item/index.md) Update Airtable Record - [Delete item](./methods/data/delete-item/index.md): Delete Airtable Record ### 3. User authentication If you want to have an authentication system on your app, you just need to check "Enable authentication" in the app configuration ![Enable authentication](enable-user-authentication.png) <a id="airtable_user_info_base"></a>Select Base from which you want to store and retrieve users <a id="airtable_user_info_table"></a>Select table from which you want to store and retrieve users <a id="airtable_user_info_email_password"></a>In the selected table you will need to have two fields, email, email verified and password Select email, email verified and password fields and you are ready to go. Go to the Requests panel and start configuring your request.   ## Create user method With "Create User" method, you can implement sign-up functionality in your application. Users will be saved in the Base and table you selected in the [App configuration](../../../index#how-to-create-airtable-app). - All passwords will be encrypted!  ### Parameters - Email: This is a required [function field](../../../../../function-editor/index.md) where you can return the user's email. - Password: This is a required function field where you can input the user's password. - Page: This is an optional function field where you can input the URL of the page to which you want to redirect the user after successful sign-up. - Auto Login: This is a checkbox field that lets Wized know if you want to automatically sign in the new user or not. ![User Create Method](user-create-method.png)   ## Delete user method With "Delete User" method, you can implement delete user functionality in your application. User will be deleted from the Base and table you selected in the App configuration.  ![User delete Method](delete-user.png)   ## Load user method With "Load User" method, you can fetch current authenticated user! This usually need to be done when app loads the first time, then you can save that on app state! Users will be retrieved from the Base and table you selected in the App configuration.  ### Parameters - Page: Page url to redirect after loading the user. ![User Load Method](load-user-method.png)   ## Login user method With "Login User" method, you can implement sign-in functionality in your application. Users will be retrieved from the Base and table you selected in the App configuration.  ### Parameters - Email: This is a required [function field](/function-editor/) where you can input the user's email. - Password: This is a required function field where you can input the user's password. - Page: This is an optional function field where you can return the URL of the page to which you want to redirect the user after successful login. ![User Login Method](login-user-method.png)   ## Login with magic link method With "Login with magic link" method, you can implement passwordless sign in functionality in your application. You will first need to use ["Send magic link"](../send-magic-link/index) method to send the link to the email. This method will get access token from the link that is build from "Send magic link" method and will login user!  ### Parameters - Redirect url: This is an optional [function field](../../../../../function-editor/index.md) where you can redirect user after successful sign in! ![Login with magic link method](login-with-magic-link.png)   ## Logout user method With "Logout User" method, you can implement logout functionality in your application. This will clear the current user data from the application state and you can redirect user with page param to the page you want!  ### Parameters - Page: Page to redirect after logout! ![User Logout Method](logout-user-method.png)   ## Password reset method With "Password reset" method, you can implement password reset functionality in your application. After user click on the link from email that is sent from "Request password reset" method, user will need to be redirected in this page and query params will be added to the page. This need to be called after user will write the new password in the input fields in the page.  ### Parameters - New Password: This is a required [function field](/function-editor/) where you can return user's submitted new password. ![Password reset method](password-reset-method.png)   ## Request password reset method With "Request password reset" method, you can implement password reset functionality in your application. An email with reset link will be sent to the user email that is returned from email param function.  ### Parameters - Email: This is a required [function field](/function-editor/) where you can return user's email. - Redirect url: This is a required function field where you can return the page url in which user will input the new password. ![Request password reset method](request-password-reset-method.png)   ## Send email verification link method With "Send email verification link" method, you can implement email verification in your application. This method will send a verify link to the user email and after user go to that link, you will need to call "Verify email" method to verify the email.  ### Parameters - Email: This is a required [function field](/function-editor/) where you can return user's submitted email. - Redirect url: This is a required [function field](/function-editor/) where you can return the url of the page in which you plan to redirect user from email. ![Send email verification link method](send-email-verification-link.png)   ## Send magic link method With "Send magic link" method, you can implement passwordless sign in functionality in your application. This method will send a login link to the user email and after user go to that link, you will need to use the "Login with magic link" method to login user to your application.  ### Parameters - Email: This is a required [function field](/function-editor/) where you can return user's submitted email. - Redirect url: This is a required [function field](/function-editor/) where you can return the url of the page in which you plan to redirect user from email. ![Send magic link method](send-magic-link-method.png)   ## Verify email method With "Verify email" method, you can implement last step of email verification functionality in your application. This method will get access token from the link that is build from "Send email verification link" method and will verify the email!  ### Parameters - Redirect url: This is an optional [function field](/function-editor/) where you can redirect user after successful email verification! ![Verify email method](verify-email-method.png)   ## Create item method With "Create item" method, you can create a record from the specified Base and Table. ### Main Parameters - Base: This is a required dropdown field where you can select the base you want to create the record into. - Table: This is a required dropdown field where you can select the table you want to get the record into. ![Create item method](create-item-method.png) ### Permissions You can select who can create record You can select from: - Allow Any: Any user can create a record - Authenticated: Any authenticated user can create record - Owner: Authenticated user can create the record, and user id will be stored into record. If you select this option, you will need to select also the field in which you will store user id ![Owner permissions](../../../owner-permissions.png) ### Fields Airtable fields will be listed as function fields, in which you will need to specify for each one what value will be returned.   ## Delete item method With "Delete item" method, you can delete an existing record from the specified Base and Table. ### Main Parameters - Base: This is a required dropdown field where you can select the base you want to delete existing record from. - Table: This is a required dropdown field where you can select the table you want to delete existing record from. - Record ID: This is an required function field where you can return the record id that you want to delete. ![Delete item method](delete-item-method.png) ### Permissions You can select who can delete record You can select from: - Allow Any: Any user can delete the record - Authenticated: Any authenticated user can delete the record - Owner: Authenticated user can delete the record if the user id field value will match with authenticated user. If you select this option, you will need to select also the field in which you will store user id > [!NOTE] > In most cases you need to select Owner here, so only users that created the record can also delete it. ![Owner permissions](../../../owner-permissions.png)   ## Get item method With "Get item" method, you can retrieve a single airtable record from the specified Base and Table. ### Main Parameters - Base: This is a required dropdown field where you can select the base you want to get the record from. - Table: This is a required dropdown field where you can select the table you want to get the record from. - Record ID: This is an required function field where you can return the record id that you want to retrieve. - Limit fields to: This is an optional multi select dropdown field in which you can select fields that you want to retrieve. ![Get item method](get-item-method.png) ### Permissions You can select who can retrieve this record You can select from - Allow Any: Any user can retrieve this record - Authenticated: Any authenticated user can retrieve this record - Owner: Only the user that created this record can retrieve it - If you select Owner, you will need to select also the field in which the user id is stored ![Owner permissions](../../../owner-permissions.png)   ## Get list items method With "Get list items" method, you can retrieve and filter multiple records from the specified Base and Table. ### Main Parameters - Base: This is a required dropdown field where you can select the base you want to get items from - Table: This is a required dropdown field where you can select the table you want to get items from - Limit fields to: This is an optional multi select dropdown field in which you can select fields that you want to retrieve. - View: This is an optional required dropdown field where you can select the view you want to get items from ![Get list items method](get-list-items.png) ### Permissions You can select who can retrieve the data You can select from: - Allow Any: Any user can retrieve the data - Authenticated: Any authenticated user can retrieve the data - Owner: Only records that user field value will match with currently authenticated user id will be retrieved - If you select Owner, you will need to select also the field in the user id is stored > [!NOTE] > In most cases you need to select Owner here, so only users that created the records can also retrieve them. ![Owner permissions](../../../owner-permissions.png) ### Filter Parameters You can add multiple filters and each filter will need to have params: - Include record if: This is a required dropdown field in which you will need to select table field to apply filter to - Condition: This is a required dropdown filed with values Equals, Does not equal, Includes, Does not include - Value: This is a required function field, in which you will need to select the value to test with condition ![Filtering](get-list-items-filtering.png) ### Filtering Records Based on Reference Fields To filter records based on a reference table field, you need to create a lookup field for that table and select the field you want to filter with. _Figure 1: Example of a reference field_ ![Reference Field](get-list-reference-fields-filtering.png) _Figure 2: Configuration of a reference field for filtering_ ![Reference Field Configuration](get-list-reference-fields-filtering-config.png) ### Pagination Parameters You can paginate airtable records result with following params: - Page size: The number of records returned in each request. Must be less than or equal to 100. Default is 100. - Offset: To fetch the next page of records, include offset from the previous request in the next request parameters. - Max records: The maximum total number of records that will be returned in your requests. If this value is larger than pageSize (which is 100 by default), you may have to load multiple pages to reach this total. ![Pagination](get-list-pagination.png) ### Sort Parameters You can add multiple sort conditions and each condition will need to have params: - Sort by: This is a required dropdown field in which you will need to select table field to apply sorting - Order: This is a required dropdown filed with values Ascending, Descending ![Sorting](get-list-sorting.png)   ## Update item method With "Update item" method, you can update an existing record from the specified Base and Table. ### Main Parameters - Base: This is a required dropdown field where you can select the base you want to update existing record. - Table: This is a required dropdown field where you can select the table you want to update existing record. - Record ID: This is an required function field where you can return the record id that you want to update. ![Create item method](update-item-method.png) ### Permissions You can select who can update record You can select from: - Allow Any: Any user can update a record - Authenticated: Any authenticated user can update record - Owner: Authenticated user can update the record if the user id field value will match with authenticated user If you select this option, you will need to select also the field in which you will store user id > [!NOTE] > In most cases you need to select Owner here, so only users that created the record can also update it. ![Owner permissions](../../../owner-permissions.png) ### Fields Airtable fields will be listed as function fields, in which you will need to specify for each one what value will be returned.   # Creating a request **Requests** allow your project to communicate with external web services through APIs. Before creating a request, you need to have an [app](/apps/) set up. An app acts as an integration and can be either a **native integration** (prebuilt by Wized) or a **REST integration** (fully customizable). ## Creating requests for native apps If you are using a **native integration**, Wized provides predefined methods that simplify request creation. Currently, Wized offers native integrations with `Supabase, Memberstack, Firebase, and Airtable`. These services primarily handle databases and authentication. ### Steps to create a native request 1. Navigate to the left sidebar and click on `Requests`. This opens the **requests panel**. 2. If you have existing requests, they will be listed here. To create a new one, click on the **`+`** icon in the top-right corner. 3. In the right panel, configure the request by: - Naming the request. - Selecting the **app**. ![name-app-overview](name-app-overview.png) 4. Once the app is selected, configure the request using a series of dropdown menus: - Choose the **method** from the available options. The available methods depend on the selected integration and may include actions like: `Get List Items`, `Get Item`, `Login`, `Create Item`, `Sign In`, `Update Profile`, `Get User`. ![native-request-methods](native-request-methods.png) - Depending on the selected method, a set of inputs will appear. For example :::tip Note To see all the available methods, go to the documentation of the native integration of your choice ::: **Example** if you are configuring a **login** request, you will need to provide the **email** and **password** fields. ![login_request_example](login_request_example.png) ::: info Note Wized does not handle authentication itself; it simply facilitates the necessary API calls based on the chosen method. ::: --- ## Creating REST requests If you need to interact with a third-party service that is not covered by Wized’s native integrations, you can create a **REST API request**. ### Steps to create a REST request 1. Navigate to the left sidebar and click on `Requests`. 2. Click on the **`+`** icon to create a new request. 3. In the right panel, configure the request by: - Naming the request. - Selecting **REST** as the app. 4. Once REST is selected, manually configure the request: - Choose the **HTTP method** (`GET`, `POST`, `PUT`, `PATCH`, `DELETE`). - Set the **endpoint URL** (only the relative path, as the base URL was already configured when creating the app). - Define **parameters, headers, and body** using key-value pairs: - The **key** is a fixed text string (e.g., `Authorization`, `Content-Type`, `userId`). - The **value** can be set using Wized’s [function editor](/function-editor/), allowing you to use real-time data from: `Cookies, Variables, Request responses, URL parameters, among others` ::: info Note To properly configure REST requests, refer to the API documentation of the service you want to integrate. There, you'll find details about endpoints, parameters, headers, and the required request body. ::: ## Next steps Now that you have created your request, the next step is to **trigger** and **use** the request inside your project. You can execute requests based on [user interactions](/elements/events) or [global events](/global-events/).   # Confirm Password Reset The `Confirm password reset` method is used to set a new password for a user existing in your Firebase app. It requires an `OOB Code` that is obtained by first [sending a password reset email to the user](../send-password-reset/index.md). To make a request to confirm a password reset, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Confirm password reset`. 3. Provide the new `Password` and the `OOB Code` received from the [Send password reset email](../send-password-reset/index.md), usually through the page query parameters. ![Confirm password reset Firebase](confirm_password_reset_1.png)   # Create Item The `Create Item` method enables you to add a document to a collection in your Firebase Cloud Firestore. To create a request to add a document to a collection, follow the steps below: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Create Item`. ![Create Item Firebase](create_item_1.png) 3. Under the `Path`, fill in the full path to the collection in your Cloud Firestore database. ![Create Item Firebase](create_item_2.png) 4. Add the data of the new document to be added in key-value pairs. ![Create Item Firebase](create_item_3.png)   # Delete File The `Delete file` method is used to delete files from your Firebase Cloud Storage. To make a delete file request, follow these steps: 1. First, ensure you have Cloud Storage set up on your Firebase app. 2. Make sure that the Storage Bucket is defined in your [Firebase App integration](../index.md#adding-an-app-to-your-project-in-the-firebase-console). 3. Open the request panel and click on the `+` button to add a new request. 4. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Delete file`. 5. Scroll down to fill in the storage path of the file you want to delete. ![Delete file Firebase](delete_file_firebase.png)   # Delete Item The `Delete Item` method allows you to delete a specific document or an entire collection from your Cloud Firestore. To create a request to delete a document or collection, follow the steps below: 1. Open the request panel and click on the `+` button to add a new request. 2. Provide an appropriate name for the request and select the Firebase app to be used for the request. Then, choose `Delete Item` as the method. 3. In the `Path` field, enter the full path to the document or collection in your Cloud Firestore database. ![Delete Item Firebase](delete_item_1.png)   # Get File URL The `Get File URL` method is used to obtain the full public-facing URL paths to your file in Cloud Storage in Firebase. To make a request to get the file URL, follow these steps: 1. First, ensure you have Cloud Storage set up on your Firebase app. <video src="https://media.wized.com/docs-v2/upload_file_1.mp4" controls loop muted title="Create Cloud Storage in Firebase"></video> :::info NOTE The clip starts with the project in test mode - this isn't secure. You'll need to update the Firebase rules. ::: 2. Make sure that the Storage Bucket is defined in your [Firebase App integration](../index.md#adding-an-app-to-your-project-in-the-firebase-console). 3. Open the request panel and click on the `+` button to add a new request. 4. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Get File URL`. 5. Scroll down to fill in the bucket name and storage path of the file. You can then choose whether to download it or just display it. ![Get File URL Firebase](get_file_url_1.png)   # Get Item The `Get Item` method allows you to fetch a specific document from your Cloud Firestore. To create a request to get an item, follow the steps below: 1. Open the request panel and click on the `+` button to add a new request. 2. Provide an appropriate name for the request and select the Firebase app to be used for the request. Then, choose `Get Item` as the method. 3. <a name="firestore-path"></a>Fill in the full path to the document in your Cloud Firestore database under the `Path` field. ![Get Item Firebase](get_item_1.png) ::: info NOTE In most cases, the Get Item request requires the document ID at the end of the path. :::   # Get items list The `Get items list` method allows you to fetch a collection from your Cloud Firestore. To create a request to get a collection, follow the steps below: 1. Open the request panel and click on the `+` button to add a new request. 2. Provide an appropriate name for the request and select the Firebase app to be used for the request. Then, choose `Get items list` as the method. ![Get Item list Firebase](get_list_1.png) 3. Fill in the full path to the collection in your Cloud Firestore database under the `Path` field. ![Get Item list Firebase](get_list_2.png) The `Limit items` field is optional, but for much larger collections, we do advise using it. The `Subscribe realtime` checkbox allows you to listen to your data and receive real-time updates. 4. (Optional) If you want to filter, you can provide a field path to filter by, as well as the criteria to filter by. In the screenshot below, we are filtering by the `name` field path, and we only want those matching the value `John Doe` to be returned. ![Get Item list Firebase](get_list_3.png) 5. (Optional) If you want to sort, you can provide a field path to sort by, as well as the direction to sort by. In the screenshot below, we are sorting by the `name` field path in ascending order. ![Get Item list Firebase](get_list_4.png) 6. (Optional) To paginate your results, you can use one of the following methods: a. Start After Use this method to begin pagination after a specific value. ![Get Item list start after Firebase](get_list_pagination_start_after.png) b. Start At Use this method to begin pagination at a specific value. ![Get Item list start after Firebase](get_list_pagination_start_at.png) c. Multiple Fields Pagination To paginate with multiple fields, specify sort by for the fields you want, and define the starting point as a list. ![Get Item list multiple fields](get_list_pagination_multiple.png)   # Get User The `Get User` method is used to retrieve the details of the currently logged-in user using Firebase. To make a request to get a user, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Get user`. ![Get User Firebase](get_user_1.png)   # Firebase Requests Wized has a native Firebase integration, which makes it easy to make requests to your Firebase app to perform CRUD operations on Cloud Firestore. Firebase is a popular Backend-as-a-Service (BaaS) that provides a real-time database. It is a NoSQL database that stores data in JSON-like documents. <iframe width="100%" height="400" src="https://www.youtube.com/embed/5qJQF_SubAE?si=ujqoh4khUSYEsMR3" frameborder="0" allowfullscreen></iframe> <iframe width="100%" height="400" src="https://www.youtube.com/embed/SgDDoe-GHOc?si=oAx4ycoNXF1pbTMv" frameborder="0" allowfullscreen></iframe> ## How to get started? ### Creating a project in the Firebase console To start using Firebase, first, you need to create a project in [the Firebase console](https://console.firebase.google.com/). You'll see a screen similar to the one below. ![Firebase console](./introduction_2.png) Click on the `Add Project` button and follow the on-screen prompts. Not much customization is needed for this sample app, so just clicking on continue for all steps with the default settings will be okay. ### Adding an app to your project in the Firebase console After successfully creating a project, you'll be presented with this screen where we should add our app. ![Firebase console successful project creation](./introduction_5.png) Since what we are building is a web app, we will click on the `</>` button, which will give us a set of credentials to use in Wized. You'll then give it an appropriate name, and on the step of adding the Firebase SDK, we will choose to do so via script tags. <video src="https://media.wized.com/docs-v2/introduction_1.mp4" controls loop muted title="Adding an app to Firebase project"></video> <a id="firebase_config"></a>Copy the `firebaseConfig` values for use in setting up the Firebase app in Wized. ![Firebase console config](./introduction_4.png) ### Setting up Firebase in the Wized configurator In the Wized configurator, go to `My Apps`, then click on the `+` button to add an app. Give the app an appropriate name, and under the `App` option, choose `Firebase`. Next, transfer the data from the Firebase config copied earlier onto Wized. If you lost access to the Firebase config, you can always [find it in the Firebase project settings](https://support.google.com/firebase/answer/7015592). The final result will be as below: ![Firebase console](./introduction_3.png) ### Creating Cloud Firestore After creating an app, we'll need to add a database to store our data, and that is where Cloud Firestore comes into play. Check out an example below of creating the Cloud Firestore and manually adding a document to it. <video src="https://media.wized.com/docs-v2/introduction_6.mp4" controls loop muted title="Adding Cloud Firestore"></video> ### Securing your database Firebase implements security rules to protect your data. It is very important that you take the time to understand how to write these rules to ensure your data is secure. Otherwise, anyone can potentially read or write to your database. Check out the [Firebase documentation](https://firebase.google.com/docs/firestore/security/get-started) for more information.   # Send Password Reset The `Send password reset` method is used to send an email to an existing user in Firebase for password resetting. To make a request to send a password reset email, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Send password reset`. 3. Under the Email menu, fill in the email (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)). ![Send password reset Firebase](send_password_reset_1.png)   # Send Verification Email method The `Send verification email` method is used to send an email to signed in user for email verification. To make a request to send an email verification, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Send verification email`. ![Send verification email](send-verification-email.png)   # Set Item The `Set Item` method works similarly to the [Create Item](../create-item/index.md) method but performs upserting instead. If the document already exists, the `Set Item` method will overwrite the existing document with the new data provided or merge the new data with the existing data in the document, depending on whether the `Merge Fields` option is active. If the document does not exist, the `Set Item` method will create a new document with the provided data. ## Example Request 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Set Item`. ![Set Item Firebase](set_item_1.png) 3. Under the `Path`, fill in the full path to the document in your Cloud Firestore database. ![Set Item Firebase](set_item_4.png) 4. Fill in the key-value pairs with the data to be set. ![Set Item Firebase](set_item_3.png)   # Sign in with email and password The `Sign in with password` method is used to authenticate an existing user to your application using the traditional format of providing an email and a password. To make a request to sign in a user using an email and password, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign in (email + password)`. ![Sign in Firebase](sign_in_1.png) 3. Scroll downwards under the Email menu, fill in the email (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)), and then fill in the password. ![Sign in Firebase](sign_in_2.png)   # Sign in with OAuth provider The `Sign in with provider` method is used to authenticate a user to your site using a widely used third-party application providing OAuth. To make a request to authenticate a user using OAuth, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign in with OAuth`. ![Sign in with OAuth Firebase](sign_in_1.png) 3. Scroll downwards to select the provider and add a redirect URL. ![Sign in with OAuth Firebase](sign_in_2.png) 4. Add the scopes required for your app. ![Sign in with OAuth Firebase](sign_in_3.png) :::info NOTE **Scopes** vary widely based on the provider used, and each provider has a sample of scopes on their respective documentation. An example is Facebook's scopes listed here: [https://developers.facebook.com/docs/permissions](https://developers.facebook.com/docs/permissions) :::   # Sign Out The `Sign Out` method is used to log out an authenticated user using Firebase. To make a request to sign out a user, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Sign Out`. 3. Under the Email menu, fill in the email (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)). ![Sign Out Firebase](sign_out_1.png)   # Sign up with email and password The `Sign up(email + password)` method is used to add a new user to your application using the traditional format of providing an email and a password. To make a request to sign up a user using an email and password, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign up(email + password)`. ![Sign up Firebase](sign_up_1.png) 3. Scroll downwards under the Email menu, fill in the email (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)), then fill in the password. ![Sign up Firebase](sign_up_2.png)   # Unsubscribe Real-Time The `Unsubscribe realtime` method lets you stop listening for live changes on your documents from earlier subscribed requests. To create a request to unsubscribe from realtime updates, follow the steps below: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Unsubscribe realtime`. 3. Under the `Requests`, choose the request(s) to stop the realtime events from. ![Unsubscribe realtime Firebase](unsubscribe_realtime_1.png)   # Update Email The `Update email` method is used to change the email of a user existing in Firebase. To make a request to update a user's email, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Update email`. 3. Under the Email menu, fill in the email (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)). ![Update email Firebase](update_email_1.png)   # Update Item The `Update item` method enables you to change the details of a document in your Firebase Cloud Firestore. To create a request to update a document, follow the steps below: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Update item`. ![Update item Firebase](update_item_1.png) 3. Under the `Path`, fill in the full path to the document in your Cloud Firestore database. ![Update item Firebase](update_item_2.png) :::info NOTE: Almost all of the time, the update item request needs the document ID at the tail end of the path. ::: 4. Fill in the key-value pairs with the data to be changed. ![Update item Firebase](update_item_3.png)   # Update Profile The `Update profile` method is used to change the user's profile information in Firebase like the display name and photo URL. To make a request to update a user's profile, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Update profile`. 3. Add the new `Display Name` or `Photo URL` for the user.   # Upload File The `Upload file` method is used to upload files to your Firebase Cloud Storage. 1. First, ensure you have cloud storage added to your Firebase app. <video src="https://media.wized.com/docs-v2/upload_file_1.mp4" controls loop muted title="Adding cloud storage to Firebase app"></video> ::: info NOTE The clip starts with the project in test mode - this isn't secure. You'll need to update the Firebase rules. ::: 2. Make sure that the Storage Bucket is defined in your [Firebase App integration](../index.md#adding-an-app-to-your-project-in-the-firebase-console). 3. Open the request panel and click on the `+` button to add a new request. 4. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Upload file`. 5. Scroll down to fill in the storage path of the file. Use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md) to choose the file to be uploaded. ![Upload file Firebase](upload_file_2.png)   # Verify Email method The `Verify email` method is used to verify a user's email address in your Firebase app. It requires an `OOB Code` that is obtained by first [sending a verification email to the user](../send-verification-email/index.md). To make a request to verify an email, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Verify email`. 3. Provide the `OOB Code` received from the [Send verification email](../send-verification-email/index.md), usually through the page query parameters. ![Verify email Firebase](verify-email.png)   # Handling API errors When making API requests in Wized, errors can occur for various reasons. These errors generally fall into two categories: 1. **The request was not sent** – The request never reached the API server. 2. **The request was sent but returned an error** – The API responded with an error message. Understanding the cause of these errors will help you diagnose and fix them efficiently. --- ## When the request cannot be sent If the request is not sent, it means it never reached the API server. This can happen due to: - **Incorrect configuration in Wized** Double-check the request configuration in the **Requests panel**. Ensure the endpoint URL, HTTP method, headers, and body match the API requirements. - **CORS** Some APIs do not accept requests from browsers for security reasons. By default, Wized sends requests from the browser, which can cause issues in these cases. ### How to troubleshoot To determine if the request is failing before reaching the API: 1. **Check the logs** - If the request was not sent, you might see a `500 - Failed to Fetch` error in the **data store panel** under the "States" tab. 2. **Review your request configuration** - Ensure the endpoint URL, HTTP method, headers, and body are correctly set in the **Requests panel**. 3. **Verify API availability** - Visit the API provider’s status page or check online for service interruptions. 4. **Use secrets or native integrations** - If the API blocks direct browser requests, use the [Secrets](/data-store/secrets) feature in Wized to send requests through our servers. - Alternatively, check if Wized has a **native integration** with the service, as these integrations manage API communication securely. --- ## When the request returns an error If the request is successfully sent but the API returns an error, the response will include an **HTTP status code** that indicates what went wrong. ### Common API error codes - **400 Bad Request** – The request is malformed or missing required data. - **401 Unauthorized** – Authentication is required but missing or incorrect. - **403 Forbidden** – The request is valid, but you lack the necessary permissions. - **404 Not Found** – The requested resource does not exist. - **500 Internal Server error** – The API encountered an unexpected issue. View code [list](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status) ### How to troubleshoot 1. **Check the HTTP status code** - In the **data store panel**, look at the status code in the "Statuses" tab. - Use API documentation or online references to understand the meaning of the error. 2. **Examine the response body** - Some APIs provide detailed error messages inside the response body. - Check the **"Body" tab** in the data Store Panel for additional details. 3. **Consult the API documentation** - API documentation will clarify possible causes and solutions for specific errors.   # Intro to requests **Requests** allows your project to interact with external web services through REST APIs. This means you can send and receive data, enabling communication with backends, databases, third-party services, payment gateways, and more. <iframe width="100%" height="400" src="https://www.youtube.com/embed/D395eqwWt_c?si=ZllOMISiXdjR9uew" frameborder="0" allowfullscreen></iframe>   # Memberstack Requests The [Memberstack](https://www.memberstack.com/) integration enables granular control over user access to your application, as well as managing user data and subscriptions. ## How to use Memberstack in Wized Memberstack can be used as a standalone App in Wized or in conjunction with Memberstack's `<script>` tag. ### Using Memberstack as a standalone Wized App vs with Memberstack's `<script>` tag Memberstack can be integrated into Webflow without using Wized, just by [installing their `<script>` tag on the site](https://docs.memberstack.com/hc/en-us/articles/7253090768539-Installing-Memberstack-in-Webflow). When doing so, Memberstack provides built-in functionalities like: - [Gating content and pages](https://docs.memberstack.com/hc/en-us/articles/7402927868443-Gated-Content): Memberstack automatically redirects unauthenticated users or users who are not allowed to access a specific content or pages defined in the Memberstack Dashboard. - [Creating sign in and sign up forms](https://docs.memberstack.com/hc/en-us/articles/7424129003547-Create-a-Signup-Form-in-Webflow#form): Memberstack takes care of the user authentication process by simply adding a few attributes to your site. When integrating Memberstack into a Wized app, you get more granular controls by getting access to all [the Memberstack frontend API methods](https://developers.memberstack.com/docs/dom-front-end-package), such as: - Retrieving App and Plans data. - Retrieving Member data. - Authenticating users using email and password, OAuth or Magic links. - Linking and unlinking providers. - Resetting passwords. - Launching plans purchase flows. - And much more. As mentioned, you can use Memberstack as a standalone Wized App or in conjunction with Memberstack's `<script>` tag. The main difference between the two is that when using Memberstack as a standalone Wized App, you will have to implement the content gating and user authentication functionalities yourself using [Requests](../../index.md) and [Events](../../global-events/index.md). If you use Memberstack's `<script>` tag, you will still be able to create Requests to interact with Memberstack's API. ### How to create a Memberstack Request To create a Memberstack Request, you will first need to create an App in your Wized project: 1. Go to My Apps 2. Click the `+` button at the top of the panel. 3. Add a name for your app for later reference, i.e. `Memberstack`. 4. Pick the `Memberstack` option. 5. <a id="memberstack_config_public_key"></a> Add the Memberstack [Public Key](https://docs.memberstack.com/hc/en-us/articles/11916762087835-Memberstack-API-Keys), which can be found in the Memberstack Dashboard. Once you have created the Memberstack App, you can start creating Requests to interact with the Memberstack API. ## Request methods ### Get app Retrieves information about your application. #### Response The response contains an App object with the following properties: ```typescript type App = { id: string; // The unique identifier for your application. name: string; // The name of your application. mode: string; // The operational mode of your application (e.g., "sandbox"). plans: Plan[]; // An array of plans available for your application. customFields: Array<{ order: number; label: string; key: string; hidden: boolean; }>; // An array of custom fields associated with your application. captchaRequired: boolean; // A boolean indicating whether captcha is required. authProviders: Array<{ provider: string; icon: string; name: string; }>; // An array of authentication providers for your application. additionalAuthMethods: Array<string>; // Additional authentication methods available for your application. branding: { logo: string; colors: { lightMode: { primaryButton: string; }; }; // Branding options for your application. }; ``` ### Get plan Retrieves information about a specific plan in your application. #### Parameters - `Plan ID`: The unique identifier for the plan. #### Response The response contains a Plan object with the following properties: ```typescript type Plan = { id: string; // The unique identifier for the plan. name: string; // The name of the plan. description: string; // A brief description of the plan. priority: number; // The priority of the plan. prices: Array<{ id: string; amount: number; interval: string; name: string; type: string; status: string; currency: string; }>; // An array of pricing options for the plan. }; } ``` ### Get all plans Retrieves information about all plans in your application. #### Response The response contains an array of [Plan objects](#get-plan). ### Get member Retrieves the currently logged in Member. #### Response The response contains a Member object with the following properties: ```typescript type Member = { id: string; // The unique identifier for the member. verified: boolean; // A boolean indicating whether the member is verified. profileImage: string; // The URL of the member's profile image. auth: { email: string; hasPassword: boolean; providers: Array<{ provider: string; }>; }; // The authentication details of the member. loginRedirect: string; // The URL to redirect the member to after login. stripeCustomerId: string; // The Stripe customer ID associated with the member. createdAt: string; // The date and time the member was created. metaData: object; // Additional metadata associated with the member. customFields: object; // Custom fields associated with the member. permissions: Array<string>; // Permissions associated with the member. planConnections: Array<{ id: string; active: boolean; status: string; planId: string; type: string; payment: { amount: number; currency: string; status: string; lastBillingDate: number | null; nextBillingDate: number | null; cancelAtDate: number | null; priceId: string; } | null; }>; // An array of plan connections associated with the member. }; ``` ### Get member JSON Retrieves a JSON object representing the member's information. #### Response The response contains a JSON object representing the member's information. ### Update member JSON Updates the JSON data for the currently logged-in member. For best practices, we suggest first retrieving the current member's JSON using [Get member JSON](#get-member-json). Then, make necessary changes before applying the update. This approach ensures all existing data is preserved while new data is added or existing data is modified. #### Parameters - `JSON`: The updated JSON data for the member. #### Response The response contains a JSON object representing the updated member's information. ### Update member data Updates the member's data such as the custom fields. #### Parameters - `Custom Fields`: The new custom fields for the member. Each custom field has two parameters: - `Key`: The key of the custom field. - `Value`: The new value for the custom field. #### Response The response contains the updated [Member object](#get-member). ### Update member email Updates the email address of the currently logged-in member. #### Parameters - `Email`: The new email address for the member. #### Response The response contains the updated [Member object](#get-member). ### Update member password Updates the password of the currently logged-in member. #### Parameters - `Old Password`: The member's current password. - `New Password`: The new password for the member. #### Response The response contains the updated [Member object](#get-member). ### Send verification email Sends a verification email to the currently logged-in member. #### Response The response contains a `success` property indicating whether the email was sent successfully. ### Sign in (email + password) Authenticates a member using their email and password. #### Parameters - `Email`: The member's email address. - `Password`: The member's password. #### Response The response contains a [Member object](#get-member) representing the authenticated member and a `tokens` property containing the authentication tokens. ```typescript type SignInResponse = { member: Member; // The authenticated member. tokens: { accessToken: string; // The access token. type: string; // The token type. expires: number; // The token expiration timestamp. }; }; ``` ### Sign up (email + password) Creates a new member account using their email and password. #### Parameters - `Email`: The member's email address. - `Password`: The member's password. - `Custom Fields`: The custom fields for the new member. Each custom field has two parameters: - `Key`: The key of the custom field. - `Value`: The value for the custom field. - `Metadata`: Additional metadata for the new member. Each metadata field has two parameters: - `Key`: The key of the metadata field. - `Value`: The value for the metadata field. - `Plans`: The plan connections for the new member. Note that only free plans can be added during signup. Each plan connection has: - `Plan ID`: The unique identifier for the plan. #### Response The response contains the same data as the [Sign in (email + password)](#sign-in-email--password) method. ### Send sign in email (passwordless) Sends a magic link to the member's email address for passwordless sign-in. This is the first step in the passwordless sign-in process, proceeded by the [Sign in (passwordless)](#sign-in-passwordless) method. #### Parameters - `Email`: The member's email address. #### Response The response contains a `success` property indicating whether the email was sent successfully. ### Sign in (passwordless) Authenticates a member using a magic link sent to their email address. This method is used after the member has received the magic link from the [Send sign in email (passwordless)](#send-sign-in-email-passwordless) method. #### Parameters - `Email`: The member's email address. - `Passwordless Token`: The magic link token received in the email. #### Response The response contains the same data as the [Sign in (email + password)](#sign-in-email--password) method. ### Send sign up email (passwordless) Sends a magic link to the member's email address for passwordless sign-up. This is the first step in the passwordless sign-up process, proceeded by the [Sign up (passwordless)](#sign-up-passwordless) method. #### Parameters - `Email`: The member's email address. #### Response The response contains a `success` property indicating whether the email was sent successfully. ### Sign up (passwordless) Creates a new member account using a magic link sent to their email address. This method is used after the member has received the magic link from the [Send sign up email (passwordless)](#send-sign-up-email-passwordless) method. #### Parameters - `Email`: The member's email address. - `Passwordless Token`: The magic link token received in the email. - `Custom Fields`: The custom fields for the new member. Each custom field has two parameters: - `Key`: The key of the custom field. - `Value`: The value for the custom field. - `Metadata`: Additional metadata for the new member. Each metadata field has two parameters: - `Key`: The key of the metadata field. - `Value`: The value for the metadata field. - `Plans`: The plan connections for the new member. Note that only free plans can be added during signup. Each plan connection has: - `Plan ID`: The unique identifier for the plan. #### Response The response contains the same data as the [Sign in (email + password)](#sign-in-email--password) method. ### Set password Sets a password for the currently logged-in member. This method allows a member to establish a password for their account, typically after signing up using a passwordless method. #### Parameters - `Password`: The member's password. #### Response The response contains the same data as the [Sign in (email + password)](#sign-in-email--password) method. ### Sign in (provider) Authenticates a member using a third-party authentication provider. #### Parameters - `Provider`: The name of the authentication provider. #### Response The response contains the same data as the [Sign in (email + password)](#sign-in-email--password) method. ### Sign up (provider) Creates a new member account using a third-party authentication provider. #### Parameters - `Provider`: The name of the authentication provider. - `Custom Fields`: The custom fields for the new member. Each custom field has two parameters: - `Key`: The key of the custom field. - `Value`: The value for the custom field. - `Plans`: The plan connections for the new member. Note that only free plans can be added during signup. Each plan connection has: - `Plan ID`: The unique identifier for the plan. #### Response The response contains the same data as the [Sign in (email + password)](#sign-in-email--password) method. ### Connect provider Links a third-party authentication provider to the currently logged-in member's account. #### Parameters - `Provider`: The name of the authentication provider. #### Response The response contains a list of providers to which the member is currently connected. ### Disconnect provider Unlinks a third-party authentication provider from the currently logged-in member's account. #### Parameters - `Provider`: The name of the authentication provider. #### Response The response contains a list of providers to which the member is currently connected. ### Send reset password email Sends a password reset email to the member's email address. This is the first step in the password reset process, proceeded by the [Reset password](#reset-password) method. #### Parameters - `Email`: The member's email address. #### Response A message indicating that if the provided email exists in the system, a reset password email has been sent. ### Reset password Resets the password for a member using a magic link sent to their email address. This method is used after the member has received the magic link from the [Send reset password email](#send-reset-password-email) method. #### Parameters - `Token`: The magic link token received in the email. - `New Password`: The new password for the member. #### Response The response contains a `success` property indicating whether the email was sent successfully. ### Sign out Signs out the currently logged-in member. #### Response The logged out member's id. ### Purchase plan Initiates the purchase process for a specific plan with a checkout flow. #### Parameters - `Price ID`: Identifier for the price of the plan that the member will purchase. Can be found in the Memberstack Dashboard. - `Cancel URL`: The URL to redirect the member to if they cancel the purchase process. - `Success URL`: The URL to redirect the member to after a successful purchase. - `Auto Redirect`: A boolean indicating whether to automatically redirect the member to the success URL after a successful purchase. #### Response If `Auto Redirect` is set to false, the response will contain the stripe checkout URL. ### Open customer portal Launches the Stripe customer portal for the currently logged-in member. #### Parameters - `Configuration`: An optional [configuration object](https://docs.stripe.com/api/customer_portal/configurations/object) for the customer portal. - `Return URL`: The URL to redirect the member to after they have finished using the customer portal. - `Auto Redirect`: A boolean indicating whether to automatically redirect the member to the return URL after they have finished using the customer portal. #### Response If `Auto Redirect` is set to false, the response will contain the stripe customer portal URL. ### Add free plan Adds a free plan to the currently logged-in member's account. #### Parameters - `Plan ID`: The unique identifier for the plan. #### Response The response contains the updated [Member object](#get-member). ### Remove free plan Removes a free plan from the currently logged-in member's account. #### Parameters - `Plan ID`: The unique identifier for the plan. #### Response The response contains the updated [Member object](#get-member).   # Request Props Request props are dynamic parameters that enable you to customize and reuse requests efficiently. By defining props, you can pass specific values to a request, making it adaptable to various scenarios. This flexibility is essential for creating dynamic and efficient API calls. <video controls src="https://media.wized.com/docs-v2/wized-request-props.mp4" title="Wized Request Props"></video> ## Defining Props To define props for a request: 1. Open the request configuration. 2. Add the required props in the **Props** section. 3. Specify the `name`, `defaultValue`, and whether the prop is `required`. ### Example: Defining Request Props Consider a request named `get_users_by_type`. Here, we define a prop `type` with a default value of `'admin'`. ![Defining request props](request-props.png) In the request filter, the `type` prop is accessed via the variable `p`, as shown below: ```javascript return p.type; ``` ![Using request props in request](request-props-filter.png) ### Data Store Key The **Data Store Key** is used to save dynamic responses when the request is executed. ![Setting data store key to save the response](request-props-datastore-key.png) > **Note:** If a data store key is not defined, requests may overwrite each other's responses, which will then be saved under `r.request_name`. ### Calling the Request When calling a request, you must provide the prop value. For example, to call the `get_users_by_type` request with `type` set to `'moderator'`, you would use: ```javascript return 'moderator'; ``` ![Filling prop values](calling-request-with-props.png) If simulated, the response will be saved to `r.save_to_moderator`. ![Data store example](data-store-response-example.png) ## Summary - **Props**: Enable dynamic and reusable requests. - **Data Store Key**: Ensures unique identification and caching of responses. - Always provide the required props when calling a request to ensure proper functionality.   # Intro to the body REST request The body of an API request is where you send structured data directly to the server. This is particularly useful for create, update, or modify operations and is most commonly used with the POST, PUT, and PATCH methods. ## When to use the body 1. **Methods for data transmission**: The body is primarily utilized in POST, PUT, and PATCH requests, which are designed to send data to the server. The data within the body contains the necessary details for the server to process and respond to your request. 2. **Large or structured data**: If your request involves transmitting substantial amounts of data or complex data structures (like arrays or objects), the body is the ideal space to include this information. It supports the JSON format, allowing detailed and hierarchical organization of data. 3. **Sensitive information**: For confidential data, such as user credentials or payment details, it is advisable to use the body in conjunction with secure transmission protocols like HTTPS. Storing sensitive information in the body enhances security by keeping it separate from the URL, thereby reducing its exposure. ::: tip Always consult the API documentation to understand the specific requirements for the data you are sending, including expected formats and structures. ::: ## Structure of the body In Wized, the body content is structured as key-value pairs, offering greater versatility compared to traditional URL parameters. Here’s a breakdown: - **Key**: This acts as the identifier for the data being sent, such as "username" or "address". - **Value**: The value can be of any data type or format, including text, numbers, arrays, or objects. Additionally, the value can dynamically retrieve data from your application through the [function editor](../../function-editor/). ## URL Parameters VS body When determining whether to use URL parameters or the body in your requests, it is essential to refer to the API documentation for specific guidelines. Here are some general recommendations: - **Use URL parameters**: Opt for URL parameters when handling simple filters or search queries, particularly in GET requests where data can be appended directly to the URL. - **Use the body**: Choose the body when dealing with complex data structures, sensitive information, or when making requests with POST, PUT, or PATCH methods that necessitate structured content. ::: info information By adhering to these guidelines, you can ensure that your API requests are both effective and compliant with the specifications of the external services you are interacting with. :::   # Intro to the request headers Headers are essential components of your API requests. They operate as key-value pairs, delivering crucial information about the request to the server. Headers utilize a structured format where each key signifies a specific instruction or metadata, and its corresponding value provides the necessary information. ## How headers work Headers are defined by the following components: - **Key**: A string identifier that specifies the type of metadata (e.g., `Content-Type` or `Authorization`). - **Value**: The data related to that key, which may include tokens, MIME types, or specific formatting instructions. When you construct an API request, you add headers to ensure that the API receives all the necessary metadata, instructions, and security credentials to process your request effectively. ## When to use headers 1. **Authentication**: Many APIs require headers for authentication purposes. This typically involves including tokens, API keys, or bearer tokens to verify the user's access. For instance, the `Authorization` header often contains a token essential for secure access. 2. **Specifying data format**: Headers can define the format of the data being sent or received. By using `Content-Type` headers, you can specify formats such as `application/json`, ensuring the API understands how to interpret the data structure. 3. **Additional metadata**: Headers allow for the inclusion of various types of metadata, such as preferred language (`Accept-Language`) or versioning (`Api-Version`). This capability helps the server tailor responses based on the specifics of your request. ## Common headers | Header | Description | | ----------------- | -------------------------------------------------------------------------------- | | `Content-Type` | Specifies the format of the data being sent, such as `application/json`. | | `Authorization` | Used for authentication, often including tokens (e.g., `Bearer <token>`). | | `X-Api-Key` | A custom header commonly used to securely pass API keys. | | `Accept` | Indicates the expected response format from the server, like `application/json`. | | `Accept-Language` | Specifies the preferred language for the response. | :::tip Note All API has its own requirements regarding headers and their expected values. Always consult the API documentation to confirm which headers are necessary and how to structure them correctly. This practice will ensure smooth integration and data handling in your Wized application. :::   # Rest request **Rest requests in Wized** allow you to connect your web application to any external service that supports REST APIs. This feature enables you to integrate a wide variety of third-party services ranging from payment gateways to data providers without being limited to the native integrations offered by Wized. ## Overview Rest Requests give you complete flexibility to create custom API integrations. Unlike native integrations that come with predefined methods, a Rest Request requires you to manually configure details such as the HTTP method, endpoint, headers, parameters, and body. This means you can connect to any RESTful service and tailor the request to meet your specific needs. <iframe width="100%" height="400" src="https://www.youtube.com/embed/bs6q__sv7_s?si=aN14dnX3Tjlgxz7n" frameborder="0" allowfullscreen></iframe>   # Methods - **GET:** This method retrieves information from the API. Use it when you want to access specific data, such as product details or a list of users. - **POST:** This method sends new data to the API, typically to create a new resource. Use it to submit information for the API to process and save. - **PUT:** This method completely replaces an existing resource with new data. Use it to edit an entire resource and save the updated version, which will overwrite the previous one. - **PATCH:** This method partially updates an existing resource, modifying only specific fields or properties. Use it for small adjustments to a resource without replacing the entire entity. - **DELETE:** This method removes a resource from the API. Use it when you want to eliminate a resource permanently. ::: tip Note Selecting the appropriate method depends on the action you intend to perform and the specifications outlined in the API documentation. Always refer to the documentation to determine the available methods and their correct usage. :::   # Intro to the parameters rest request URL Parameters are a vital feature that allows you to customize API requests by appending key-value pairs to the request URL. These parameters play a crucial role in filtering data, executing searches, and transmitting specific variables to an API. This is especially relevant in `GET` requests, where data is added directly to the URL. ## How URL parameters work In Wized, you can add URL parameters as key-value pairs to the base URL. For each parameter, you must define: - **Key**: A unique string identifier for the parameter. Note that this key cannot utilize dynamic data from the Function Editor. - **Value**: The value assigned to the key, which can incorporate dynamic data available in Wized, including cookies, variables, inputs, and more. ## Structure of URL parameters Parameters are added to the end of the base URL following a question mark (?). The structure is outlined as follows: - **Key-Value format**: Each parameter is formatted as `key=value`. - **Joining multiple parameters**: When you have multiple parameters, they are concatenated using the ampersand (`&`). ### Example: ```plaintext https://api.example.com/products?category=electronics&order=price_ascending ``` In this example: - **category** is the key, and **electronics** is its corresponding value. - **order** is another key, with **price_ascending** as its value. --- ::: tip Each API defines the specific parameters it accepts, their expected data types, and any mandatory values. Always refer to the API’s documentation to ensure you are configuring parameters accurately and providing the requisite data. :::   # Captcha Protection ## Overview Captcha protection helps prevent automated abuse and bot attacks on your Supabase authentication endpoints. ## Enabling Captcha in Supabase ### Prerequisites - A Supabase project - Access to your Supabase project's dashboard ### Steps 1. **Enable Captcha Protection** - Go to your Supabase Dashboard - Select your project - Navigate to the Auth section - Under Settings > Authentication > Bot and Abuse Protection > Enable CAPTCHA protection toggle 2. **Choose Your Captcha Provider** Supabase supports multiple providers: - **hCaptcha** - **Cloudflare Turnstile** 3. **Configure Your Provider** **For Cloudflare Turnstile:** - Sign up at [Cloudflare](https://www.cloudflare.com/) - Navigate to Turnstile in your dashboard - Create a new widget - Copy your **Site Key** For extra settings you can access the [Cloudflare Turnstile documentation](https://developers.cloudflare.com/turnstile) **For hCaptcha:** - Sign up at [hCaptcha.com](https://www.hcaptcha.com/) - Create a new site - Copy your **Site Key** For more information you can access the [hCaptcha documentation](https://docs.hcaptcha.com/) 4. **Set Up In Wized** - Access your Wized project from app.wized.com - Add an appropriately named variable; in this case it will be `supabase_captcha_token` - Configure your request to enable captcha and in the value use the Wized variable ![Supabase Sign Up Request With Captcha Enabled](request.png) 5. **Set Up In Webflow** **For Cloudflare Turnstile:** - In the `<head>` section of the page, add the Turnstile script: ```javascript <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> ``` - Add the widget element where the captcha will be placed, this can be a normal section element within a form ```html <div id="cf-turnstile"></div> ``` - Add the script to render the widget and assign a callback to get the captcha token and assign it to a Wized variable ```javascript const widgetId = turnstile.render("#cf-turnstile", { sitekey: "<YOUR-SITE-KEY>", callback: function (token) { Wized.data.v.supabase_captcha_token = token; }, }); ``` For more information on the client-side setup you can access the [full Cloudflare client-side setup documentation](https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/) **For hCaptcha:** - In the `<head>` section of the page, add the hCaptcha script: ```javascript <script src="https://js.hcaptcha.com/1/api.js" async defer></script> ``` - Add the widget element where the captcha will be placed, this can be a normal section element within a form ```html <div class="h-captcha" data-sitekey="YOUR_SITE_KEY" data-callback="onHcaptchaSuccess"></div> ``` > **_NOTE:_** > > The `data-sitekey` attribute should have the value of the site key copied from earlier > The `data-callback` attribute is the name of the function executed when the response from hCaptcha is successful - Add the script to render the widget and assign a callback to assign the captcha token value to the Wized variable specified earlier ```javascript function onHcaptchaSuccess(token) { Wized.data.v.supabase_captcha_token = token; } ```   # Create item <video src="https://media.wized.com/docs-v2/create_item.mp4" muted controls title="Adding an item to your Supabase table"></video> The `Create item` method is used to add a new item to your Supabase table. Here's how to do it: 1. **Specify the table**: Start by writing the name of the table to which you want to add an item. ![Specifying the table in Wized](select_table.png) ::: info NOTE **Return Inserted Data** option defaults to true and uncheck it if your RLS might block current user from reading data ::: ![The table name in the Supabase dashboard](../get-item/table_name.png) 2. **Prepare key-value pairs**: Think of these as labels and input fields. Each key matches a column in your table, and the value is the data you want to add to that column. ![Supabase table](supabase_table.png) 3. **Match keys to table headers**: Make sure the keys in your key-value pairs correspond to the headers (columns) in your table. ![Create Supabase Item](request_example.png) 4. **Set values for each key that you want to add**: The value part of each pair is the actual data you're adding to the table under that column. ![Adding multiple key-value pairs](multiple_fields.png) It's essentially like filling out a form where each field is a column in your table.   # Delete File The `Delete file` method is used to delete files from your Supabase bucket storage. To make a delete file request, follow these steps: 1. First, ensure you have a storage bucket on your Supabase app. <video src="https://media.wized.com/docs-v2/upload_file_1.mp4" controls loop muted title="Create storage bucket in Supabase"></video> 2. Open the request panel and click on the `+` button to add a new request. 3. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Delete file`. 4. Scroll downwards to fill in the bucket name and storage path of the file you want to delete. ![Delete file Supabase](delete_file_supabase.png)   # Delete item ![The selected method](method.png) The `Delete item` method allows you to delete a specific item from your Supabase table. <video src="https://media.wized.com/docs-v2/deleting_items.mp4" muted controls title="Deleting items from our Supabase database"></video> Here's how to use it: 1. **Specify the table**: Start by entering the name of the table from which you want to delete an item. ![The table name field in Wized](table_name_delete.png) ![The table name in the Supabase dashboard](../get-item/table_name.png) 2. **Add the record ID**: Next, provide the ID of the record that needs to be deleted. This ID can be a fixed value or a dynamic value from the Data Store. ![The record ID field](record_id_delete.png) Using this method, you will permanently delete an item from your database.   # Download File The `Download File` method is used to download files directly from your Supabase bucket storage. This method is particularly useful for files that are stored in private buckets, as it allows you to access them securely. To make a request to get the file URL, follow these steps: 1. First, ensure you have a storage bucket on your Supabase app. <video src="https://media.wized.com/docs-v2/upload_file_1.mp4" controls loop muted title="Create storage bucket in Supabase"></video> 2. Open the request panel and click on the `+` button to add a new request. 3. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Download File`. ![Download File Supabase](download-file.png) 4. Fill in the bucket name and storage path of the file you want to download. By default Supabase Download File requests only return the file as a [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) in the response data. If you want to automatically download the file to the user's browser, enable the `Trigger download?` option.   # Get File URL The `Get File URL` method is used to obtain the full URL paths to your file storage. To make a request to get the file URL, follow these steps: 1. First, ensure you have a storage bucket on your Supabase app. <video src="https://media.wized.com/docs-v2/upload_file_1.mp4" controls loop muted title="Create storage bucket in Supabase"></video> 2. Open the request panel and click on the `+` button to add a new request. 3. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Get File URL`. ![Get File URL Supabase](file_url_1.png) 4. Scroll downwards to fill in the bucket name and storage path of the file. You can then choose whether to download it or just display it. ![Get File URL Supabase](file_url_2.png)   # Get Item ![Get item](get_item.png) The `Get Item` method lets you fetch a specific item from your Supabase table. <video src="https://media.wized.com/docs-v2/getting_items.mp4" muted controls title="Getting an item from your Supabase database"></video> Here's how to use it: 1. **Specify the table**: Start by writing the name of the table from which you want to retrieve an item. ![Specifying a table](tasks.png) ![Table name](table_name.png) 2. **Add the record ID**: Next, provide the ID of the record you're looking for. This ID can be a fixed value or it can be a dynamic value from the Data Store. ![Selecting record ID](record.png) 3. **Select columns (optional)**: This step allows you to choose which columns to include in your response, so you get only the information you need. ![The select columns section](select_columns.png) ![Response with selected columns](selected_columns.png) Think of this method as asking a librarian for a book; you specify which book you need, and the method retrieves it for you.   # Get list ![The get list method in Wized](get_list.png) The `Get list` method lets you fetch a list of items from your Supabase table. Think of this method as asking someone for a map with lots of files in it. <video src="https://media.wized.com/docs-v2/get_list.mp4" muted controls title="Getting a list of items from your Supabase database"></video> ## Basic configuration ### Specify the table Start by writing the name of the table from which you want to retrieve an item. ![specifying a table](../get-item/tasks.png) ![table name](../get-item/table_name.png) That's all you need. The rest of the options covered in the sections below are optional. If you're facing authorization issues, make sure that your [RLS policies](https://supabase.com/docs/guides/auth/row-level-security) are correctly set. ### Subscribe to real-time (optional) ![Subscribe to real-time option](../../supabase/realtime_data.png) When you're configuring Get List requests, you have the option to subscribe to real-time updates. This feature keeps your app in sync with your database changes instantly, ensuring your data is always up-to-date. Whether it's an added to-do item, an updated profile, or a deleted comment, the changes will be reflected in your app instantly. This feature is great for building instant messaging apps, live collaboration features, or just ensuring that the data is in sync across devices at all times. ### Limit the query to a range (optional) ![Pagination options](pagination.png) Limit the query result by starting at an offset (Range From) and ending at the offset (Range To). Only records within this range are returned. The Range From and Range To values are 0-based and inclusive: a range from 1 to 3 will include the second, third and fourth rows of the query. ### Limit items (optional) ![Limiting response items](limit_items.png) Specify the maximum number of items in the response. ### Count results (optional) ![Setting up count](count.png) Supabase offers a `count` function to tally rows in a table. Choose from: - **Exact**: Slow, precise count using `COUNT(*)`. - **Planned**: Quick, approximate count using Postgres statistics. - **Estimated**: Combines exact count for small numbers and planned count for larger numbers. #### Include only count Selecting `include only count` returns only the item count, omitting data. Ideal when only the count is needed. ### Sort by column (optional) ![Setting up sorting](sorting.png) Arrange response items by a specified column in ascending (A-Z) or descending (Z-A) order. ### Filter type (optional) ![Setting up the filter type](filter_type.png) Choose between AND and OR logic for filters: - **AND**: All conditions must be true. - **OR**: Any one of the conditions must be true. ## Filter (optional) ![Filter by ID](filter.png) Set up optional filters for your requests. Add one or more filters, each consisting of a column, operator, and value. ### Column Choose a table column for your filter condition. ### Operator Options include: - **Equals to**: Finds items exactly matching the specified value. - **Does not equal**: Selects items that are different from the specified value. - **Greater than**: Retrieves items with values higher than the specified one. - **Greater than or equal to**: Includes items equal to or higher than the specified value. - **Less than**: Picks items with values lower than the specified one. - **Less than or equal to**: Gets items equal to or lower than the specified value. - **Matches pattern**: Searches for items matching a specified pattern (like a format or sequence). - **In**: Finds items that match any of the values in a provided list. - **Contains**: Selects items that include the specified value within them. - **Text search**: Performs a search for the specified text within items. Check the [Supabase filter documentation](https://supabase.com/docs/reference/javascript/using-filters) for more information about each operator, including examples. ### Value Define the filter criteria. For example, with the column as tasks, operator as Contains, and value as 'cook', the response will list tasks containing 'cook'. ### Do not match filter Match only rows that do not satisfy the filter criteria. Check the [Supabase "Don't match the filter" documentation](https://supabase.com/docs/reference/javascript/not) for more information.   # Get Session The `Get Session` method is used to retrieve the details of the current local session using Supabase. To make a request to get the session details, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Get session`. ![Get Session Supabase](get_session.png)   # Get User The `Get User` method is used to retrieve the details of the currently logged-in user using Supabase. To make a request to get a user, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Get user`. ![Get User Supabase](get_user_supabase.png)   # Supabase Requests Wized has a native Supabase integration, which makes it easy to make requests to your Supabase instance. This integration acts as a wrapper for the Supabase JavaScript client library, @supabase/supabase-js, enabling you to interact seamlessly with your Supabase instance. Our integration provides a rich set of functionalities to interact with your Postgres database, manage user accounts, handle file uploads, and much more. You can even subscribe to [real-time updates](#real-time). <iframe width="700" height="520" src="https://www.youtube.com/embed/ieMmHyhfJs4?si=krr3AHCYS1ol-6hJ" title="Wized + Supabase " frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> ## How to get started? To start using Supabase in your web app, you first need to add it to My Apps. ![Adding Supabase to My Apps in Wized](supabase_my_apps.png) There, you will be prompted to provide the following information: - <a id="supabase_url"></a> Supabase URL: Your unique Project URL - <a id="supabase_api_key"></a> Supabase key: Your API key — `anon` `public` ![Supabase API Settings](supabase_info.png) You can find this information in your Supabase dashboard, under Project Settings > API. ## Supabase Methods Wized offers a variety of Supabase methods to cater to your data management needs. These methods are designed to simplify your interactions with the database, user management, and real-time updates. Here’s a quick overview of the methods available: - **[Get Session](./get-session/)**: Access session information. - **[Get User](./get-user/)**: Retrieve user details. - **[Update User](./update-user/)**: Update user information. - **[Sign Up](./sign-up/)**: Register new users. - **[Sign In with Password](./sign-in-password/)**: Authenticate users with a password. - **[Sign In with Magic Link](./sign-in-magic-link/)**: Provide passwordless authentication. - **[Sign In with OAuth](./sign-in-oauth/)**: Enable OAuth-based authentication. - **[Sign Out](./sign-out/)**: Log out the user. - **[Send Password Reset](./send-password-reset/)**: Assist users with password recovery. - **[Get Item](./get-item/)**: Retrieve a specific item from your database. - **[Get List](./get-list/)**: Fetch a list of items based on certain criteria (supports real-time subscriptions). - **[Unsubscribe Real-Time](./unsubscribe-real-time/)**: Unsubscribe from real-time updates. - **[Create Item](./create-item/)**: Add new items to your database. - **[Update Item](./update-item/)**: Modify existing items in your database. - **[Delete Item](./delete-item/)**: Remove items from your database. - **[Invoke Function](./invoke-function/)**: Invoke a Supabase Edge Function. - **[Upload File](./upload-file/)**: Upload a file to your file storage. - **[Get File URL](./get-file-url/)**: Get the URL of one of your files. - **[Download File](./download-file/)**: Download a file from your file storage. - **[Delete File](./delete-file/)**: Delete a file from your file storage. ## Real-time ![Subscribe to real-time option](realtime_data.png) When you're configuring Get List requests, you have the option to subscribe to real-time updates. This feature keeps your app in sync with your database changes instantly, ensuring your data is always up-to-date.   # Invoke Function The `Invoke Function` method is used to run [edge functions](https://supabase.com/docs/guides/functions) in Supabase. Edge functions allow you to add more customization to your Supabase app. ::: info NOTE **Edge Functions** and **Database Functions** in Supabase are not the same. Wized only invokes edge functions at the moment. ::: To make a request to invoke an edge function, follow these steps: 1. First, ensure you have an edge function deployed to your Supabase app. Following [Supabase's guide](https://supabase.com/docs/guides/functions/quickstart) will allow you to get a sample edge function in your functions menu. ![Invoke function Supabase](invoke_function_1.png) 2. Open the request panel and click on the `+` button to add a new request. 3. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under method, choose `Invoke function`. ![Invoke function Supabase](invoke_function_2.png) 4. Scroll downwards to fill in the edge function name and choose the type of method to access it, whether it's `GET`, `POST`, `PUT`, `PATCH`, or `DELETE`. ![Invoke function Supabase](invoke_function_3.png) 5. (Optional) Fill in headers if the edge function requires them. ![Invoke function Supabase](invoke_function_4.png) 6. (Optional) Fill in the body key-value pair if the edge function requires a body. This is the case with `POST`, `PUT`, `PATCH`, and `DELETE` HTTP method types. ![Invoke function Supabase](invoke_function_5.png)   # Send Password Reset The `Send password reset` method is used to send an email to users to reset their passwords. To make a request to send a password reset, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign password reset`. ![Password reset Supabase](password_reset_1.png) 3. Scroll downwards under the Email menu and fill in the email (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)) and the redirect URL. ![Sign in Magic Link Supabase](password_reset_2.png)   # Sign in with Magic Link The `Sign in with magic link` method is used to authenticate an existing user to your application and it can even create new users if desired. There are two modes of signing in with a magic link: 1. **Email**: in this mode, we use an email. 2. **Phone**: in this mode, we use a phone number. ## Sign in with magic link using an email To make a request to sign in a user using an email and password, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign in with Magic Link`. ![Sign in with Magic Link Supabase](magic_link_1.png) 3. Scroll downwards to select the mode as `Email`: under the Email menu, fill in the email (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)); fill in the password and the redirect URL. ![Sign in Magic Link Supabase](magic_link_2.png) ## Sign in with magic link using a phone number 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign in with password`. ![Sign in with Magic Link Supabase](magic_link_1.png) 3. Scroll downwards to select the mode as `Phone`: under the phone menu, fill in the phone number (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)); fill in the password and choose the channel. ![Sign in with Magic Link Supabase](magic_link_3.png) ::: info NOTE **Should create user** is used to create a new user in case the email or phone number receiving the link happens not to be a user in your database. :::   # Sign in with OAuth provider The `Sign in with OAuth Provider` method is used to authenticate a user to your site using a widely used third-party application providing OAuth. To make a request to authenticate a user using OAuth, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign in with OAuth`. ![Sign in with OAuth Supabase](sign_in_oauth_1.png) 3. Scroll downwards to select the provider and add a redirect URL. ![Sign in with OAuth Supabase](sign_in_oauth_2.png) 4. Add the scopes required for your app. ![Sign in with OAuth Supabase](sign_in_oauth_3.png) ::: info NOTE **Scopes** vary widely based on the provider used, and each provider has a sample of scopes on their respective documentation. An example is Facebook's scopes listed here: [https://developers.facebook.com/docs/permissions](https://developers.facebook.com/docs/permissions) ::: ## How to sign in with OAuth inside the Configurator The Configurator Canvas is an iframe that proxies the live site. Because of that, some OAuth2 flow are not supported inside the configurator. However, you can still "simulate" signing in with OAuth by following these steps: 1. Publish the project and open the live site. 2. Sign in with the OAuth provider following the regular flow. 3. Open the developer tools and [access the local storage](https://developer.chrome.com/docs/devtools/storage/localstorage). 4. Copy the key-value pair that starts with `sb-` and paste it into the configurator's local storage, under `https://server.wized.com`. 5. Refresh the configurator canvas, and you should be signed in. This will allow you to see the logged-in state of the user in the configurator. Here's a video showing the process: <video src="https://media.wized.com/docs-v2/supabase-local-storage-oauth.mp4" controls loop muted title="Supabase oauth local storage auth token key copying"></video>   # Sign in with password The `Sign in with password` method is used to authenticate an existing user to your application. There are two modes of signing in with a password: 1. **Email**: in this mode, we use an email. 2. **Phone**: in this mode, we use a phone number. ## Sign in using an email and password To make a request to sign in a user using an email and password, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign in with password`. ![Sign in Supabase](sign_in_password_1.png) 3. Scroll downwards to select the mode as `Email`: under the Email menu, fill in the email (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)); fill in the password and the redirect URL. ![Sign in Supabase](sign_in_password_2.png) ## Sign in using a phone number and password 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign in with password`. ![Sign in Supabase](sign_in_password_1.png) 3. Scroll downwards to select the mode as `Phone`: under the phone menu, fill in the phone number (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)); fill in the password and choose the channel. ![Sign in Supabase](sign_in_password_3.png)   # Sign Out The `Sign Out` method is used to log out an authenticated user using Supabase. To make a request to sign out, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign Out`. ![Sign Out Supabase](sign_out.png)   # Sign up The `Sign up` method is used to add a new user to your Supabase database. There are two modes of signing up: 1. **Email**: In this mode, we use an email and a password. 2. **Phone**: In this mode, we use a phone number and a password. ## Sign up using an email and password To make a request to sign up a user using an email and password, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign Up`. ![Create Supabase Email Sign Up Request](sign_up_request_1.png) 3. Scroll downwards to select the mode as `Email`: Under the Email menu, fill in the email (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)); fill in the password and the redirect URL. ![Create Supabase Email Sign Up Request](sign_up_request_2.png) ::: info NOTE **Email Redirect URL** is optional. Its use is to take users to the page specified after confirming their email address. ::: 4. You can then optionally add some user metadata. ![Create Supabase Email Sign Up Request](sign_up_request_4.png) ## Sign up using a phone number and password 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign Up`. ![Create Supabase Phone Sign Up Request](sign_up_request_1.png) 3. Scroll downwards to select the mode as `Phone`: Under the phone menu, fill in the phone number (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)); fill in the password and choose the channel. ![Create Supabase Phone Sign Up Request](sign_up_request_3.png) 4. You can then optionally add some user metadata. ![Create Supabase Phone Sign Up Request](sign_up_request_4.png)   # Unsubscribe Real-Time The `Unsubscribe realtime` method is used to stop your client (web app) from receiving real-time updates from Supabase. To make a request to unsubscribe from real-time updates, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Unsubscribe realtime`. ![Unsubscribe realtime Supabase](unsubscribe_realtime_1.png) 3. Scroll downwards under the Unsubscribe menu and choose the request from which you want to stop listening to real-time updates. ![Unsubscribe realtime Supabase](unsubscribe_realtime_2.png)   # Update Item <video src="https://media.wized.com/docs-v2/updating_item.mp4" muted controls title="Updating an item in your Supabase database"></video> The `Update Item` method is used to update an existing item in your Supabase table. Here's how to do it: 1. **Specify the table**: Start by writing the name of the table in which you want to update an item. ![Specifying a table](../get-item/tasks.png) ![Table name](../get-item/table_name.png) 2. **Add record ID**: Next, provide the ID of the record that needs to be updated. This ID can be a fixed value or it can be a dynamic value from the Data Store. ![Specifying the record ID of the item that needs to be updated](record_id.png) 3. **Prepare key-value pairs**: Think of these as labels and input fields. Each key matches a column in your table, and the value is the data you want to update in that column. ![Supabase table](../create-item/supabase_table.png) 4. **Match keys to table headers**: Make sure the keys in your key-value pairs correspond to the headers (columns) in your table. ![Updating one key-value pair with dynamic data](data.png) Updating an item in Supabase is like updating your profile details on Twitter.   # Update User The `Update User` method is used to change the details of a user using Supabase. To make a request to update a user, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Update user`. ![Update User Supabase](update_user_1.png) 3. Scroll downwards: under the Email menu, fill in the new email (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)); fill in the new password and the new phone number. ![Update User Supabase](update_user_2.png) ::: info NOTE **Email**, **Phone**, and **Password** fields are optional. ::: 4. You can then optionally add some user metadata. ![Create Supabase Email Sign Up Request](../sign-up/sign_up_request_4.png)   # Upload file The `Upload file` method is used to upload files to your Supabase bucket storage. To make an upload file request, follow these steps: 1. First, ensure you have a storage bucket on your Supabase app. <video src="https://media.wized.com/docs-v2/upload_file_1.mp4" controls loop muted title="Create storage bucket in Supabase"></video> 2. Open the request panel and click on the `+` button to add a new request. 3. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Upload file`. ![Upload file Supabase](upload_file_2.png) 4. Scroll downwards to fill in the bucket name and storage path of the file. Use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md) to choose the file to be uploaded. ![Upload file Supabase](upload_file_3.png)   > [!WARNING] > This method requires the **Wized WordPress plugin** to be installed and active on your WordPress site. [Download the plugin →](/platforms/wordpress/releases)   # WordPress Requests ## What is a WordPress Request? A WordPress request is a way to integrate your application with WordPress using the WordPress REST API. You can retrieve data, create new posts, update existing ones, or delete content with WordPress as your backend. WordPress requests support custom post types and [ACF (Advanced Custom Fields)](https://www.advancedcustomfields.com/) out of the box. To use ACF fields, you need to have the ACF plugin installed on your WordPress site. You can use WordPress to just fetch data without any authentication (for public content like blog posts), or you can use the authentication system built by Wized so users can create accounts, sign in, and read/write data based on permissions set up in the Wized configurator. To create WordPress requests you will need to first create a WordPress Wized App. ## How to Create a WordPress App ### 1. Go to My Apps Begin by going to the 'My Apps' panel in Wized. 1. Click the `+` button at the top of the panel. 2. Add a name for your app for later reference, i.e. `WordPress App`. 3. Pick the `WordPress` option. 4. Enter your WordPress **Site URL** (e.g. `https://mysite.com`). ![WordPress App Panel](./../../apps/wordpress.webp) ### 2. Add Admin Credentials To allow Wized to communicate with your WordPress site, provide the following as secrets: 1. **Admin Username or Email** — the username or email of a WordPress admin account. 2. **Admin Password** — the password for that admin account. These credentials are securely stored and only used server-side when calling WordPress API endpoints. End users authenticate with their own username/email and password through Wized's built-in JWT authentication layer. > [!TIP] > We recommend creating a separate WordPress admin account dedicated to Wized, rather than using your personal admin credentials. ![Wordpress Wized Admin](./../../apps/wordpress-wized-admin.webp) ### 3. Install Wized Plugin After setting up your admin credentials, you can install the **Wized WordPress Plugin** on your WordPress site. The plugin enables the following features: - **Email Verification** — required for the [Send email verification](./methods/authentication/send-email-verification/index.md) and [Verify email](./methods/authentication/verify-email/index.md) methods. - **Advanced filtering and sorting** — required for complex ACF-based filtering and sorting in **Get posts** requests. > [!NOTE] > If you don't plan to use email verification or advanced ACF filtering/sorting, you can skip this step. However, installing the plugin is recommended as it unlocks more features now and in the future. The plugin is designed with security in mind, it exposes additional functionality exclusively to WordPress administrators, so regular users cannot access or abuse these capabilities. You can install the plugin directly from the **WordPress Plugin** panel in the Wized configurator. Once installed and activated, the panel will show a green **Active** status: ![Wized WordPress Plugin — Active](./images/plugin-installed.webp) If the plugin is not yet installed or activated on your site, you will see a **Plugin not detected** warning: ![Wized WordPress Plugin — Not detected](./images/plugin-not-detected.webp) ### 4. WordPress ACF Setup When setting up Advanced Custom Fields (ACF) for your post type, configure the following settings: #### General Settings Navigate to **Advanced Settings** and ensure the **Author** checkbox is enabled in the **General** tab. This is required to manage posts with authentication. ![Enable author](./images/post-type-enable-author.webp) #### REST API Settings In the **Rest API** tab, enable **Show In Rest API** so ACF fields are accessible through the WordPress REST API. ![Enable rest api](./images/post-type-show-in-rest.webp) ### 5. Configure your request #### Create a new request, and add basic info - Name your request, i.e. `get_blog_posts` - Add your request to a folder (optional) - Select your WordPress App from the dropdown #### Select method You will need to select one of the methods for a specific functionality: **Authentication methods:** - [Sign up](./methods/authentication/sign-up/index.md): Create a new user with email, username, and password - [Sign in](./methods/authentication/sign-in/index.md): Sign in a user with username and password - [Get user](./methods/authentication/get-user/index.md): Get the currently authenticated user - [Request password reset](./methods/authentication/request-password-reset/index.md): Send a password reset email - [Password reset](./methods/authentication/password-reset/index.md): Reset password with a new password - [Send email verification](./methods/authentication/send-email-verification/index.md): Send a verification email to confirm a user's email address _(requires Wized WordPress plugin)_ - [Verify email](./methods/authentication/verify-email/index.md): Verify a user's email using the token from the verification link _(requires Wized WordPress plugin)_ **Posts methods:** The WordPress integration currently supports: - **Post** - Standard WordPress posts without Advanced Custom Fields - **Post with ACF** - Posts with Advanced Custom Fields (requires ACF plugin to be installed) When using "Post with ACF", the ACF plugin must be installed and activated. This enables you to treat posts as a table with custom fields defined in ACF, allowing you to create, update, and filter posts based on any custom fields you've configured. All post methods include a **Post Type** dropdown that lets you select which type of content to work with (e.g. `Post`, `Post with ACF`, or any custom post type). When a custom post type is selected, ACF (Advanced Custom Fields) become available for create and update operations, and ACF filtering is available for list operations. - **Get posts**: Get a list of posts with filtering, sorting, and pagination - **Get post**: Get a single post by ID - **Create post**: Create a new post (with optional ACF fields for custom post types) - **Update post**: Update an existing post (with optional ACF fields for custom post types) - **Delete post**: Delete a post ### 4. Permissions For post methods, you can configure who can access the data by setting **Permissions** and optionally **Roles**. ![Request permissions](./images/request-permissions.webp) #### Permission Levels - **Allow Any**: Any user (authenticated or not) can perform this operation. When selected, the Roles field is not shown. - **Authenticated**: Only authenticated users can perform this operation. When selected, you can additionally specify which WordPress roles are allowed to access the data. - **Owner**: Only the owner (creator) of the content can perform this operation. When selected, the Roles field is not shown. #### Roles When **Authenticated** is selected as the permission level, you can further restrict access by specifying which WordPress roles are allowed: - **Subscriber**: Users with "Subscriber" role - **Contributor**: Users with "Contributor" role - **Author**: Users with "Author" role - **Editor**: Users with "Editor" role - **Administrator**: Users with "Administrator" role > [!NOTE] > By default, each user created from Wized has the "Subscriber" role in WordPress, so **Subscriber** is selected by default when choosing roles. #### Require Email Verification When the permission level is set to **Authenticated** or **Owner**, you can enable the **Require Email Verification** checkbox to block users whose email address has not yet been verified from performing that action. > [!WARNING] > This option requires the **Wized WordPress plugin** to be installed on your WordPress site. To implement the email verification flow, use the [Send email verification](./methods/authentication/send-email-verification/index.md) and [Verify email](./methods/authentication/verify-email/index.md) methods. #### Use Cases and Recommendations **Allow Any** is ideal for: - Waiting list forms - Newsletter subscription forms - Contact forms - Public content that doesn't require authentication - Any operation where you want to collect data from anonymous users **Owner** is the default selection for: - **Get**, **Update**, and **Delete** operations: Ensures users can only access and modify their own content - Use this when you want to restrict data access to only the content creator **Authenticated with Roles** is recommended for: - **Create** operations: Control which user roles can create new content on WordPress - Content that should only be visible to logged-in users with specific permissions - Operations that require role-based access control   ## Get user method With the "Get user" method, you can fetch the currently authenticated user's profile. This is typically called when the app loads for the first time to restore the user session from a stored token. ### Response The response will contain the authenticated user's profile data. If the token is invalid or expired, the request will fail. ![Get user request](../../../images/get-user.webp)   ## Password reset method With the "Password reset" method, you can implement the final step of the password reset flow in your application. After the user clicks on the link from the email sent by the "Request password reset" method, they will be redirected to your specified page with a reset token in the query parameters. This method uses that token to set the new password. ### Parameters - **Password**: This is a required [function field](/function-editor/) where you can return the user's new password. > [!NOTE] > The reset token is automatically extracted from the URL query parameters. > Make sure the user lands on this page from the password reset email link. ![Password reset request](../../../images/reset-password.webp)   ## Request password reset method With the "Request password reset" method, you can send a password reset email to the user. An email with a reset link will be sent to the user's email address. The link will redirect the user to the page you specify in the redirect URL parameter. ### Parameters - **Email**: This is a required [function field](/function-editor/) where you can return the user's email address. - **Redirect URL**: This is a required [function field](/function-editor/) where you can return the Full URL of the page where the user will input their new password. The reset token will be appended as a query parameter. ![Request password reset](../../../images/request-password-reset.webp)   ## Send email verification method  With the "Send email verification" method, you can send a verification email to a user so they can confirm their email address. An email containing a verification link will be sent to the user. The link redirects them to the URL you specify, with a `verification-token` query parameter automatically appended. ### Parameters - **Verification URL**: This is a required [function field](/function-editor/) where you can return the full URL of the page where the user will land to complete email verification. The verification token will be appended automatically as a `verification-token` query parameter. ### Response On success, an email containing the verification link will be sent to the user's registered email address. ### Flow This method is typically used as part of a two-step email verification flow: 1. Call **Send email verification** after sign-up (or whenever you want to trigger a verification email). 2. The user clicks the link in their email and lands on your verification page. 3. On that page, call the [**Verify email**](../verify-email/) method — the verification token is automatically read from the URL.   ## Sign in method With the "Sign in" method, you can implement login functionality in your application. The user will be authenticated using their username/email and password. ### Parameters - **Username**: This is a required [function field](/function-editor/) where you can return the user's username or email. - **Password**: This is a required [function field](/function-editor/) where you can return the user's password. ### Response On successful sign-in, an authentication token will be stored. The response will contain the user data. ![Sign in with props](../../../images/sign-in-with-props.webp)   ## Sign up method With the "Sign up" method, you can implement user registration functionality in your application. A new WordPress user will be created with the provided email, username, and password. ### Parameters - **Username**: This is a required [function field](/function-editor/) where you can return the desired username. - **Email**: This is a required [function field](/function-editor/) where you can return the user's email address. - **Password**: This is a required [function field](/function-editor/) where you can return the user's password. ### Response On successful sign-up, the user will be automatically signed in and an authentication token will be stored. The response will contain the user data. ![Sign up](../../../images/sign-up.webp)   ## Verify email method  With the "Verify email" method, you can complete the email verification flow by validating the token the user received in their verification email. This method should be called on the page the user lands on after clicking the verification link. The verification token is automatically extracted from the `verification-token` URL query parameter — no additional configuration is needed. ### Parameters This method has no manually configured parameters. The verification token is read automatically from the URL. ### Response On success, the user's email address is marked as verified in WordPress. ### Flow This method is the second step of the email verification flow: 1. Call [**Send email verification**](../send-email-verification/) to send the verification email to the user. 2. The user clicks the link and lands on your verification page. 3. Call **Verify email** on that page — the token is automatically picked up from the URL. ### Require email verification on requests You can enforce that a user's email must be verified before they can perform certain actions (e.g. creating or reading posts). This is configured via the **Require Email Verification** checkbox in the **Permissions** section of any post request.   ## Create Post method With the "Create item" method, you can create a new post item. When selecting a post type, you can choose between: - **Post** — a standard WordPress post with native fields only - **Post with ACF** — a post that includes both standard WordPress fields and ACF (Advanced Custom Fields) fields ### Main Parameters - **Post Type**: This is a required dropdown field where you can choose between: - **Post** — creates a standard WordPress post with native fields only - **Post with ACF** — when selected, a second dropdown will appear listing all custom post types that have ACF fields configured. Select the desired custom post type from that dropdown. ![Post type selector](../../../images/post-with-acf-selector.webp) ### Permissions You can select who can create items. You can select from: - **Allow Any**: Any user can create an item - **Authenticated**: Any authenticated user can create an item - **Subscriber**: Users with at least "Subscriber" role can create an item - **Contributor**: Users with at least "Contributor" role can create an item - **Author**: Users with at least "Author" role can create an item - **Editor**: Users with at least "Editor" role can create an item - **Administrator**: Only users with "Administrator" role can create an item ![Permissions](../../../images/request-permissions.webp) --- ## Post When you select a standard post type, the standard WordPress post fields will be listed as [function fields](/function-editor/), where you can specify the value for each one. ### Post Fields Common fields include: - **Title**: The post title - **Content**: The post content - **Excerpt**: A short summary of the post - **Status**: The post status (e.g. `publish`, `draft`). Note: Items are automatically saved as `private`. Use with caution only if you understand the permission implications, as retrieval, editing, and deletion are managed through the admin account and permissions you've configured. ![Post fields](../../../images/native-posts-fields.webp) --- ## Post with ACF When you select a post type that has ACF (Advanced Custom Fields) configured, both the standard WordPress post fields and the ACF fields will be listed as [function fields](/function-editor/) in a single unified view. ### Post Fields The same standard WordPress post fields are available: - **Title**: The post title - **Content**: The post content - **Excerpt**: A short summary of the post - **Status**: The post status (e.g. `publish`, `draft`). Note: Items are automatically saved as `private`. Use with caution only if you understand the permission implications, as retrieval, editing, and deletion are managed through the admin account and permissions you've configured. ### ACF Fields All ACF fields configured for this post type will appear below the standard fields as [function fields](/function-editor/), where you can specify the value for each one. ![Post with ACF fields](../../../images/acf-posts-fields.webp)   ## Delete Post method With the "Delete item" method, you can delete an existing post item. ### Main Parameters - **Post Type**: This is a required dropdown field where you can choose between: - **Post** — deletes a standard WordPress post - **Post with ACF** — when selected, a second dropdown will appear listing all custom post types that have ACF fields configured. Select the desired custom post type from that dropdown. - **Post Type ID**: This is a required [function field](/function-editor/) where you can return the ID of the item you want to delete. ![Post type selector](../../../images/post-with-acf-selector.webp) ### Permissions You can select who can delete the data. By default, **Owner** is selected, this means only the user who created a post can delete it, which is the recommended setting in most cases. You can select from: - **Owner**: Only the user who created the post can delete it _(default, recommended)_ - **Allow Any**: Any user can delete the data - **Authenticated**: Any authenticated user can delete the data - **Subscriber**: Users with at least "Subscriber" role can delete the data - **Contributor**: Users with at least "Contributor" role can delete the data - **Author**: Users with at least "Author" role can delete the data - **Editor**: Users with at least "Editor" role can delete the data - **Administrator**: Only users with "Administrator" role can delete the data ![Owner permission](../../../images/owner-permission.webp) ![Permissions](../../../images/request-permissions.webp) > [!NOTE] > Deleting an item is permanent. Make sure you have the correct item ID before performing this operation. ![Delete item](../../../images/delete-acf-item.webp)   ## Update Post method With the "Update item" method, you can update an existing post item. When selecting a post type, you can choose between: - **Post** — a standard WordPress post with native fields only - **Post with ACF** — a post that includes both standard WordPress fields and ACF (Advanced Custom Fields) fields ### Main Parameters - **Post Type**: This is a required dropdown field where you can choose between: - **Post** — updates a standard WordPress post with native fields only - **Post with ACF** — when selected, a second dropdown will appear listing all custom post types that have ACF fields configured. Select the desired custom post type from that dropdown. - **Post Type ID**: This is a required [function field](/function-editor/) where you can return the ID of the item you want to update. ![Post type selector](../../../images/post-with-acf-selector.webp) ### Permissions You can select who can edit the data. By default, **Owner** is selected, this means only the user who created a post can edit it, which is the recommended setting in most cases. You can select from: - **Owner**: Only the user who created the post can edit it _(default, recommended)_ - **Allow Any**: Any user can edit the data - **Authenticated**: Any authenticated user can edit the data - **Subscriber**: Users with at least "Subscriber" role can edit the data - **Contributor**: Users with at least "Contributor" role can edit the data - **Author**: Users with at least "Author" role can edit the data - **Editor**: Users with at least "Editor" role can edit the data - **Administrator**: Only users with "Administrator" role can edit the data ![Owner permission](../../../images/owner-permission.webp) ![Permissions](../../../images/request-permissions.webp) --- ## Post When you select a standard post type, the standard WordPress post fields will be listed as [function fields](/function-editor/), where you can specify the new value for each one. ### Post Fields Common fields include: - **Title**: The post title - **Content**: The post content - **Excerpt**: A short summary of the post - **Status**: The post status (e.g. `publish`, `draft`). Note: Items are automatically saved as `private`. Use with caution only if you understand the permission implications, as retrieval, editing, and deletion are managed through the admin account and permissions you've configured. ![Post fields](../../../images/native-posts-fields.webp) --- ## Post with ACF When you select a post type that has ACF (Advanced Custom Fields) configured, both the standard WordPress post fields and the ACF fields will be listed as [function fields](/function-editor/) in a single unified view. ### Post Fields The same standard WordPress post fields are available: - **Title**: The post title - **Content**: The post content - **Excerpt**: A short summary of the post - **Status**: The post status (e.g. `publish`, `draft`). Note: Items are automatically saved as `private`. Use with caution only if you understand the permission implications, as retrieval, editing, and deletion are managed through the admin account and permissions you've configured. ### ACF Fields All ACF fields configured for this post type will appear below the standard fields as [function fields](/function-editor/), where you can specify the new value for each one. ![Post with ACF fields](../../../images/update-acf-item.webp)   ## Get Post method With the "Get item" method, you can retrieve a single post item by its ID. ### Main Parameters - **Post Type**: This is a required dropdown field where you can choose between: - **Post** — retrieves a standard WordPress post - **Post with ACF** — when selected, a second dropdown will appear listing all custom post types that have ACF fields configured. Select the desired custom post type from that dropdown. - **Post ID**: This is a required [function field](/function-editor/) where you can return the ID of the item you want to retrieve. ![Post selector](../../../images/post-with-acf-selector.webp) ### Permissions You can select who can retrieve the data. By default, **Owner** is selected, this means only the user who created a post can retrieve it, which is the recommended setting in most cases. You can select from: - **Owner**: Only the user who created the post can retrieve it _(default, recommended)_ - **Allow Any**: Any user can retrieve the data - **Authenticated**: Any authenticated user can retrieve the data - **Subscriber**: Users with at least "Subscriber" role can retrieve the data - **Contributor**: Users with at least "Contributor" role can retrieve the data - **Author**: Users with at least "Author" role can retrieve the data - **Editor**: Users with at least "Editor" role can retrieve the data - **Administrator**: Only users with "Administrator" role can retrieve the data ![Owner permission](../../../images/owner-permission.webp) ![Permissions](../../../images/request-permissions.webp)   ## Get Posts List method With the "Get list items" method, you can retrieve and filter multiple items from a specified post type. When selecting a post type, you can choose between: - **Post** — retrieves standard WordPress posts with native fields only - **Post with ACF** — retrieves posts that include both standard WordPress fields and ACF (Advanced Custom Fields) fields ### Main Parameters - **Post Type**: This is a required dropdown field where you can choose between: - **Post** — retrieves standard WordPress posts - **Post with ACF** — when selected, a second dropdown will appear listing all custom post types that have ACF fields configured. Select the desired custom post type from that dropdown. ![Post type selector](../../../images/post-with-acf-selector.webp) ### Permissions You can select who can retrieve the data. By default, **Owner** is selected, this means only the user who created a post can retrieve it, which is the recommended setting in most cases. You can select from: - **Owner**: Only the user who created the post can retrieve it _(default, recommended)_ - **Allow Any**: Any user can retrieve the data - **Authenticated**: Any authenticated user can retrieve the data - **Subscriber**: Users with at least "Subscriber" role can retrieve the data - **Contributor**: Users with at least "Contributor" role can retrieve the data - **Author**: Users with at least "Author" role can retrieve the data - **Editor**: Users with at least "Editor" role can retrieve the data - **Administrator**: Only users with "Administrator" role can retrieve the data ![Owner permission](../../../images/owner-permission.webp) ![Permissions](../../../images/request-permissions.webp) ### Pagination Parameters You can paginate the results with the following params: - **Page size**: The number of items returned in each request. - **Offset**: The page number to fetch. Use this to implement pagination by incrementing the offset value. ![Pagination](../../../images/posts-pagination.webp) --- ## Post When you select a standard post type, you can sort and filter items using native WordPress post fields. ### Sort Parameters You can add multiple sort conditions and each condition will need to have params: - **Field Type**: A dropdown to select whether to sort by a native post field. - **Sort by**: This is a required dropdown field where you can select the native post field to apply sorting. - **Order**: This is a required dropdown field with values: `Ascending`, `Descending`. - **Sort type**: An optional dropdown to specify how the field value should be interpreted for sorting (e.g. `Alphabetical`, `Numeric`, `Date`). ### Filter Parameters You can add multiple filters on standard WordPress fields. Each filter will need to have params: - **Field**: This is a required dropdown field where you can select the post field to filter by. - **Condition**: This is a required dropdown field with values: `Equal`, `Does not equal`, `Includes`, `Does not include`. - **Value**: This is a required [function field](/function-editor/) where you can return the value to filter with. ![Post filter](../../../images/post-native-filter.webp) ![Post filter condition options](../../../images/native-posts-filter-condition-options.webp) --- ## Post with ACF When you select a post type with ACF configured, you can sort and filter items using both native WordPress fields and ACF meta fields. ### Sort Parameters You can add multiple sort conditions and each condition will need to have params: - **Field Type**: A dropdown to select whether to sort by a `Native Field` or an `ACF Field`. - **Sort by**: This is a required dropdown field where you can select the field to apply sorting. - **Order**: This is a required dropdown field with values: `Ascending`, `Descending`. - **Sort type**: An optional dropdown to specify how the field value should be interpreted for sorting (e.g. `Alphabetical`, `Numeric`, `Date`). ![ACF sort](../../../images/post-acf-sort.webp) ### Filter Parameters You can add multiple filters on standard WordPress fields. Each filter will need to have params: - **Field**: This is a required dropdown field where you can select the post field to filter by. - **Condition**: This is a required dropdown field with values: `Equal`, `Does not equal`, `Includes`, `Does not include`. - **Value**: This is a required [function field](/function-editor/) where you can return the value to filter with. ### ACF Filter Parameters You can add multiple filters on ACF (Advanced Custom Fields) meta fields. Each filter will need to have params: - **Field**: This is a required dropdown field where you can select the ACF field to filter by. - **Condition**: This is a required dropdown field with values: `Equal`, `Does not equal`, `Includes`, `Does not include`, `In (array)`, `Not in (array)`. - **Value**: This is a required [function field](/function-editor/) where you can return the value to filter with. ![ACF filter condition options](../../../images/acf-fields-filtering-condition-options.webp)   # Put all the pieces together ## Introduction It’s time to turn all this architecture into a functional web application! At this stage, we will bring together all the elements we have explored so far: the type of application, the key functionalities, the technological stack, and the workflow. With Wized as your ally, you will transform your architecture into an interactive and dynamic experience for your users. ## Designing the Workflow The first step in bringing your app to life is defining the workflow – the sequence of steps users will follow to interact with your site and achieve their goals. A well-designed workflow ensures an intuitive and fluid experience, which increases your users’ satisfaction and engagement. - **Identify key tasks:** What key actions do you want your users to take? Sign up, log in, search for products, make a purchase, manage their profile, etc.? - **Create a visual map:** Use flowcharts or prototyping tools to visualize the sequence of steps users will follow to complete each task. - **Define interactions:** What UI elements will you need at each step? What actions and events will trigger the transition from one step to another? - **Consider different scenarios:** What happens if the user makes a mistake? What alternative options will you offer? How will you handle exceptional cases? ## Implementing logic with Wized Once you have the workflow clear, it's time to implement logic and interactivity in Wized. For each step of the flow, identify: - **The elements involved:** What buttons, forms, lists, or other elements of your Webflow website will be needed at each step? - **Actions to perform:** What should happen when the user interacts with each element? Submit a form, make a request to an API, show or hide content, etc.? - **The events that will trigger the actions:** What specific events, such as clicks, value changes, or form submissions, will trigger the actions? - **Element settings:** How should elements change in response to actions or data received from APIs? Use settings like Set Text , Set Visibility , Render List , and Set Style to customize the appearance and behavior of your elements. - **Conditional Logic:** Use the Function Editor to define conditions and validations that control the flow of your application and personalize the user experience. ## Connecting to the backend and external APIs If your application requires a backend or uses external services, it is important to understand how data will flow between these components and your frontend in Wized. - **API Requests:** Use Wized API requests to send and receive data from your backend or external services. - **Data Storage:** If you use a backend, make sure that data is stored and managed securely and efficiently in your database. - **Data Processing:** Use the Function Editor to process and transform data received from APIs or the backend before displaying it to the user or using it in your logic.   # Choosing the stack Selecting the right technology stack is a critical step in building a robust web application. Your technology stack defines the tools and services that will power every aspect of your project from the user interface to the backend and data management. A well chosen stack ensures that your application is functional, scalable, secure, and easy to maintain. ## The role of wized in your technology stack Wized empowers the frontend of your application by providing low-code tools for interactivity, logic, and dynamic data handling. It seamlessly connects your Webflow designs to various external services, but it is not a replacement for a robust backend or database. Instead, Wized complements these components by managing the logic and user interactions on the client side. ## Why is choosing the right technology stack important? - **Functionality:** Every technology has its own strengths and limitations. Choosing the right combination allows you to implement the features you need efficiently. - **Scalability:** As your application grows, the stack must support more users and increased data loads without sacrificing performance. - **Ease of development and maintenance:** Select technologies that align with your team’s skills, so you can develop and update your project smoothly over time. - **Cost efficiency:** Evaluate the expenses associated with each technology, including licensing, hosting, and maintenance fees, to ensure your project stays within budget. - **Community and support:** Opt for technologies with active communities and comprehensive support resources, which can be invaluable when troubleshooting or seeking best practices. ## Key components of your technology stack ### Frontend: - **Webflow:** A visual tool for designing and building your app's user interface. - **Wized:** The low-code platform that adds interactivity, custom logic, and dynamic data integration to your Webflow projects. ### Backend (optional): - **SaaS platforms:** Services like Firebase, Supabase, or Xano offer complete backend solutions with databases, user authentication, and other essential functionalities managed in the cloud. - **Custom backend:** Develop your own backend using technologies such as Node.js, Python, or Ruby if you require full control or specialized features. - **Automation tools:** Tools like Zapier enable you to connect different applications and automate workflows without building a full backend. ### Database: - **Relational databases:** Options like PostgreSQL or MySQL are ideal for structured data with complex relationships. - **NoSQL databases:** Solutions like MongoDB or Firebase provide flexibility and scalability for unstructured or rapidly changing data. - **Integrated SaaS databases:** Platforms such as Airtable or Supabase offer easy-to-use databases that integrate directly via APIs. ### External APIs: - **API integrations:** Connect to various external services to add functionality—such as payment processing, notifications, maps, or social media features—without building these capabilities from scratch. ## When to consider using a backend Even though Wized handles complex frontend logic, a backend might be necessary when: - **Data security and privacy:** Securely managing sensitive information, like passwords or financial data. - **Scalability:** Supporting a high volume of users or data requires server-side resources. - **Data centralization:** Ensuring consistency when multiple users access or modify shared data. - **Resource-Intensive tasks:** Offloading heavy computations or processing from the user's browser. - **Integrations with other systems:** Facilitating communication with external systems, such as CRMs or inventory management systems. ### Backend options - **SaaS (software as a service):** Platforms like Firebase, Supabase, or Xano offer ready-to-use backend solutions. - **Custom backend:** Building your own backend offers maximum flexibility but requires advanced technical knowledge. - **Automation tools:** Tools like Zapier can integrate simple functionalities and connect your app with other services without heavy programming. ## Considerations when choosing your stack When selecting your technology stack, consider: - **Scalability:** Can the solution grow with your application? - **Cost:** What are the financial implications of each component? - **Ease of Use and integration:** Does the technology align with your team’s skills and integrate well with other tools? - **Security:** How well does the solution protect your data and that of your users? - **Support and community:** Is there sufficient documentation and community support available? By carefully choosing your technology stack, you establish a strong foundation for your project. This strategic approach ensures that your application can evolve, remain maintainable, and deliver a seamless user experience as it grows.   # Software architecture Software architecture is the comprehensive blueprint of your entire web application. It encompasses not only the dynamic features managed by Wized such as workflows, data flows, and interactive UI updates but also the structure and integration of external systems like databases, third-party APIs, and backend services. ## Why is a well-defined architecture important? A clear and well-planned software architecture offers several benefits: - **Clarity and Organization:** It provides a structured roadmap for development, helping you understand how each component interacts with the others. This clarity minimizes confusion and makes collaboration easier. - **Scalability:** A robust architecture is designed to grow. It allows you to add new features, integrate additional services, and handle increased user demand without major overhauls. - **Performance and security:** Thoughtful design ensures that data flows efficiently between systems while protecting sensitive information. This leads to better performance and a more secure application. - **Efficient troubleshooting:** With a clear architectural blueprint, you can quickly identify where issues may be occurring. Understanding the dependencies between components helps you diagnose and resolve problems faster. - **Future-Proofing your project:** By planning your architecture with both current needs and future growth in mind, you create a flexible foundation that can adapt to evolving requirements and new technologies. ## Planning your architecture Before starting development, take the time to plan your project’s architecture thoroughly. Consider the following steps: 1. **Define Your project goals:** Clarify what you want to achieve. Identify the key features, user interactions, and external systems required for your application. 2. **Map Out the components:** Create a visual diagram or flowchart that outlines: - The **frontend** design (using Webflow) and its user interface. - The **dynamic logic** handled by Wized (such as requests, events, and workflows). - The **backend systems** (APIs, databases, third-party services) that provide data and functionality. 3. **Identify interactions and dependencies:** Understand how data flows between different parts of your system. Determine which components need to react to changes in others. For example, a successful login request might update user data, which in turn triggers a navigation event. 4. **Plan your workflows:** Define the sequence of actions that should occur in response to events. Workflows might include: - User interactions (e.g., form submissions or button clicks) - API requests and responses - Conditional logic to update UI elements or variables 5. **Consider future growth:** Ensure that your design allows for easy integration of new features or services. A modular approach helps you add or modify components without disrupting the entire system. ## The Unified approach By combining the strengths of Wized’s reactive features with a solid overall architecture, you create an application where every component—from the frontend visuals to the backend data interactions—works in harmony. This unified approach ensures that: - Changes in one area (like an API response or user input) immediately propagate through the system. - The application remains flexible, scalable, and easy to maintain. - You can build complex, automated workflows without needing extensive coding knowledge. Taking the time to plan and structure your software architecture lays the groundwork for a successful, resilient web application that can evolve with your needs.   # Setting up your first project ## Getting started ### 1. Create your account on Wized - Go to [Wized](https://app.wized.com/) and create a free account. --- ### 2. Create your first project - Inside the Wized dashboard, click on the [`New Project`](https://app.wized.com/new) button. --- ### 3. Setting up Wized with Webflow #### Staging URL ::: details Click to expand - Paste the URL of your Webflow staging domain (example.webflow.io). [More info here](https://help.webflow.com/hc/en-us/articles/33961419650067-Webflow-staging-subdomain) ![staging-domain](staging-domain.png) ::: #### Project name ::: details Click to expand - Choose a unique and descriptive name for your project. ::: #### Wized script ::: details Click to expand 1. Copy the script provided by Wized and paste it into the `<head>` section of your Webflow project. ![embed-code](embed-code.png) 2. In Webflow, go to the Website Settings panel. ![settings-project](settings-project.png) 3. Look for the `Custom Code` section. ![settings-overview](settings-overview.png) 4. Paste the Wized script into the `<head>` section. 5. Save changes and publish your site. 6. Click the `Create project` button to finalize. ![create-project](create-project.png) ::: ### 4. Managing your project in Wized configurator - View a canvas of your website inside the [Wized configurator](/wized-configurator/). - This interactive version allows you to experiment and add features in real-time. --- ### 5. Adding the Wized attribute - Add the [Wized attribute](/start-here/getting-started/wized-attribute) to specific elements in Webflow. - Only elements with this attribute can be used for functionalities, actions, or events.   # Wized attribute The Wized attribute is essential for setting up elements on your Webflow website within the Wized configurator. By adding this attribute to any element, the Wized configurator can identify and manage the elements you want to customize, allowing you to add specific settings and behaviors. ## Adding the Wized attribute ::: details **Step by step guide** 1. **Select the element** - Identify in `Webflow` the element to which you want to add the Wized Attribute. ![elements-nav](elements-nav.png) 2. **Go to the element settings tab** - Navigate to the Settings tab for the selected element. ![element-settings](element-settings.png) 3. **Custom attributes section** - Locate the Custom Attributes section. ![custom-attribute](custom-attribute.png) 4. **Add a new attribute** - Use one of the supported keys [`wized`, `wized-cloak`, or `wized-loader`](#types-of-wized-attributes). ::: ## Types of Wized attributes ### **Wized attribute** - The fundamental attribute for making an element interactive. - Enables Wized configurator to recognize and manage the element dynamically. #### Example: ![example_wized_attribute](example_wized_attribute.png) ::: tip Note Assign a unique value as the element name. This value is crucial within Wized for identifying the specific element and adding the appropriate settings. ::: --- ### **Wized cloak attribute** - Prevents elements from flashing or displaying unstyled content during initial page load. **Watch the implementation guide** <video controls src="https://media.wized.com/docs-v2/preventing-content-flashes-with-wized-cloak-attribute.mp4" title="Preventing content flashes with wized cloak attribute" preload="none"></video> ##### Code Snippet: ```html <style> [wized-cloak] { display: none; } </style> ``` --- ### **Wized loader attribute** - Used for elements functioning as **page load loader**. - Ensures visual feedback when processing a request. #### Code snippet: ```html <style> [wized-loader] { display: flex; } </style> ``` #### Example: ![custom-attribute](custom-attribute.png) ::: tip Note Use this attribute only for page loaders. For other loaders (e.g., after user actions), use a visibility setting instead. :::   # 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](/requests/) 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 [requests](/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: ::: tip Note asdsa For more information, please [click here](/requests/). :::   # Booleans `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:** ```javascript let userLoggedIn = true; if (userLoggedIn) { console.log('Welcome back!'); } else { console.log('Please log in.'); } ```   # 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.   # 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.   # 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.   # 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.   # Introduction ## 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 **Using logical operators:** ```javascript 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 **Using the ternary operator:** ```javascript let age = 18; let canVote = age >= 18 ? 'You can vote' : 'You cannot vote'; console.log(canVote); ```   # Wized 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.   # 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).   # 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.   # Start here ## What is Wized? <iframe width="100%" height="400" src="https://www.youtube.com/embed/0p3Ya38Jkvo?si=NXQhBhiQcZgqRNq_" frameborder="0" allowfullscreen></iframe> Wized serves as an intelligent layer on top of your [Webflow](https://webflow.com/) website, allowing you to add advanced functionality and custom logic without the need to write complex JavaScript code. It facilitates the connection between your Webflow website and the WebApps world. You don't need to be a advance developer to create dynamic and customized WebApps. Wized provides a visual, intuitive, and secure environment to create functionalities such as: - [Connecting your website to external APIs](https://docs.wized.com/requests/) - [Interactivity in your UI elements](https://docs.wized.com/elements/) - [Add events to your website](https://docs.wized.com/global-events/) - [Adding custom logic](https://docs.wized.com/function-editor/) ## How does it work? Wized takes your website created in Webflow as a base, allowing you to choose any element from your site to add specific events or actions in response to your end users' interactions. This enables you to dynamically modify the CSS properties of your elements in real time, execute any type of event such as calling an API to send or receive data, or simply run any type of complex logic in JavaScript through our function editor. ## Why choose Wized? - **Simplicity without sacrificing power**: Say goodbye to the complexities of traditional coding. Wized offers an intuitive interface, enabling your team to incorporate advanced features into your website without requiring extensive programming skills. For more on getting started, visit our [Setup Guide](/start-here/getting-started/). - **Accelerate development**: Achieve advanced functionality in a fraction of the time it would typically take to code from scratch. - **Seamless Webflow integration**: Wized integrates directly with your Webflow projects, allowing your team to leverage existing designs and enhance interactivity without starting from scratch. Explore the [Initial configuration](https://docs.wized.com/getting-started/#first-steps) to see how it works. - **Flexibility and customization**: With Wized, your team has full control over application behavior. Create custom interactions, connect to external APIs, manage data, and much more. - **Effortless collaboration**: Wized facilitates collaboration between designers and developers, enabling seamless integration between visual design and application logic. ## Who should use Wized? Wized is a powerful and adaptable platform designed for a wide range of users, including designers and developers. It empowers individuals at all levels of programming expertise to create sophisticated web applications efficiently. ### Webflow developers - **Unlock the full potential of Webflow websites:** Wized enhances your Webflow websites by allowing the integration of custom logic, dynamic interactions, and connections to external services. - **Effortlessly build complex products:** Wized equips you with the tools to implement advanced features such as dynamic forms, user memberships, authentication, and payment gateways—all without requiring extensive coding knowledge. - **Broaden your service offerings:** By utilizing Wized, you can create more sophisticated and interactive web applications for your clients. This not only adds significant value to your projects but also distinguishes you from your competitors. - **Optimize development times:** Wized streamlines the integration of advanced features, enhancing your efficiency and profitability within your agency. ### Entrepreneurs - **Develop interactive prototypes:** With Wized, you can quickly create functional and visually appealing Minimum Viable Products (MVPs) without the need for a full development team. - **Reduce costs and accelerate launch:** Wized allows you to build and validate your ideas at a fraction of the cost of hiring developers. This facilitates faster market entry and concept validation. - **Scale your project:** Wized is designed to grow with your project. As your needs evolve, you can seamlessly add new features and complexity without changing platforms. ### Agencies - **Enhance your service offerings:** By incorporating Wized into your workflow, you can deliver more complex and interactive web applications to your clients, thereby increasing the value of your projects and setting yourself apart from the competition. - **Streamline development times:** Wized enables rapid development of advanced functionalities, which leads to increased profitability for your agency. - **Flexibility and customization:** Wized allows you to tailor each project to the specific requirements of your clients, creating customized solutions without compromising efficiency. ### Full-Stack developers - **Save time and effort:** Wized simplifies the implementation of complex functionalities on the frontend, reducing the need for repetitive coding and infrastructure management. - **Seamless integration with Webflow:** Combine the visual design capabilities of Webflow with Wized’s logic and interactivity to build comprehensive and efficient web applications. - **Focus on business logic:** Spend more time enhancing your application's core logic rather than getting caught up in repetitive tasks. - **Flexibility and customization:** Adapt each project to meet your clients' unique needs, creating tailored solutions without sacrificing productivity. - **Accelerate development:** Achieve advanced functionalities significantly faster than traditional coding methods would allow.   # What can Wized bring to your project? With Wized, you can significantly elevate the functionality of your webApp. Here are several key capabilities: <iframe width="100%" height="400" src="https://www.youtube.com/embed/mj-C5DQfBw0?si=pG_uy0RWkzSK8DIC" frameborder="0" allowfullscreen></iframe> ## Advanced logic Wized allows you to integrate complex logic directly into your website. You can write JavaScript code using the [function editor](/function-editor/) to create custom dynamic behaviors. This allows you to provide a more interactive experience without requiring extensive programming skills. ## User management You can easily manage user registrations, logins, and access control through Wized. Which help ensure that only authorized users can access specific features or content. You can customize the user journey based on their roles, enhancing security and personalization. ## API integrations Wized enables you to [connect your website](/requests/) to third-party services via APIs rest. This capability allows you to fetch and display dynamic data, such as product listings or user information, directly from external sources. By integrating APIs like payment gateways or notification services, you can streamline processes such as handling transactions or sending user alerts. ::: tip Note For more information, please [click here](/requests/). ::: ## Database connections Connecting your website to external databases (e.g., [Firebase](https://firebase.google.com/), [Supabase](https://supabase.com/), [Xano](https://www.xano.com/), etc) is straightforward with Wized. You can store and retrieve user information, subscriptions, and other relevant data, ensuring that your application operates efficiently with real-time data updates. ::: tip Note For more information, please [click here](/software-architecture/choosing-the-stack#databases-and-data-management). ::: ## Payment processing Wized facilitates the integration of secure payment gateways, allowing you to manage subscriptions and process payments seamlessly. You can respond to payment events, update user subscription statuses, and send notifications based on successful or failed transactions. ## Automated workflows You can set up automated workflows that trigger actions based on specific events within your webApp. For example, you can automatically send welcome emails to new users or notify administrators upon certain activities, thereby enhancing operational efficiency. ## Customized user experiences Wized’s conditional logic capabilities allow you to personalize the user experience. By tailoring content and functionality according to user data. ## What kind of projects can I create? You can create any type of web project that requires interactivity, custom logic, and connection to external services. From simple websites with advanced functionality to complex web applications. ### SaaS Build web applications that offer services to multiple users via a subscription. Think of project management tools, email marketing platforms, accounting software, or even your own video streaming platform. Wized lets you create the logic necessary for your users to interact with your application, register, log in, access specific features, and much more. #### How does Wized help you? - **Control access and navigation:** Implement authentication and authorization systems so that only registered users can access certain areas or functionalities of your SaaS. Use Wized’s conditional logic to show or hide elements, redirect users to different pages based on their role, or customize the content they see. - **Manage user data and subscriptions:** Connect Wized to an external database (such as Firebase, Airtable, or Xano) to store user information, subscriptions, usage data, and any other information relevant to your app. Use API requests to interact with the database and display dynamic data in your Webflow frontend. - **Process payments and manage subscriptions:** Integrate payment gateways like Stripe to securely handle subscriptions and recurring payments. Use settings and events in Wized to respond to successful or failed payments, update subscription status, and send automatic notifications to users. - **Create automated workflows:** Set up actions that run automatically in response to specific events, such as sending a welcome email when a new user signs up or notifying admins when a payment is made. - **Personalize the user experience:** Use conditional logic and data stored in Wized to tailor the content and functionality of your SaaS to each user, providing a more relevant and personalized experience. #### What else do you need? - **An external database:** This is needed to store user information, subscriptions, usage data, and any other relevant information for your application. [Learn more about external databases](/software-architecture/choosing-the-stack#databases-and-data-management) - **An authentication service:** To manage user registration, login, and access control. - **A payment platform (if applicable):** To handle subscriptions and recurring payments. - **Other external services:** Depending on the specific functionalities of your SaaS, you may need to integrate other APIs, such as email services, push notifications, or file storage. ### Marketplaces You are able to build a complete online store where your customers can browse products, add them to their cart, make payments, and receive notifications about their orders. Wized lets you create the logic and interactions needed to manage the entire checkout process, from product viewing to order confirmation. #### How does Wized help you? - **Dynamic product catalog:** Display your products in an organized and attractive way on your website. Create filters and search engines so your users can find items according to their preferences. - **Interactive shopping cart:** Allows users to add and remove products from the cart, calculate the purchase total in real time, and apply discount coupons using conditional logic in the Function Editor. - **Secure checkout processing:** Integrate payment gateways like [Stripe](https://stripe.com) or [PayPal](https://paypal.com) to process transactions securely and seamlessly. - **Automatic notifications:** Send order confirmation emails, shipping updates, and other important notifications to your customers using email services like Mailchimp or SendGrid, triggered by events in Wized. - **Inventory management:** Connect Wized to an external database to keep track of your products and their availability, updating the information in real time in your online store. #### What else do you need? - **A Payment gateway:** To securely process transactions and accept payments by credit card, debit card, or other methods. - **An Email notification service:** To send automatic emails to your customers about their orders, promotions, and other news. - **A Database (optional):** To store information about products, orders, customers, and other data relevant to your online store. If your store is small or just starting out, you can use a simple solution like Airtable. For larger or more complex projects, consider a more robust database like Supabase or Firebase. ### LMS Build an online educational platform where your students can access courses, complete interactive activities, receive assessments, and track their progress. Wized allows you to create the logic and interactions needed to manage educational content, student enrollment, and tracking of their learning. #### How does Wized help you? - **Dynamic and personalized content:** Displays lessons, quizzes, and other educational materials in an organized manner following an established logic, adapting the content to the progress and needs of each student. - **User and course management:** Allows students to register, log in, and access their courses. You can create user profiles, track their progress, and award certificates of completion. - **Interactions and assessments:** Add interactive elements such as quizzes, polls, and discussion forums to encourage student engagement. Implement assessment and grading systems to measure student progress. - **Communication and notifications:** Send assignment reminders, new content notifications, and personalized messages to your students using email or push notification services. #### What else do you need? To enhance your educational platform, consider integrating the following tools: - **Content storage services:** Utilize platforms such as [AWS S3](https://aws.amazon.com/s3/) or [Google Cloud Storage](https://cloud.google.com/storage) to host your videos, documents, and other educational materials. - **Course management tools (optional):** If you require more advanced features like creating lesson plans, managing payments, or tracking student progress in detail, you can integrate specialized tools such as [Teachable](https://teachable.com/) or [Thinkific](https://www.thinkific.com/). - **Database:** Implement a database to store information about users, courses, enrollments, grades, and other data relevant to your LMS. ::: tip Note Wized is a flexible platform that supports a variety of web projects. You can use it to create anything from a simple landing page with advanced features to a complete web application. :::   # Using NPM Packages ## What is NPM NPM (Node Package Manager) is the world's largest software registry and a powerful tool for managing and installing packages. It provides a vast collection of libraries offering a wide range of functionalities that you can easily integrate into your projects to enhance their features. You can continue exploring the documentation below to learn how to integrate NPM libraries into your Wized project. ## Importing an NPM library in Wized In this example, we’ll use the [JS-Confetti](https://www.npmjs.com/package/js-confetti) NPM package to demonstrate how to integrate an NPM library. We’ll leverage [ESM](https://www.jsdelivr.com/esm), which enables importing NPM libraries directly via a URL. ### Getting the ESM URL of the NPM package To do this: First, copy the name of the NPM package from its page. For the JS-Confetti package, the name is `js-confetti` . Then, paste the name of the library into the search field on the [ESM](https://www.jsdelivr.com/esm) page. The site also provides type-ahead suggestions, so you can start typing the library name and select it from the dropdown. <video src="https://media.wized.com/docs-v2/js-confetti.mp4" muted controls title="Getting JS-confetti URL"></video> In our case the URL is `'https://esm.run/js-confetti'`; ### Importing the library Once we have the URL, we can import the library as shown below. This can be done in any function editor. For this example, we’ll use a [run function](../global-events/actions-available#_4-run-function) method: ```javascript const module = await import('https://esm.run/js-confetti'); ``` ### Instanciating the library and using it After importing the library, you can now access its objects, methods, and properties. Here’s how you can use it: ```javascript const JSConfetti = module.default; const jsConfetti = new JSConfetti(); await jsConfetti.addConfetti(); ``` ### Putting it all together To bring everything together, here’s an example action that imports the library and triggers the confetti effect when the variable `v.time_to_party` is `true` ![JS-Confetti Global Event Action](full-js-confetti.png) ## Note JS-confetti is a library with a `default` export - some libraries may have both `default` and `named` exports, usually in their documentation you'll find it's imports documented in the following way: ```javascript const { namedExport, anotherNamedExport } from 'my-named-exports-library' ``` Their corresponding imports in Wized would be in the following way ```javascript const module = await import('https://esm.run/path-to-library'); const namedExport = module.namedExport; const anotherNamedExport = module.anotherNamedExport; ```   # Intro to the Wized configurator The Configurator is the core of Wized, where you can create, modify and remove features from your project. It is organized in three different panels, each one focused on different aspects of your project, this document will give you an overview of each panel. ## Top bar In the [top bar](/wized-configurator/top-bar), you will manage aspects related to the publication of your project. This includes navigating between different pages of your website and administering URL parameters, allowing for a smooth user experience when accessing your application. ## Left sidebar The [left sidebar](/wized-configurator/left-sidebar/) serves as the main navigation hub. Here, you can seamlessly explore your applications, events, elements, and the overall structure of your project. This centralized navigation simplifies the process of managing various components and enhances your ability to oversee complex projects. ## Right sidebar The right sidebar is activated when you need to access the specific details of an application, request, element, or any data stored in your database. This panel allows you to control and adjust the finer details of each component, ensuring that every aspect of your application is configured to meet your needs effectively. By utilizing these panels within the Wized Configurator, you can easily manage your web application, ensuring an organized workflow that caters to both novice users and experienced developers alike.   # Intro to the apps panel The Apps Panel allows you to centralize and manage the integrations between your project and the external services you choose to use, such as databases, third-party APIs, backends, etc. ## Left panel ![left-panel-apps-overview](left-panel-apps-overview.png) The left panel `Apps` serves as a navigation tool where you can: - **View created apps**: You can access all the Apps you have created within your project. The panel allows you to filter and organize these Apps efficiently for better management. - **Usage details**: Each app will display its name along with the number of instances where it is being utilized across different requests. By clicking it, a modal window will open, providing detailed insights into the specific requests where the app is in use. - **Create new apps**: Simply click on the `+` icon located in the upper right corner of the panel. ## Right panel ![right-panel-apps-overview](right-panel-apps-overview.png) You can find the specific settings for each App you have created. This panel provides you with detailed information, including the name of the App and the type of App selected. Below are the additional configurations of the App, which vary depending on the type of App you have previously chosen. ::: tip Note For more information about what an App is, how it works and best practices [go here](/apps/). :::   # Bug Report Form The Bug Reporter lets you submit bug reports to the Wized team directly from the configurator, without leaving the page. ## Submitting a bug report To open the Bug Reporter, click the bug icon in the left sidebar. ![bug-report-form-icon](bug-report-icon.png) A form will appear as below: ![bug-report-form](bug-report-form.png) - **Summary** _(required)_: Describe what is broken. Include the steps to reproduce the issue whenever possible. - **Attachments** _(optional)_: Attach any files that help illustrate the issue. Once you have filled in the summary, click **Submit**. Your name, project ID and a session recording URL are automatically included with the report to help the team debug the issue in context. After a successful submission, a confirmation message will appear and the form will close. If the submission fails, an error message will be shown and you can try again.   # Intro to the Data Store panel The Data Store panel serves as the central hub within the Wized configurator, where you can monitor and manage all the data related to your website in real-time. This panel provides essential insights and functionalities to help you understand and control various data aspects of your web application. In the Data Store panel, you will find the following key sections: ## Left panel ![data store panel](data-store-panel-overview.png) ### **Requests** Here, you can view a comprehensive list of all the [requests](/requests/) created within your project. Each request is displayed along with its current status and relevant data, enabling effective management and testing of your API integrations. ### **Cookies and variables** This section allows you to see all the [cookies](/data-store/cookies) and [variables](/data-store/variables) currently created within your application, along with their real-time values. ### **URL parameters** You can access a complete list of all URL parameters that have been defined for your application. This is particularly useful for tracking and managing user interactions and data passed through URLs. ### **Secrets** This section lists all [secrets](/data-store/secrets) stored securely within your application, such as API keys and access tokens. Managing these secrets is essential for maintaining the security of your application. ### **Inputs and forms** Here, you can view all [input fields](/data-store/inputs) and [forms](/data-store/forms) detected on the current page. This allows you to manage user interactions and input data in real time, facilitating dynamic responses to user actions. Overall, the Data Store panel provides you with a clear overview of the current state of your web App, empowering you to maintain control over real-time values and interactions. ## Right panel In this panel, you can access the settings of each of the values of the Data Store, you can also: create, modify or delete their values or settings.   # Intro to the debugger panel The Debugger Panel helps you identify and resolve issues that may impact your application's functionality. It continuously scans your project for inconsistencies or errors in configurations, events, and elements, allowing you to address these issues before they affect your users' experience. ## Alert types - **Missing elements:** If you have removed an element from your Webflow project but it still has associated settings or events in Wized, the Bug Panel will notify you so you can remove those outdated settings. - **Other configuration issues:** Wized can also detect potential problems in your configurations, such as incorrect values or conflicts between different actions. ## How to resolve them? 1. Locate the issue in the Bugs Panel. 2. Click the "Fix Issue" button associated with the problematic configuration or event. 3. Edit or delete the configuration as needed to correct the issue and ensure your application functions properly.   # Intro to the elements panel The Elements Panel is where you can manage all the [elements](/elements/) you have in your project. Here you will find a hierarchical tree representation of the elements of your page. ::: tip Note Only elements with the [wized attribute](/start-here/getting-started/wized-attribute) will appear here. ::: ![element_panel](elements_panel.png) ## Left Panel - **Elements on page:** A complete listing of all elements on the current page that have the wized attribute. These are the elements that Wized recognizes and that you can interact with to add [configurations](/elements/configurations) or [events](/elements/events). ![elements_this_page](elements_this_page.png) --- - **Elements in other pages:** A listing of all elements with the wized attribute present on other pages in your Webflow project. ![elements_other_pages](elements_other_pages.png) --- ## How Are the Elements Displayed? Elements are displayed in a tree hierarchical structure, mirroring the HTML structure of your website. **You'll be able to clearly see** the relationship between parent and child elements, making it easier to navigate. ![tree_hierarchical](<tree hierarchical.png>) - **Setting Icon**: If a gear icon appears next to the element name, it means that it has a [configuration](#settings-tab) enabled. - **Event Icon**: If a lightning bolt icon appears next to the element name, it means that it has an [event](#events-tab) enabled. - **Instances**: It will show the number of instances that the element has in this or other pages. --- ## Right Panel The Elements Settings Panel is your control center for adding interactivity and custom logic to elements on your website. **It opens automatically** when you select an element. ![elements_settings_panel](panel_element_settings.png) ### `Settings` tab ![elements_settings_icon](element_settings_icon.png) In this tab, you will find all the available settings for the selected item. You can: - **Create new configurations:** Choose the desired configuration you want to add. - **Modify existing settings:** Click an existing setting to edit its name, condition, or value in the Function Editor. - **Delete settings:** Click the delete icon next to a setting to remove it. --- ### `Events` tab ![elements_events_icon](elements_events_icon.png) In this tab, you can manage the events associated with the selected element. - **Create new events:** Click the "Add Event" button and choose the desired event from the drop-down list. - **Modify existing events:** Click on an existing event to edit its settings or add/remove associated actions. - **Delete events:** Click the delete icon next to an event to remove it. ::: info Note For detailed information about the available settings and events and how to configure them, see the [elements section](/elements/). :::   # Intro to the events panel In the events panel, you will be able to manage all the events created in your project. You will find two panels, the [left panel](#left-panel) will help you navigate through all your events, while the [right panel](#right-panel) will allow you to create, edit, delete, and test your events. --- ## Left panel ![navigation_panel](events_nav_panel.png) - **View and manage your events**: The left panel displays a list of all events created in your project. You can search, filter, and create new events as needed. - **Create new requests**: Simply click on the `+` icon located in the upper right corner of the panel. --- ## Right panel ![settings_panel](events_settings_panel.png) In this panel, you can manage and modify the settings of each event. You have the ability to adjust: - **Event properties**: such as the event's name and trigger. - **Action settings**: including the [actions](/global-events/actions-available) that will be executed when the event occurs. ::: tip Note For more detailed information about global events and how to configure them, refer to the [Global Events](/global-events/) section. :::   # Intro to the left sidebar ![staging-domain](left-sidebar-overview.png) The left sidebar is a core panel within the configurator, its multi-purpose navigation purpose dynamically displays various sections, including: - [Apps](/wized-configurator/left-sidebar/apps) - [Requests](/wized-configurator/left-sidebar/requests) - [Data Store](/wized-configurator/left-sidebar/data-store) - [Elements](/wized-configurator/left-sidebar/elements) - [Global Events](/wized-configurator/left-sidebar/global-events) - [Settings](/wized-configurator/left-sidebar/settings) - [Logs](/wized-configurator/left-sidebar/logs) - [Debugger](/wized-configurator/left-sidebar/debugger) Each section is clearly identified by its corresponding icon. In summary, the Left Sidebar serves as an essential tool for you to create, modify, and delete any configurations or integrations within your project. It also allows you to view logs and access project settings   # Intro to the logs panel The Logs Panel provides you with a comprehensive overview of the actions and events of your Wized App. Here, you can monitor every change, request, event, action, etc. As they occur in real-time, enabling you to understand the flow of your logic and identify potential errors or areas for improvement. ![logs_panel](logs.png) ## Why is the Logs panel important? The Logs Panel is an essential tool for: - **Debugging your application:** Identify and fix errors or unexpected behavior by following the execution flow of your logic and API responses. - **Understanding how your application works:** Observe how different elements, events, and configurations interact in real time. - **Optimizing performance:** Identify areas for improvement in your API logic and requests to enhance the speed and efficiency of your application.   # Intro to the requests panel In the requests panel, you will be able to manage all the API connections created in your project. You will find two panels, the [left panel](#left-panel) will help you navigate through all your requests, while the [right panel](#right-panel) will allow you to create, edit, delete, and test your API requests. ## Left panel ![requests_panel](request_panel.png) - **View and Manage your requests:** The left panel displays a comprehensive list of all API requests created in your project. You can search, filter, and create new requests as needed. - **Create New Requests:** Simply click on the `+` icon located in the upper right corner of the panel. ## Right panel - **Request configuration** In the right panel, when the "Settings" tab is activated, you will see all the configurations for the selected request. These configurations will dynamically adjust based on the type of request (Native or REST). Here, you can find and modify settings such as headers, endpoints, methods, and more, depending on the request type. ![request_settings](request_settings.png) - **Response & logs overview** When you open the "Overview" tab, you can view the response of the request, including both the results and the state. Additionally, you will have access to the logs. ![request_overview](request_overview.png) :::tip note For more detailed information on how to create and configure API requests, see the [Requests](/requests/) section. :::   # Intro to the settings panel ## Plan & usage ![plan usage](plan-usage-overview.png) ::: details View plan & usage content In this section, you will find all the relevant information about your current plan and usage statistics for your project. - **Current plan Type and upgrade**: At the top, you will see the type of plan you are currently using. If you wish to upgrade your plan. - **Elements used**: This statistic shows the total number of Elements you have created in your project. Depending on the type of plan you choose, the limit will vary. - **Elements allowed**: The number of Elements permitted depends on your selected plan. View [pricing](https://www.wized.com/pricing) - **Pageviews this month**: This is where you can see how many times your users have visited a page on your website during the month. As with actions, the pageview limit varies based on your plan type. - **Today**: This metric shows you the number of views your website has received today. ::: ::: tip Note On the free plan, there are no limits on the number of views or Elements, giving you the freedom to experiment and develop without restrictions. ::: ## Branding **Enable or disable Wized dadge**: You have the option to choose to display or hide the Wized badge on your website. This badge appears in the bottom corner of your page, indicating that your site is powered by Wized. ::: tip Note If you are using the free plan, you will not be able to hide the Wized badge. To remove the badge, you will need to upgrade to one of our paid plans. ::: ## Domains ![domains panel](domains-panel-overview.png) ::: details View domains content In this section, you can manage the domains associated with your project: - **Staging domain**: This is the domain you use to test your project before publishing changes to production. - **Custom Production domain**: Once you have a paid plan, you can add the production domains. This is the domain where your website will be accessible to all users in its final, live version. - **Adding multiple Production domains**: You can add multiple custom domains if you are in a Medium or Large plan. - **Wildcard domains**: You can use wildcard domains (e.g., `*.yourdomain.com`) to match multiple subdomains under a single domain configuration. This feature is only available for Medium or Large plans. ::: ## Embed code The embed code is essential for integrating your Webflow website with Wized. - **Integration script**: This is the code that needs to be pasted into the `<head>` section of your Webflow project to establish the [connection with Wized](/start-here/getting-started/) - **Embed version**: Here you will find the version of Wized you are currently using. The most recent version is 2. ### Check the embed code Wized performs an automatic validation to ensure that the script is correctly integrated into your website. The following indicators will help you confirm the connection: - ✅ A green icon will appear if the validation is successful, indicating that the connection between Wized and your project is correct. - ❗️ If the validation fails, review the integration steps to identify any issues. ::: warning Note If the Embed validation is not correct, it could cause undesired behavior in the configurator. ::: ## Backups ![backups panel](backups-panel-overview.png) Wized automatically creates backups of your project every 80 syncs in the background, ensuring that your work is safe. If you ever need to generate a new backup or publish changes to your staging site on webflow.io, simply click the "Saved" button. ::: details view and restore Backups To access your backup history: 1. Click the gear icon in the left sidebar. 2. Select the "Backups" tab. Here, you will find a complete listing of the backups generated. If you want to view a specific backup, click the eye icon next to it; this will open a new tab showing the project as it was on the date of that backup. If you decide to restore that backup, click the circled arrow icon to revert the project to that selected version. ::: ## Share project You can generate and share a preview link for your project. The person who receives the link will be able to open the configurator with your project and see all the information, including actions, requests, and more. ::: tip Note Changes made by the person through the preview link will only be reflected in that specific session and will not affect the project. ::: ## Clone project You can generate a link that other users can use to clone your project. This will enable them to create an exact copy of your project in their own environment, facilitating collaboration and shared learning. ::: warning Note - If you enable this option, anyone who has the link will be able to clone your project. - For security reasons, secret values are **not** copied when cloning a project. After cloning, you will need to re-enter all secret values in the cloned project under the **Data Store** panel. - Additionally, any **Airtable OAuth connections** will need to be reconnected in the cloned project. :::   # Top bar ## X-ray The X-ray feature simplifies the visualization of all elements on your page that contain the Wized attribute. ![x-ray](left-sidebar/x-ray.png) ::: details **How X-ray works** - **Element display:** When enabled, elements with Wized attributes are outlined in blue, showing their attribute names. ![x-ray-active](left-sidebar/x-ray_actived.png) - **Quick access to settings:** Clicking on a highlighted element opens its settings panel on the right side. ::: --- ## Branch Manager The Branch Manager provides tools to manage different branches of your project efficiently. ![branch manager](images/branch-manager.png) ::: details **How Branch Manager works** - **Switch branches:** Easily switch between different branches to test or develop specific features. - **Create new branches:** Start a new branch for isolated development without affecting the main project. - **Merge branches:** Combine changes from one branch into another seamlessly. ::: tip **Learn more** For detailed information about branching, Check [Branch section](/branching/). ::: ## Reload This option allows you to reload the canvas and update attribute detection in your project. ![reload](left-sidebar/reload.png) ::: details **Reload options** - **Reload canvas** Clicking the reload icon refreshes the canvas, similar to pressing `F5` on a live site. - **Rescan attributes** This feature performs a new scan of all elements, ensuring Wized correctly recognizes them. Use this only if Wized is not detecting some elements. ::: --- ## Canvas The Canvas section includes multiple tools to optimize its use in your project. ![canvas-icon](left-sidebar/canvas-icon.png) ::: details **How canvas works** ![canvas-panel](left-sidebar/canvas_panel.png) - **Navigation:** Move between previously visited pages using the back/forward arrows. - **Reload canvas:** Refresh the current page without reloading the configurator as such. - **Current URL:** Displays the current page URL. - **Parameters:** Modify, add, or delete URL parameters dynamically. ::: tip **Note** You can manually test your flows by changing URL parameters, but it's recommended to use the [dedicated panel](/data-store/navigation). ::: --- ## Pages This section allows quick access to all indexed pages in your sitemap. ![pages icon](left-sidebar/pages-icon.png) ::: details **How pages works** - Open the **Pages dropdown** to see all indexed pages. - Click a page name to navigate to it. ![pages dropdown](left-sidebar/pages-panel.png) ::: tip **Important** Webflow CMS pages are not indexed by Webflow, so they won’t appear in the list. Make sure your pages are properly indexed in your sitemap. For more details, visit [Webflow university](https://university.webflow.com/). ::: --- ## Publishing changes The Wized Configurator **always** displays the most recent version of your project. However, for updates to be reflected on your live site, you must **publish manually**. ![publish-icon](left-sidebar/publish-icon.png) ::: details **How publish works** ![publish-panel](left-sidebar/publish-panel.png) **Staging** - Publish your changes to your Webflow staging site (`.webflow.io`). - Test interactions before making them public. **Production (custom domain)** - Publish your changes to your live site. - Available only for **paid users**. ** How to publish** 1. Select the desired domain in the top right corner of the Configurator. 2. Click **"Publish"**. ::: ::: tip **Note** Manual publishing is required for updates to be reflected on your live site. :::   # Creating a workflow ### Steps to create a Wized Workflow 1. Navigate to the left sidebar and click on `Workflows` icon. This opens the **workflows panel**. ![workflow-sidebar-button](images/workflow-side-panel-button.png) 2. If you have existing workflows, they will be listed in the panel. To create a new one, click on the **`+`** icon in the top-right corner. ![workflow-create-button](images/workflow-create-button.png) 3. In the right panel, you can define workflow configurations: - Workflow name - Workflow props ![workflow-create-panel](images/workflow-create-panel.png) 4. Workflow Canvas will be opened: ![workflow-canvas](images/empty-workflow-canvas.png)   # Intro to Workflows Workflows are a set of actions and conditionals that can be triggered by element or page events. ![workflow-example](workflow.png) They are reusable and designed to optimize operations by grouping actions, handling requests, applying conditional logic, and efficiently managing tasks. Workflows can also receive props, allowing you to pass dynamic data into them for greater flexibility and customization. ## Check Out the Demo Watch the video below to see Wized Workflows in action and learn how to create and manage workflows effectively. <video controls src="https://media.wized.com/docs-v2/wized-workflows-demo.mp4" title="Wized Workflows"></video>   # Workflow Data Workflow data is saved during execution in the `Data Store`, including the results of the nodes. Example of workflow data: ![Workflow data](images/workflow-data.png) Workflow data can also be accessed outside workflows, such as for displaying progress bars or statuses. ## Node Data To view specific node data, click the **Data Store Button**. - This will display the execution data for the node. ![Data store button](images/node-data-store-button.png) ![Node data](images/node-data.png) ## Accessing Data from Previous Nodes Specific node data can be accessed in subsequent nodes, often in conditional logic. **Example**: In this example, the `ok` status from `node_1` is accessed to display a success or error alert: `return w.sign_up.nodes.node_1.result.ok` ![Previous node data](images/previous-node-data.png) ## Node Naming Each node is assigned a default name, but it's recommended to rename nodes manually. This makes it easier to reference their data later. ![Node naming](images/node-naming.png) For example, instead of accessing the `ok` status like this: `return w.sign_up.nodes.node_1.result.ok` You can use a more descriptive name: `return w.sign_up.nodes.create_user_node.result.ok`   # Workflow Nodes Workflow nodes represent actions or conditions and can include the following types: - **Perform Request**: Make an HTTP request to an external API. - **Run Function**: Run a custom function. - **Set Variable**: Set a value for a variable. - **Set Cookie**: Save a value in a browser cookie. - **Navigate To**: Redirect to a specific URL or page. - **Run Workflow**: Initiate another workflow. - **If/Else Condition**: Add conditional logic to manage the workflow's execution. ## Creating a Workflow Node You can create a workflow node by: - Creating and linking it directly to an ending node: ![Create and link node](images/workflow-create-and-link-node.png) - Creating a node from the top bar: If a node is selected, the new node will be linked to the selected node. If no node is selected, the new node will be created as an unlinked node. ![Create node](images/adding-unlinked-node.png) ## Selecting a Node and Configuring Node Settings To configure a node, first select it. The settings for the selected node will appear on the right panel: ![Node select and settings](images/node-settings.png) ## Passing Props from Workflow to Node Settings In the Workflow Node settings, you can access the `email` prop using the variable `p`, as illustrated below: ![Workflow props in function editor](images/workflow-props-function-editor.png) ## Node Top Bar Buttons When you hover over a node, the top bar buttons will appear: ![Workflow top bar buttons](images/node-top-bar-buttons.png) These buttons include: - **Play Button**: Run the workflow from the beginning up to the selected node. - **Disable Button**: Temporarily disable a node, causing the workflow to skip it during execution. ![Disable node](images/disable-node.png) - **Data Store Button**: Open the execution data for the node. ![Data store button](images/node-data-store-button.png) ![Data of the node](images/node-data.png) - **Delete Node Button**: Delete the selected node   # Overview Panel The Overview Panel provides a comprehensive view of your workflow's execution details. By selecting a workflow and clicking the **Overview** button, you can access this panel to: - Review execution data. - Analyze execution logs. - Inspect workflow triggers. ![Overview Panel Button](./images/overview-panel-button.png)   # Workflow Props Workflow props are dynamic parameters that enable you to customize and reuse workflows efficiently. By defining props, you can pass specific values to the workflow, making it adaptable to various scenarios. This flexibility is essential for creating dynamic and efficient functionality. ## Defining Props To define props for a Workflow: 1. Open the workflow configuration. 2. Add the required props in the **Props** section. 3. Specify the `name`, `defaultValue`, and whether the prop is `required`. ### Example: Defining Workflow Props Consider a workflow named `sign_up`. Here, we define a prop `email` with a default value of `'example@gmail.com'`. ![Defining workflow props](images/workflow-create-panel.png) In the Workflow Node settings, the `email` prop is accessed via the variable `p`, as shown below: ![Workflow props in function editor](images/workflow-props-function-editor.png)   ## Creating a New Workspace To create a new workspace, follow one of these methods: 1. **After Login** After logging in, click **Create a New Workspace** in the Workspace Selector. This will guide you through the setup process. ![Workspace Select](./images/workspace-select.png) 2. **From the Dashboard** Go to the dashboard and choose **New Workspace** from the menu. ![Workspace Select](./images/workspace-selector.png) Complete the setup by following these steps: - Enter a name for your workspace. - Optionally, edit the autogenerated slug to suit your preferences. ![Workspace Creation](./images/workspace-create.png) Both methods are straightforward and allow you to quickly set up a workspace tailored to your needs.   ## Editing a Workspace To update your workspace name or image, navigate to **Workspace Settings** in the [Finsweet Account](https://my.finsweet.com) sidebar. ![Workspace Settings](./images/workspace-settings.png)   # Finsweet Workspaces Finsweet Workspaces empower teams to collaborate seamlessly by organizing projects and managing access through roles and permissions. ## Logging into a Workspace Log in to your account to access the **Workspace Selector**, where you can choose an existing workspace or create a new one. ![Workspace Selector Login](./images/workspace-select.png) ## Switching Between Workspaces Easily switch between workspaces using the **Workspace Selector** in the top-left navigation bar. Simply click it and select the desired workspace from the dropdown menu. ![Workspace Selector Dropdown](./images/workspace-selector.png) ## Learn More Explore additional guides to make the most of your workspaces: - [Create a Workspace](./create.md) - [Manage Workspaces](./manage.md) - [Editing a Workspace](./edit.md) - [Members and Roles](./members.md) - [Subscriptions and Billing](./subscriptions.md)   # Managing Workspaces To manage your workspaces, navigate to [Finsweet Account](https://my.finsweet.com) or use the **Workspace Selector** located in the top-left corner of the dashboard. ![Workspace Selector](./images/workspace-selector.png) After clicking **Manage Workspaces** You will be redirected to the [Finsweet Account](https://my.finsweet.com) page, where you can view and manage all your workspaces. ![Finsweet Account](./images/finsweet-account.png) From this page you can: - [Create a Workspace](./create.md) - [Edit a Workspaces](./edit.md) - [Members and Roles ](./members.md) - [Manage Subscriptions and Billing ](./subscriptions.md)   ## Team Members You can see the team members and manage by clicking on **Team & Roles** inside [Finsweet Account](https://my.finsweet.com) dashboard page. ![workspace settings](./images/finsweet-members.png) ### Inviting Member You can invite a team member by clicking **Invite** Button. You need to write user email and select roles. ![workspace settings](./images/finsweet-invite.png) ### Roles #### Organization Roles - **Owner** The owner of the organization has full access to all features and settings. - **Admin** Admin role with full access to the organization. - **Billing** Billing role with access to billing information and settings. #### Wized Roles - **Wized Admin** Can view, update and transfer Wized projects, as well as manage Folders. - **Wized Editor** Can view and update Wized projects. - **Wized Viewer** Can only view Wized projects but cannot update them.   ## Subscription and Billing ### Upgrading Your Project To upgrade your project, navigate to the Wized dashboard settings, and in the "Plan and usage" section click **Upgrade**. ![Wized Plan Upgrade](./images/wized-plan-upgrade.png) You will be redirected to the Finsweet Checkout page. ![Finsweet Checkout](./images/workspace-checkout.png) Choose your desired plan and complete the payment process. ### Managing Your Subscriptions You can manage all your subscriptions by visiting [Finsweet Subscriptions](https://my.finsweet.com/subscriptions). ![Manage Subscriptions](./images/subscriptions.png) ### Billing Information To manage your billing details, click **Billing** in the sidebar. This will redirect you to the Stripe billing portal, where you can update your billing information and download invoices as needed.

# Creating new apps To set up a new app in the Wized configurator, follow these steps: ![apps-panel-overview](apps-panel-overview.png) 1. **Access the apps panel:** Click on the [apps](/wized-configurator/left-sidebar/) 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! ![airtable](airtable.png) ### 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. ![Wordpress app](./wordpress.webp) ::: tip Recommendation We recommend creating a separate WordPress admin account dedicated to Wized, rather than using your personal admin credentials. ::: ![Wordpress Wized admin](./wordpress-wized-admin.webp) For more details on WordPress request methods, see the [WordPress requests documentation](/requests/wordpress/). ### REST integration Specify the `base URL` of the API you are integrating. ![rest](rest.png) #### Setup Default Headers (Optional) ![rest default headers](rest-default-headers.png) - 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](https://pokeapi.co/) - 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](/requests/) made represents a different endpoint. Wized comes equipped with a range of native integrations, such as [Memberstack](https://www.memberstack.com/), [Supabase](https://supabase.com/), [Firebase](https://firebase.google.com/), [Airtable](https://airtable.com/), and [WordPress](https://wordpress.org/), 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, ). - **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:** ```javascript 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:** ```javascript 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:** ```javascript 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** ```html

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

``` ::: ## 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** ![Main Options](./images/main-options.png) 2. **Select "Create new"** Click on the **"Create new"** option from the dropdown menu. ![Create Branch](./images/create.png) 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. ![Branch select](./images/branch-select.png) 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. ![Options](./images/options.png) 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](./create.md) - [Rename a Branch](./rename.md) - [Switch Branches](./switch.md) - [Preview Branch Changes](./preview.md) - [Merge Branch Changes](./merge.md) - [Update Branch from Main](./update-from-main.md) - [Delete Branch](./delete.md) - [Revert Merged Changes](./revert.md) # 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**. ![Branch options](./images/options.png) 4. **Review changes**: Compare and review the changes to ensure everything is correct. ![Branch merge](./images/merge-popup.png) 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. ![Preview popup](./images/preview-popup.png) 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. ![Branch Options](./images/options.png) 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. ![Branch Options](./images/rename.png) 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. ![Auto backup](./images/auto-backup.png) # Switching Branches Easily switch between branches to manage different versions of your configuration. ## Steps to Switch Branches 1. **Open the Branches Selector popup.** ![Branch Selector](./images/branch-select.png) 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. ![Branch Options](./images/options.png) 3. **Click update** Click the "Update" button to start the process. 4. **Review Changes** Compare and review the changes before proceeding. ![Review Changes](./images/update-from-main.png) 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 ![cookie-section](cookie-section.png) 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](/function-editor/), using `c.` [parameter](/function-editor/parameters). ::: 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 ![cookie-settings](cookie-settings.png) 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](/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` ```js 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](/elements/events) **(On Click)** on a button to update the `theme` [cookie value](/elements/events#set-cookie). - Using a **CSS Classes** [configuration](/elements/configuration-types/multi-use/set-class) 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. ```js 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"`. ```js 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](/elements/configuration-types/single-use/set-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](/elements/configuration-types/single-use/set-visibility) configuration to the "Logout" button. - The button is **visible only if** `auth` contains a valid token. ```js 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](/function-editor/data-types#objects), making it easier to handle data and submit it through [requests](/requests/). ::: warning Note Make sure to read and understand the differences between using [inputs](/data-store/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. ![form-name-inputs](form-name-inputs.png) ::: 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. ![form-wized-attribute](form-wized-attribute.png) ### **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. ![form-overview-dataStore](form-overview-dataStore-panel.png) ::: 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](/data-store/inputs) (which update in real time), **form values are only available after submission**. To access a value from a submitted form, use: ```js 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](/requests/), follow these steps: 1. Select the **form element** in Wized. 2. Add an **On Submit** [event](/elements/events). 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](/requests/) 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](/function-editor/): For `email`: ```js return f.loginForm.email; ``` For `password`: ```js 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](/data-store/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](/data-store/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](/data-store/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](/start-here/getting-started/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](/function-editor/) to dynamically update elements, validate data, or interact with API requests. **Example 1: Validate user age in real time** ```js return i.age >= 18; // Returns true if the user is 18 or older ``` **Example 2: Format currency input as the user types** ![input-example](input-example.png) ```js 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** ```js 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](/requests/), configure an [On Click](/elements/events) event on a button and use the [Function Editor](/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.`) - 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](/wized-configurator/top-bar#🎨-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](/requests/) runs. For example, you can set up an [event](/global-events/) to execute a [request](/requests/) **only when the user is on any dashboard page**: ![navigation-example](navigation-example.png) ```js 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](/elements/configurations) 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](/elements/configuration-types/single-use/set-visibility) configuration for the element you want to show or hide dynamically. Then, use the following code, replacing the parameter names as needed ```js 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](/elements/configuration-types/single-use/set-text) configuration for the element you want to modify. Then, use the following code, replacing the parameter names as needed ```js 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](/function-editor/), navigation values can be accessed using the n object. For example, to retrieve the current "id" parameter, you would use: ```js 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. | ![request-overview](request-overview.png) 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](/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](/function-editor/). #### Get a user’s name from a request ```js return r.get_user.data.name; ``` #### Render a list of products ```js return r.products_request.data.products; // Assuming "products" is an array ``` #### Check if a request was successful ```js 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](/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](/requests/), 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](/data-store/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](/function-editor/parameters) followed by the secret name. For example: ```JavaScript // 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: ![variables-section](variables-section.png) - **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: ![variable-settings](variable-settings.png) ### **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](/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: ```js return v.username; ``` Practical Use Cases 1. **Displaying dynamic text** ```js return `Welcome, ${v.username}!`; ``` - **Calculate the total price of a shopping cart:** ```JavaScript // 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:** ```JavaScript // 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](/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:** ```javascript return r.getProduct.data.imageUrl; // Retrieves the image URL from the API response ``` - **Update a Button link:** - **Attribute:** `href` - **value:** ```javascript return v.destinationPage; // Provides the URL stored in a variable ``` - **Enable or disable an input:** - **Attribute:** `disabled` - **value:** ```javascript 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](/start-here/getting-started/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](/function-editor/) to specify the new value dynamically. The value can be derived from variables, cookies, API responses, or conditional logic. **Example:** ```js /* 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](/function-editor/basic-concepts#ternary-operators) ```js 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. ```js //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` ```js return 'red'; ``` ### 2. Display a progress bar based on request data **CSS Property:** `width` ```js return `${r.request_name.data.progress}%`; ``` ### 3. Change text color based on user role **CSS Property:** `color` ```js return r.getUserData.data.role === 'admin' ? 'gold' : 'black'; ``` ### 4. Hide an element if no data is available **CSS Property:** `display` ```js return r.getData.data.length > 0 ? 'block' : 'none'; ``` ### 5. Adjust font size dynamically **CSS Property:** `font-size` ```js 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 , you can add a query parameter called `id` with the value `12345` to indicate which specific product should be displayed: . ## 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. ![button-webflow-settings](button-webflow-settings.png) 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](/start-here/getting-started/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. ![parameter-example](parameter-example.png) 5. **Define the value in the function editor:** In the [function editor](/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:** ```javascript // 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 ``` ```javascript // 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](/start-here/getting-started/wized-attribute) to the `template element`. Additionally, add the `Wized attribute` to any child elements you want to have dynamic behavior. ::: ![render-template-ement](render-template-ement.png) --- ### 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. ![template-elemenst-overview](template-elemenst-overview.png) 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](/start-here/getting-started/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](/elements/configuration-types/single-use/set-text) confituration to render text dynamically for each element. ![child-text-example](child-text-example2.png) You can use the [dot notation](/function-editor/basic-concepts#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](/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** ```js 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](/elements/configuration-types/multi-use/set-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. ![image-renderlist-example](image-renderlist-example.png) You can use the [dot notation](/function-editor/basic-concepts#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](/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** ```js 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. ```javascript // 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). ```javascript // 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 ```javascript return r.getProducts.data[v.i].name; ``` ### Show "Add to cart" button only when stock is available ```javascript return r.getProducts.data[v.i].stock > 0; ``` ### Show index number for each item ```javascript 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](/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](/start-here/getting-started/wized-attribute) to work correctly with this configuration. ![form-wized-attribute-example](form-wized-attribute-example.png) 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. ![configuration-form-value](configuration-form-value.png) - Open the [Function Editor](/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:** ![form-values-example](form-values-example.png) ```javascript /* 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. ![webflow-name-inputForm](webflow-name-inputForm.png) *** For an input called `new_input` this is what the function should look like in Wized ![form-input-name-example](form-input-name-example.png) ```javascript 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](/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](/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: ```javascript 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](/elements/configuration-types/single-use/set-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](/start-here/getting-started/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. ```javascript 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](/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](/formulas/text) 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: ```js 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: ```js 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**](/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. ![elements_overview](elements_overview.png) ### 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. ![text-type](text-type.png) ::: 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](/function-editor/) to write the JavaScript expression that will determine the text content. ![text-configuration-example](text-configuration-example.png) --- ## Writing expressions in the function editor The [**function editor**](/function-editor/) allows you to write JavaScript [formulas](/formulas/text) to define what text will be displayed. Here are some useful examples: ### Using request response data ```js 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: ```js return new Date(r.request_name.data.timestamp).toLocaleDateString(); //Converts `"1672531200000"` into `"1/1/2023"`. ``` --- ### Combining multiple data sources ```js 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) ```js return `${r.request_name.data.price.toFixed(2)}`; //Ensures the price always has two decimal places. ``` --- ### Conditional text based on user input ```js return i.userAge >= 18 ? 'You can proceed' : 'You must be 18+'; //Changes the message based on the user’s age. ``` --- ## Common errors & how to fix them **Error: Accessing data it is not available** ```js return 'Hello ' + r.userRequest.data.name; // Might cause an error if the data hasn't loaded yet ``` **Solution: Use a fallback value** ```js return 'Hello ' + (r.userRequest.data.name || 'Guest'); ``` --- **Error: Forgetting to return a value** ```js 'Hello ' + r.userRequest.data.name; // This won't work ``` **Solution: Always use `return`** ```js return 'Hello ' + r.userRequest.data.name; ``` --- **Error: Overcomplicating conditions** ```js if (n.path === '/home') { return 'Welcome!'; } else { return 'You are not on the homepage'; } ``` **Solution:** Use the ternary operator `(? :)` for simpler conditional expressions. ```js return n.path === '/home' ? 'Welcome!' : 'You are not on the homepage'; ``` # Visibility configuration The **visibility** configuration in Wized allows you to dynamically **show or remove elements from the DOM** based on real-time data. Unlike [CSS properties](/elements/configuration-types/multi-use/set-style) like `display: none`, this configuration **removes the element from the DOM entirely** until the specified condition is met. This feature enables highly flexible and reactive user interfaces, adapting instantly to changes in **requests, variables, cookies, URL parameters, inputs**, and more. ::: info Note For this configuration to work, the element must be present in the DOM by default. If it has `display: none` in Webflow, Wized won't be able to apply the configuration. ::: ## How does It work? When you apply **visibility** to an element, Wized evaluates the **condition** that you written in the [function editor](/function-editor/). If the condition returns `true`, the element appears in the DOM. If it returns `false`, the element is completely removed. ![visibility-example](visibility-example.png) ### Key features: - **Fully dynamic** → Elements appear and disappear based on real-time data. - **DOM removal** → Unlike `display: none`, the element is not just hidden it is completely removed from the DOM. - **reactivity** → Wized continuously monitors changes in requests, variables, inputs, and other data sources to update visibility instantly. --- ## How to set up visibility ### 1. Select the Element In the **Elements Panel**, click on the element you want to show or hide dynamically. ![elements_overview](elements_overview.png) --- ### 2. Apply the visibility configuration In the **right panel**, locate the `visibility` section and open the **function editor** to define your condition. ![visibility-setting](visibility-setting.png) --- ### 3. Define a condition Write a [condition](/formulas/conditionals) that determines when the element should be visible. For example, to show an error message only if the login request failed: ```js return r.loginRequest.status !== 200 && r.loginRequest.hasRequested; ``` --- ## Practical use cases Here are some common scenarios where **visibility** is useful: ### Show an admin only button **Use case:** Show an **"edit content"** button only for administrators. ```js return r.getUserData.data.role === 'admin'; ``` --- ### Show a loading spinner until data is ready **Use case:** Display a **loading spinner** while an API [request](/requests/) is in progress. ```js return r.productRequest.isRequesting; // Hide the spinner once data is loaded. ``` --- ### Show an error message if a form submission fails **Use case:** Display an **error message** only if a form submission fails. ```js return r.formSubmission.status !== 200 && r.formSubmission.hasRequested; ``` --- ## Common mistakes & how to fix them ### **Error: The element doesn’t appear even when the condition is true** - **Problem:** The data source (e.g., request, variable) may not be available when the condition is first evaluated. - **Solution:** Ensure the request or variable is initialized before checking visibility. --- ### **Error: Using `display: none` instead of the visibility configuration** - **Problem:** Some users may mistakenly apply `display: none` in CSS, thinking it works the same way. - **Solution:** **visibility configuration removes elements from the DOM**, while CSS only hides them. --- ### **Error: Condition does not return a boolean** - **Problem:** Wized expects the condition to return `true` or `false`, but sometimes users forget to return a value. - **Solution:** Ensure your condition evaluates to a boolean. --- ## Why removing an element from the DOM? Unlike simply changing an element’s CSS `display` property, Wized’s **visibility configuration** completely **removes the element from the DOM**. This behavior offers several advantages and considerations: ### Benefits of removing an element from the DOM 1. **Performance optimization:** - Elements removed from the DOM are not processed by the browser, reducing memory usage and improving page performance. - This is especially useful when dealing with large lists, complex UI components, or elements that should only be present under specific conditions. 2. **Security & data protection:** - Sensitive content (such as admin-only sections) is completely removed from the page’s structure, making it harder to access via browser inspection or JavaScript manipulations. 3. **Accurate event & state management:** - Elements that do not exist in the DOM cannot trigger JavaScript event listeners, reducing unnecessary event bindings and preventing unwanted interactions. ### When Not to use visibility configuration While removing elements from the DOM is beneficial in many cases, there are scenarios where modifying [inline styles](/elements/configuration-types/multi-use/set-style) (e.g., setting `display: none`) is more appropriate: - **When animations/transitions are needed:** If you want an element to smoothly appear/disappear (e.g., with a fade-in effect), modifying `opacity` or `display` via inline styles allows for smooth CSS animations. - **When the element should retain state:** If hiding an element should not reset its internal state (e.g., form inputs retaining user data when toggled), using `display: none` is preferable. - **For elements frequently toggled:** If visibility needs to change rapidly (such as dropdown menus, tooltips, or modal windows), keeping the element in the DOM and toggling styles is more efficient than constantly adding/removing it. ### Choosing between `visibility` and `Inline Styles` | Feature | visibility Configuration (Removes from DOM) | Inline Styles (`display: none`) | | ------------------- | ------------------------------------------- | ---------------------------------- | | **Performance** | ✅ Better for heavy UI elements | ❌ Still loaded in the DOM | | **Security** | ✅ Hides sensitive data completely | ❌ Can be revealed via DevTools | | **State Retention** | ❌ Resets internal states | ✅ Preserves state when hidden | | **Animations** | ❌ Not possible without reloading | ✅ Allows smooth transitions | | **Use Case** | Best for **conditional UI logic** | Best for **temporary UI toggling** | # Intro to the element configurations The **Element Configuration** in Wized allows you to define the dynamic behavior of elements according to different scenarios that you define. These configurations offer a high degree of customization, allowing elements to react flexibly to data and user interaction. ## What are configurations for? Configurations allow you to modify the way an element behaves or renders in the interface. Some examples of what you can achieve, among others are: - **Render dynamic text** → Display dynamic text based on data obtained from an API, a variable, or a custom condition. - **Show or hide elements** → Control the visibility of an element based on a condition. - **Render dynamic lists** → Duplicate an element as many times as there are elements in an array. ## Setting up a configuration ### 1. Select the element In the Wized elements panel, click on the element. ![elements_overview](elements_overview.png) ### 2. Go to specific configuration section In the right pane, find the desired configuration ![configurations-overview](configurations-overview.png) - **Single use:** Configurations located in the upper rectangle are configurations that can only be applied once per element. This limitation helps prevent value overwriting, thereby reducing the risk of potential failures or inconsistencies in your application. [More info](/elements/configuration-types/single-use/) - **Multi use:** can be applied repeatedly to an element without risk of interference. This feature allows adding as many values as necessary. [More info](/elements/configuration-types/multi-use/) ### 3. Set te value Based on the configuration you selected, set the desired value or condition to make the element behave dynamically according to your instructions. # intro to the elements panel This panel centralizes the management of each element of your Web Application. - **Hierarchical listing:** Elements are organized in a tree based on their hierarchy in the Webflow page structure, making navigation and searching easier. - **Accessing configurations and events:** Clicking on an item in the panel takes you to its settings panel, where you can: - Configure element behavior : Define how it will look and behave in different situations. - Add Events : Associate events such as `On Click`, `On Change` or others to the element to trigger specific actions when the user interacts with it. ::: tip Note For more information about how this panel works, refer to [elements events](../elements/events) and [element configurations](../elements/configurations) ::: # Intro to the element events Element events are triggers that work with the interactions that the your user performs on your website, such as clicking, hovering on an element, entering a value in an input field or submitting a form, etc. Wized allows you to `listen` to these events and create action flows to respond to them. ::: info Note Element events must be linked to an element that contains the [Wized attribute](/start-here/getting-started/wized-attribute). For events not linked to a specific element, use [Global events](/global-events/) instead. ::: ## Setting up an event ### 1. Select the element In the Wized elements panel, click on the element. ![elements_overview](elements_overview.png) ### 2. Go to events section In the right panel, click on the lightning icon. ![add_event_overview](add_event_overview.png) ### 3. Choose the event use the dropdown menu to select the event you want to `listen` to. You can choose from a wide variety of standard JavaScript events, such as `click`, `submit`, `change`, `input`, `focus`, `blur`, `keydown`, etc. Check the [full list](https://www.w3schools.com/js/js_htmldom_events.asp). ![event_types](event_types.png) ### 4. Configure event options (optional) After selecting your event, you can configure additional options to control how the event behaves: #### Prevent default Prevents the default browser behavior for the event. For example, when applied to a form `submit` event, it prevents the page from reloading. See [Event.preventDefault()](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) for more information. #### Reset form (submit events only) When enabled on a `submit` event, automatically resets all form fields to their initial values after the form is submitted. #### Conditional Allows you to define a condition that must be true for the event actions to execute. The condition is written as a JavaScript expression that returns a boolean value. **Example:** Only execute actions if a variable has a specific value: ```javascript return v.isLoggedIn === true; ``` You have access to: - `e` - The event object (e.g., `e.pageX`, `e.target`) - `t` - The target element node #### Strategy Choose a strategy to control how often the event handler executes: - **Immediate** (default) - Executes the event handler immediately every time the event is triggered, without any delay. - **Debounce** - Delays the execution of the event handler until after a specified delay has passed since the last time the event was triggered. This is useful for scenarios like search inputs where you want to wait until the user stops typing before making an API request. - **Throttle** - Ensures the event handler is executed at most once in a specified time interval, regardless of how many times the event is triggered. This is useful for events that fire frequently, like `scroll` or `resize`, where you want to limit how often your code runs. #### Delay (ms) When using **Debounce** or **Throttle** strategies, specify the delay in milliseconds. The default value is 300ms. **Example use cases:** - **Search input with debounce**: Wait 500ms after the user stops typing before searching - **Scroll event with throttle**: Update scroll position indicator at most once every 100ms - **Resize event with throttle**: Recalculate layout at most once every 250ms ### 5. Select the action Choose the action you want Wized to execute when the event is triggered. You can create complex flows with more than one action in the same event. You can rearrange actions by dragging and dropping them. You can also enable or disable them using the toggle, controlling whether they execute when the event occurs. ::: tip Order matters Keep in mind that the actions are executed in the order in which they are in the event. ::: ![actions_list](actions_list.png) ### 6. Set up the action Depending on the action you have chosen, specific parameters will appear that you must set. ## Most common events To use any of these events, just type the name of the event in the dropdown, even if it does not appear in the dropdown options. ### Mouse events - **click** → Triggered when an element is clicked - **dblclick** → Triggered when an element is double-clicked - **mouseenter / mouseleave** → Triggered when the mouse enters or leaves an element - **mouseover / mouseout** → Similar to `mouseenter/mouseleave` but bubbles --- ### Keyboard events - **keydown** → Triggered when a key is pressed - **keyup** → Triggered when a key is released --- ### Form events - **submit** → Triggered when a form is submitted - **input** → Triggered when a user types in an input field - **change** → Triggered when the value of an input/select changes --- ### Window events - **load** → Triggered when the page fully loads - **resize** → Triggered when the window is resized - **scroll** → Triggered when the user scrolls --- ### Touch events (Mobile) - **touchstart** → Triggered when a user touches the screen - **touchmove** → Triggered when a user moves their finger on the screen - **touchend** → Triggered when a user lifts their finger ## Actions Actions are tasks that Wized performs in response to a user-triggered event. When a user interacts with an element (e.g., clicks a button, types in an input field, hovers over an element), an event is fired, and one or more actions can be executed. Actions can be **chained together**, meaning you can execute multiple actions in sequence. Additionally, each action can have **optional conditions**, allowing you to define rules that determine whether an action should be executed. ::: tip Note - This events focuses on actions triggered by **user interaction events** (e.g., clicking, input changes, form submissions). It does not cover [global events](/global-events/) like "on page load." - Actions are executed in sequence, one action is executed only when the previous one has been completed. ::: --- ## Available actions ### Set Cookie Stores or updates a cookie value in the user's browser. useful for remembering user preferences or tracking interactions. #### Example use cases: - Save a user’s theme preference when they toggle between light and dark mode. - Store a user’s preferred language when they select it from a dropdown. #### Example: **Event:** `click` on a toggle button **Action:** Store the selected theme in a cookie ::: info Note Make sure you've created at least one cookie, as you'll need to select the cookie you want to update from the dropdown, where all created cookies will be listed ::: --- ### Set variable Updates the value of a variable in Wized. This is useful for temporarily storing user selections or form inputs. #### Example use cases: - Store the selected product ID when a user clicks on a product. - Track the number of times a user clicks a button. #### Example: **Event:** `click` on a product card **Action:** Save the selected product ID in a variable ::: info Note Make sure you've created at least one variable, as you'll need to select the variable you want to update from the dropdown, where all created variables will be listed ::: --- ### Custom function Executes a JavaScript function to perform advanced operations, such as formatting data or interacting with other scripts. #### Example use cases: - Format user input before displaying it. - Validate a form field before allowing submission. #### Example: **Event:** `input` in a text field **Action:** Format user input to capitalize the first letter ::: warning Note Custom code is a powerful tool, but keep in mind that Wized doesn’t validate it. Make sure your code is well-structured to avoid unexpected behavior. ::: --- ### Perform a request Sends an HTTP request to an API to fetch or send data. This is useful for interacting with external services. #### Example use cases: - Fetch product details when a user selects an item from a list. - Submit form data when a user clicks the "Submit" button. #### Example: **Event:** `change` in a dropdown **Action:** Fetch product details from an API ::: info Note Make sure you've created at least one [request](/requests/), as you'll need to select the request you want to perform from the dropdown. ::: ## Action flows (chaining actions) One of the most powerful features of Wized is the ability to **chain multiple actions** into a sequence. This allows you to create dynamic, complex workflows that execute step by step in response to a single user interaction. ### Why use action flows? - **Sequential execution** → Actions run in order, ensuring logical dependencies. - **Conditional logic** → You can define conditions that determine whether an action should execute or not. - **Flexible customization** → Actions can be mixed and matched to fit any interaction scenario. ### Example `Product selection flow` **Event:** When a user **clicks on a product card**, the flow: 1. **Stores the selected product ID** in a variable. 2. **Fetches product details** via an API request. 3. **Set a variable** (using a condition if stock > 1). 4. **If in stock, updates the UI** with a success message ## Disabling events and actions To disable temporarily element events and actions without deleting them you can use the disable switch in header. You can use this feature to pause certain functionalities and re-enable them later as needed. ![disable-events](disable-functionality.png) # Intro to the elements In Wized, elements refer to the HTML elements you've created in Webflow that include the [wized attribute](/start-here/getting-started/wized-attribute). These elements are recognized within the configurator, allowing you to add or customize specific [configurations](/elements/configurations) and [events](/elements/events) to fit your needs. ::: tip Note Make sure you have added the [wized attribute](/start-here/getting-started/wized-attribute) first to all the elements you want to configure in Wized ::: ## Wized elements In Wized, elements are the core building blocks of your website, replicated from your Webflow project. Wized renders your site within its configurator, allowing you to enhance these existing elements by adding logic, configurations, and events. This interaction transforms your static design into a dynamic experience, enabling you to create advanced functionalities without modifying your original Webflow structure. ### Element configurations These are all the possible [configurations](/elements/configurations) that allow the element to have a dynamic behavior according to your indications. Examples of configurations include: hiding or showing an element, rendering a list of elements, setting dynamic texts, and dynamically modifying HTML attributes, among others. These configurations alter the behavior of the element based on the conditions you determine. ### Element events [Events](/elements/events) allow actions to be triggered when the end user interacts with the elements. For example, when a user clicks on an element or hovers over it, you can create sequential flows that execute in response, such as running a request, updating the value of a cookie or variable, etc. ## Reactivity in Wized Wized has the ability to instantly react to changes in your web app. Whenever any change in the state of your application is modified (for example, by changing the value of a variable or cookie or receiving a response from an API), Wized automatically re-evaluates all the conditions you have defined. If the result of any condition changes, Wized instantly updates the appearance or behavior of the relevant elements, without requiring a page reload. # Project Folders Organize your projects into folders and control access for specific Workspace members. ## Creating a Folder To create a folder, click **"Create Folder"** in the top-right corner of the Wized dashboard. ![Create Folder Button](./images/dashboard-new-folder.png) A popup will appear where you can name the folder and choose whether it is restricted or accessible to all Workspace members. ![Folder Creation Popup](./images/folder-create.png) ## Viewing Folders Access the list of folders in the **Folders** section of the dashboard. ![Folders Section](./images/folders-section.png) ## Moving a Project to a Folder To move a project to a folder, select **"Move to Folder"** from the project settings dropdown. ![Move to Folder Option](./images/move-to-folder.png) ## Edit, Delete or Restrict Folder Access To edit or restrict folder access to specific members you need to click the settings icon when on the top-right corner when opening a folder. If you restrict access to the folder, only admins and allowed members will be able to access the folder's projects. ![Manage Folder Popup](./images/folder-manage-popup.png) # Intro to the array methods ::: tip Note In the function editor, you can perform any [JS method](https://www.w3schools.com/js/js_array_methods.asp), using any value from cookies, variables, parameters, request responses, inputs or forms. Be sure to use the [parameters](/function-editor/parameters) correctly. ::: ## push() **Description** Adds one or more elements to the end of an array. Ideal for dynamically updating lists (e.g., adding new items to a cart). ::: info Note In this example, `return` is not used because the operation is executed once it is written, use `return` only if, in addition to this, you need to use the value of the new array. ::: ![array-push-example](array-push-example.png) ```javascript /* 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. */ const cart = ['apple', 'bread']; cart.push('milk'); // Result: ["apple", "bread", "milk"] return cart; // Optional, only if you want to return the array with the new elements to use it. ``` ## pop() **Description** Removes the **last element** from an array and returns it. Useful for LIFO (Last-In-First-Out) operations like undo stacks. ::: info Note In this example, `return` is not used because the operation is executed once it is written, use `return` only if, in addition to this, you need to use the value of the new array. ::: ![array-pop-example](array-pop-example.png) ```javascript /* 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. */ const tasks = ['task1', 'task2', 'task3']; tasks.pop(); // tasks: ["task1", "task2"], lastTask: "task3" retrun tasks; // Optional, only if you want to return the new array to use it. ``` ## map() **Description** Creates a new array by applying a function to every element. Perfect for transforming data (e.g., formatting prices or user names). ![array-map-example](array-map-example.png) ```javascript /* 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. */ const numbers = [1, 2, 3]; const doubled = numbers.map((num) => num * 2); // Result: [2, 4, 6] return doubled; ``` ## filter() **Description** Creates a new array with elements that pass a test. Use to extract subsets (e.g., active users, products in stock). ![array-filter-example](array-filter-example.png) ```javascript /* 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. */ const users = [ { name: 'Alice', active: true }, { name: 'Bob', active: false }, ]; return users.filter((user) => user.active); // Result: [ { name: "Alice", active: true } ] ``` ## forEach() **Description** Executes a function for each array element. Used for side effects like rendering UI components or logging. ```javascript /* 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. */ const colors = ['red', 'green', 'blue']; colors.forEach((color) => console.log(color)); // Logs: "red", "green", "blue" ``` ## find() **Description** Returns the **first element** that satisfies a condition. Great for searching (e.g., fetching a user by ID). ![array-find-example](array-find-example.png) ```javascript /* 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. */ const products = [ { id: 1, name: 'Laptop' }, { id: 2, name: 'Phone' }, ]; return products.find((p) => p.id === 1); // Result: { id: 1, name: "Laptop" } ``` ## reduce() **Description** Reduces an array to a single value by applying a function cumulatively. Use for totals, averages, or flattening data. ![array-reduce-example](array-reduce-example.png) ```javascript /* 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. */ const purchases = [10, 20, 30]; return purchases.reduce((sum, price) => sum + price, 0); // Result: 60 ``` ## includes() **Description** Checks if an array contains a specific value. Simple alternative to `indexOf` for presence checks (case-sensitive). ```javascript /* 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. */ const roles = ['admin', 'editor', 'viewer']; return roles.includes('admin'); // Result: true ``` ## slice() **Description** Copies a portion of an array into a new array. Non-destructive way to extract data (e.g., pagination). ```javascript /* 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. */ const data = [1, 2, 3, 4, 5]; return data.slice(0, 2); // Result: [1, 2] ``` ## splice() **Description** Adds/removes elements at a specific position. Use cautiously (mutates the original array). ```javascript /* 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. */ const tasks = ['taskA', 'taskB', 'taskC']; return tasks.splice(1, 1, 'taskX'); // Removes 1 element at index 1, adds "taskX" // Result: ["taskA", "taskX", "taskC"] ``` # Intro to the conditional methods ## `if` statement **Description** Executes a block of code if a specified condition is truthy. Foundation of decision-making in logic. ![conditionals-if-example](conditionals-if-example.png) ```javascript /* 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. */ const userAge = 20; let hasAccess = false; if (userAge >= 18) { hasAccess = true; } return hasAccess; ``` ## `else` clause **Description** Provides an alternative code block to execute if the `if` condition is falsy. ![conditionals-if-else-example](conditionals-if-else-example.png) ```javascript /* 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. */ const userAge = 12; if (userAge >= 18) { return (hasAccess = true); } else { return (hasAccess = false); } ``` ## Ternary operator (`? :`) **Description** Shorthand for simple `if-else`. Returns one of two values based on a condition. ![conditionals-ternary-example](conditionals-ternary-example.png) ```javascript /* 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. */ const userAge = 12; return userAge >= 18 ? 'Welcome' : "You can't join"; ``` ## `else if` ladder **Description** Tests multiple conditions sequentially after an initial `if`. Stops at the first truthy condition. ```javascript /* 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. */ const score = 85; let grade = ''; if (score >= 90) { grade = 'A'; } else if (score >= 80) { grade = 'B'; } else { grade = 'C'; } return grade; // result: "B" ``` ## `switch` statement **Description** Compares a value against multiple cases. Use for readability with many fixed conditions. ```javascript /* 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. */ const day = 'Monday'; let activity = ''; switch (day) { case 'Monday': activity = 'Play guitar'; break; case 'Friday': activity = 'Play soccer'; break; default: activity = 'Play tennis'; } return activity; // return: "Play guitar" ``` # Intro to the date methods ::: tip Note In the function editor, you can perform any [JS method](https://www.w3schools.com/js/js_date_methods.asp), using any value from cookies, variables, parameters, request responses, inputs or forms. Be sure to use the [parameters](/function-editor/parameters) correctly. ::: ## Date.now() **Description** Returns the current timestamp in milliseconds (since January 1, 1970). Used for timing operations or unique IDs. ```javascript /* 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 (timestamp = Date.now()); // Result: 1718035200000 (example value) ``` ## getFullYear() **Description** Extracts the year (4 digits) from a Date object. Ideal for age calculations or date displays. ```javascript /* 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. */ const today = new Date(); return today.getFullYear(); // Result: 2025 (current year) ``` ## getMonth() **Description** Returns the month of a Date object (0 = January, 11 = December). Combine with `+1` for human-readable formats. ```javascript /* 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. */ const date = new Date('2025-02-25'); return date.getMonth() + 1; // Result: 2 (Feb) ``` ## getDate() **Description** Gets the day of the month (1-31) from a Date object. Useful for deadlines or calendar features. ```javascript /* 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. */ const eventDate = new Date('2025-02-25'); return eventDate.getDate(); // Result: 25 ``` ## getHours() & getMinutes() **Description** - `getHours()`: Returns the hour (0-23) of a Date object. - `getMinutes()`: Returns the minutes (0-59). ```javascript /* 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. */ const now = new Date(); return now.getHours(); // 14 (2 PM) const minutes = now.getMinutes(); // 30 ``` ## toISOString() **Description** Converts a Date object to an ISO 8601 string (e.g., `"2024-07-20T12:00:00.000Z"`). Standard format for APIs and databases. ```javascript /* 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. */ const date = new Date(); return date.toISOString(); // Result: "2024-07-20T12:00:00.000Z" ``` ## toLocaleDateString() **Description** Converts a Date object to a locale-specific date string. Customizable for regional formats (e.g., `"07/20/2024"` vs `"20/07/2024"`). ```javascript /* 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. */ const date = new Date(); return date.toLocaleDateString('en-US'); // Result: "7/20/2024" ``` # Intro to the math formulas ::: tip Note In the function editor, you can perform any [JS method](https://www.w3schools.com/js/js_math.asp), using any value from cookies, variables, parameters, request responses, inputs or forms. Make sure to use the [parameters](/function-editor/parameters) correctly. ::: ## Math.abs() **Description** Returns the absolute value of a number (removes negative sign if present). Useful for distance calculations or non-negative contexts. ![math-abs-example](math-abs-example.png) ```javascript /* 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. */ const number = -7.25; return Math.abs(number); // Result: 7.25 ` ``` ## Math.round() **Description** Rounds a number to the nearest integer. Perfect for simplifying decimal results (e.g., prices, ratings). ![math-round-example](math-round2.png) ```javascript /* 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. */ const price = 9.87; return Math.round(price); // Result: 10 ` ``` ## Math.ceil() **Description** Rounds a number **up** to the nearest integer. Ideal for ensuring minimum capacity (e.g., seats, resources). ![math-ceil-example](math-ceil-example.png) ````javascript /* 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. */ const users = 15.1; return Math.ceil(users / 10); // Result: 2 (for 15.1/10 = 1.51 → rounded up) ``` ```` ## Math.floor() **Description** Rounds a number **down** to the nearest integer. Used for truncating decimals (e.g., age calculations). ![math-floor-example](math-floor-example3.png) ```javascript /* 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. */ const age = 29.9; return Math.floor(age); // Result: 29 ``` ## Math.max() **Description** Returns the largest value from a list of numbers. Helpful for comparisons (e.g., finding highest scores). ![math-max-example](math-max-example.png) ```javascript /* 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 Math.max(4, 12, 3, 9); // Result: 12 ``` ## Math.min() **Description** Returns the smallest value from a list of numbers. Useful for constraints (e.g., discounts, limits). ![math-min-example](math-min-example.png) ```javascript /* 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 Math.min(4, 12, 3, 9); // Result: 3 ``` ## Math.random() **Description** Generates a random decimal between 0 (inclusive) and 1 (exclusive). Combine with other methods for custom ranges. ![math-random-example](math-random-example.png) ```javascript /* 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. */ const randomNum = Math.random(); const diceRoll = Math.floor(randomNum * 6) + 1; // Result: Random integer between 1-6 `; return diceRoll; ``` ## Math.pow() **Description** Calculates the base raised to an exponent (base^exponent). Used for growth calculations or geometric operations. ![math-pow-example](math-pow-example.png) ````javascript /* 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 Math.pow(2, 3); // Result: 8 (2³ = 2*2*2) ``` ```` # Intro to the number methods ::: tip Note In the function editor, you can perform any [JS method](https://www.w3schools.com/js/js_number_methods.asp), using any value from cookies, variables, parameters, request responses, inputs or forms. Make sure to use the [parameters](/function-editor/parameters) correctly. ::: ## toFixed() **Description** Formats a number with a fixed number of digits after the decimal point. Ideal for currency, measurements, or consistent decimal displays. ![number-fixed-example](number-fixed-example.png) ```javascript /* 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. */ const price = 5.567; return price.toFixed(2); // Result: "5.57" (rounded to 2 decimals) ``` ## toPrecision() **Description** Formats a number to a specified length of significant digits. Useful for scientific data or limiting display length. ![number-precision-example](number-precision-example2.png) ```javascript /* 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. */ const value = 123.456; return value.toPrecision(4); // Result: "123.5" (4 significant digits) ``` ## toString() **Description** Converts a number to a string, optionally in a specific base (e.g., binary, hexadecimal). Helpful for encoding or UI displays. ![number-toString-example](number-toString-example.png) ```javascript /* 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. */ const decimalNumber = 255; return decimalNumber.toString(16); // Result: "ff" (hexadecimal representation) ``` ## Number.parseInt() **Description** Parses a string and returns an integer in a specified base (default: base 10). Ignores non-numeric suffixes. ![number-parseInt-example](number-parseInt-example.png) ```javascript /* 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. */ const pixelValue = '42px'; return Number.parseInt(pixelValue); // Result: 42 ``` ## Number.parseFloat() **Description** Parses a string and returns a floating-point number. Extracts decimals and ignores non-numeric suffixes. ![number-parseFloat-example](number-parseFloat-example.png) ```javascript /* 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. */ const userInput = '3.14meters'; return Number.parseFloat(userInput); // Result: 3.14 ``` ## Number.isInteger() **Description** Checks if a value is an integer. Returns `true` or `false`. Useful for validation (e.g., age, quantity inputs). ![number-isInteger-example](number-isInteger-example.png) ```javascript /* 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. */ const value1 = 42; const value2 = 42.5; return Number.isInteger(value1); // true Number.isInteger(value2); // false ``` ## Number.isNaN() **Description** Checks if a value is `NaN` ("Not-a-Number"). Safer than the global `isNaN()` (doesn’t coerce non-number types). ![number-isNaN-example](number-isNaN-example.png) ```javascript /* 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. */ const invalidCalc = 0 / 0; return Number.isNaN(invalidCalc); // true ``` # Intro to the object methods ::: tip Note In the function editor, you can perform any [JS method](https://www.w3schools.com/Js/js_object_methods.asp), using any value from cookies, variables, parameters, request responses, inputs or forms. Make sure to use the [parameters](/function-editor/parameters) correctly. ::: ## Object.keys() **Description** Returns an array of a given object’s own property names (keys). Useful for iterating through object properties dynamically. ![object-keys-example](object-keys-example.png) ```javascript /* 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. */ const user = { name: 'Alice', age: 30 }; return Object.keys(user); // Result: ["name", "age"] ``` ## Object.values() **Description** Returns an array of a given object’s own property values. Perfect for extracting data without keys (e.g., lists, summaries). ![object-values-example](object-values-example.png) ```javascript /* 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. */ const user = { name: 'Alice', age: 30 }; return Object.values(user); // Result: ["Alice", 30] ``` ## Object.entries() **Description** Returns an array of a given object’s key-value pairs as arrays `[key, value]`. Ideal for data transformations or table displays. ![object-entries-example](object-entries-example.png) ```javascript /* 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. */ const user = { name: 'Alice', age: 30 }; return Object.entries(user); // Result: [["name", "Alice"], ["age", 30]] ``` ## Object.assign() **Description** Copies properties from one or more source objects to a target object. Used to merge objects or clone data (shallow copy). ![object-assign-example](object-assign-2.png) ```javascript /* 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. */ const defaults = { theme: 'light', fontSize: 12 }; const userSettings = { fontSize: 14 }; return Object.assign({}, defaults, userSettings); // Result: { theme: "light", fontSize: 14 } ``` ## Object.freeze() **Description** Prevents modifications to an object (add/update/delete properties). Ensures data integrity for constants or configurations. ![object-freeze-example](object-freeze-example.png) ```javascript /* 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. */ const config = { apiUrl: 'https://api.example.com' }; Object.freeze(config); config.apiUrl = 'https://hacked.url'; // Fails silently in non-strict mode // config remains unchanged ``` ## hasOwnProperty() **Description** Checks if an object has a specific property as its own (not inherited from prototypes). Critical for safe property checks. ![object-hasOwnProperty-example](object-hasOwnProperty-example.png) ```javascript /* 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. */ const user = { name: 'Alice' }; return user.hasOwnProperty('name'); // true return user.hasOwnProperty('age'); // false ``` # Intro to the operator methods ::: tip Note In the function editor, you can perform any [JS method](https://www.w3schools.com/js/js_operators.asp)using values from cookies, variables, parameters, request responses, inputs, or forms. Be sure to use the [parameters](/function-editor/parameters) correctly. ::: ## Addition (`+`) **Description** Adds two numbers or concatenates strings. Be cautious: mixing numbers and strings triggers type coercion. ```javascript /* 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 (sum = 3 + 5); // 8 return (text = 'Price: $' + 99); // "Price: $99" ``` ## Subtraction (`-`) **Description** Subtracts two numbers. Converts strings to numbers if possible (e.g., `"5" - 2 → 3`). ```javascript /* 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 (result = 10 - 3); // 7 ``` ## Multiplication (`*`) **Description** Multiplies two numbers. Non-numeric values are coerced to numbers (e.g., `"2" * "3" → 6`). ```javascript /* 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 (total = 4 * 5); // 20 ``` ## Division (`/`) **Description** Divides two numbers. Returns `Infinity` if divided by 0. ```javascript /* 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 (quotient = 15 / 3); // 5 ``` ## Modulus (`%`) **Description** Returns the remainder of a division. Useful for even/odd checks or cyclic patterns. ```javascript /* 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 (remainder = 10 % 3); // 1 (10 ÷ 3 = 3 with remainder 1) ``` ## Exponentiation (`**`) **Description** Raises a base to the power of an exponent (e.g., `2 ** 3 → 8`). ```javascript /* 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 (power = 2 ** 4); // 16 ``` ## Increment (`++`) **Description** Increases a number by 1. Use as prefix (`++x`) or postfix (`x++`). ```javascript /* 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. */ let count = 5; return count++; // count becomes 6 ``` ## Decrement (`--`) **Description** Decreases a number by 1. Use as prefix (`--x`) or postfix (`x--`). ```javascript /* 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. */ let count = 5; return count--; // count becomes 4 ``` ## Equality (`==`) **Description** Compares values **with type coercion** (e.g., `5 == "5" → true`). Avoid in most cases. ```javascript /* 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 5 == '5'; // true ``` ## Strict Equality (`===`) **Description** Compares values **and types** (no coercion). Preferred for reliable comparisons. ```javascript /* 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 5 === '5'; // false ``` ## Inequality (`!=`) **Description** Checks if values are different **with type coercion**. ```javascript /* 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 5 != '5'; // false (due to coercion) ``` ## Strict Inequality (`!==`) **Description** Checks if values or types differ (no coercion). Safer than `!=`. ```javascript /* 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 5 !== '5'; // true ``` ## Greater Than (`>`) & Less Than (`<`) **Description** Compares numeric values or string lexicographical order. ```javascript /* 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 10 > 5; // true return 'apple' < 'banana'; // true (a < b alphabetically) ``` ## Greater Than or Equal (`>=`) & Less Than or Equal (`<=`) **Description** Similar to `>`/`<` but includes equality. ```javascript /* 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 5 >= 5; // true ``` ## Logical AND (`&&`) **Description** Returns `true` if **both** operands are truthy. Returns the first falsy value or last truthy. ```javascript /* 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 true && 5 > 3; // true ``` ## Logical OR (`||`) **Description** Returns `true` if **at least one** operand is truthy. Returns the first truthy value. ```javascript /* 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 false || 'default'; // "default" ``` ## Logical NOT (`!`) **Description** Inverts a boolean value. Converts truthy/falsy values to boolean. ```javascript /* 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 !true; // false ``` ## Assignment (`=`) **Description** Assigns a value to a variable. ```javascript /* 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. */ let x = 10; return x; ``` ## Add & Assign (`+=`) **Description** Adds a value to a variable and updates it. ```javascript /* 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. */ let total = 5; return (otal += 3); // total = 8 ``` ## Ternary Conditional (`? :`) **Description** Shorthand for `if-else`. Syntax: `condition ? exprIfTrue : exprIfFalse`. ```javascript /* 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. */ const access = age >= 18 ? 'Granted' : 'Denied'; return access; ``` ## Nullish Coalescing (`??`) **Description** Returns the right-hand operand if the left is `null` or `undefined`. ```javascript /* 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 i.login_name ?? 'Guest'; ``` ## Optional Chaining (`?.`) **Description** Safely accesses nested properties. Returns `undefined` if any chain link is `null`/`undefined`. ```javascript /* 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 r.request_name.data.user?.address?.city; ``` ## typeof **Description** Returns a string indicating the type of a variable. ```javascript /* 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 typeof 'hello'; // "string" ``` ## Spread (`...`) **Description** Expands arrays/objects into individual elements. Used for copying, merging, or function arguments. ```javascript /* 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. */ const merged = [...arr1, ...arr2]; return merged; ``` ## Nullish Assignment (`??=`) **Description** Assigns a value only if the variable is `null`/`undefined`. ```javascript /* 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. */ let config = null; return (config ??= { theme: 'light' }); // config becomes { theme: "light" } ``` ## Logical AND Assignment (`&&=`) **Description** Assigns a value only if the variable is truthy. ```javascript /* 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. */ let value = 'Hello'; return (value &&= 'Updated'); // value becomes "Updated" ``` ## in **Description** Checks if a property exists in an object. ```javascript /* 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' in { name: 'Alice' }; // true ``` # Intro to the text formulas In Wized, you can transform text with the [Function Editor](/function-editor/). Whether you need to modify values from [cookie](/data-store/cookies), [variables](/data-store/variables), [parameters URL](/data-store/navigation), [request responses](/data-store/requests), etc. You can apply some JS methods directly within the Function editor. This allows you to dynamically format, extract or manipulate text to suit your needs. In this guide, we will explore the most commonly used key [JavaScript methods](https://www.w3schools.com/js/js_string_methods.asp), along with practical examples to help you apply them in your project. ::: tip Note In the function editor, you can perform any [JS method](https://www.w3schools.com/js/js_string_methods.asp), using any value from cookies, variables, parameters, request responses, inputs or forms. Make sure to use the [parameters](/function-editor/parameters) correctly. ::: ## toLowerCase() **Description** Converts all characters in a text to lowercase. Useful for normalizing data or case-insensitive comparisons. ![toLowerCase-example](toLowerCase-example.png) ```JavaScript /* 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. */ const originalText = "Hello World"; return originalText.toLowerCase(); // Result: "hello world" ``` ## toUpperCase() **Description** Transforms all characters in a text to uppercase. Ideal for standardizing formats or highlighting information in interfaces. ![toUpperCase-example](toUpperCase-example.png) ```JavaScript /* 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. */ const originalText = "Wized is a Framework"; return originalText.toUpperCase(); // Result: "WIZED IS A FRAMEWORK" ``` ## concat() **Description** Combines two or more texts into one. An alternative to the `+` operator, offering better readability for multiple concatenations. ![concatenate-text-example](concatenate-text-example.png) ```JavaScript /* 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. */ const greeting = "Hello, "; const user = "John"; const message = greeting.concat(user, "!"); return message; // Result: "Hello, John!" ``` ## trim() **Description** Removes whitespace from the start and end of a text. Essential for cleaning user inputs or form data. ![trim-example](trim-example.png) ```JavaScript /* 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. */ const textWithSpaces = " example text "; return cleanText = textWithSpaces.trim(); // Result: "example text" ``` ## split() **Description** Splits a text into parts using a specified separator (like a comma, space, or special character) and returns an array of the fragments. ![split-example](split-example.png) ```JavaScript /* 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. */ const list = "apple,banana,grape"; return fruitArray = list.split(","); // Result: ["apple", "banana", "grape"] ``` ## replace() **Description** Replaces the first occurrence of a text or pattern within a string. Supports regular expressions for advanced searches. ![replace-example](replace-example.png) ```JavaScript /* 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. */ const originalText = "User: guest123"; return modifiedText = originalText.replace("guest123", "admin"); // Result: "User: admin" ``` ## includes() **Description** Checks if a text contains a specific substring. Returns `true` or `false`. Case-sensitive by default (use `toLowerCase()` first for case-insensitive checks). ![includes-example](includes-example.png) ```JavaScript /* 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. */ const message = "Welcome to Wized"; return hasWized = message.includes("Wized"); // Result: true ``` ## slice() **Description** Extracts a section of a text based on start and end indexes. ![slice-example](slice-example.png) ```JavaScript /* 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. */ const code = "ID-2024-X"; return subCode = code.slice(3, 7); // Result: "2024" ``` ## replaceAll() **Description** Replaces all occurrences of a text or pattern in a string. Global version of `replace()`. ![replace-all-example](replace-all-example.png) ```JavaScript /* 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. */ const originalText = "Error: null, Error: undefined"; return originalText.replaceAll("Error", "Warning"); // Result: "Warning: null, Warning: undefined" ``` ## startsWith() & endsWith() **Description** - `startsWith()`: Checks if a text starts with specific characters. ![startsWith-example](startsWith-example.png) ```JavaScript /* 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. */ const url = "https://wized.com"; return isSecure = url.startsWith("https"); // result true ``` - `endsWith()`: Checks if a text ends with specific characters. ![endsWith-example](endsWith-example.png) ```JavaScript /* 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. */ const text = "https://wized.com"; return text.endsWith(".com"); // result true ``` # Basic concepts In this guide you will learn what are the basic concepts you need to understand to correctly use the function editor. ## `Return` keyword In the Wized Function editor, it is essential to always use the `return` keyword. This word indicates the value that a function should return at the end of its execution. ::: warning Important You must **always include the** `return` keyword at the end of your functions. Make sure that you do not duplicate `return` in the same function. ::: ::: details returning Numbers example - **Returning numbers** To return a numeric value, you would use: ![num example](num-example.png) ```javascript const number_value = 42; return number_value; // This will return the number 42 ``` ::: ::: details returning strings example To return a string, you can provide a text value enclosed in quotes: ![text example](text-example.png) ```javascript return 'Hello, World!'; // This will return the string 'Hello, World!' ``` ::: ::: details returning Booleans example To return a boolean value, you can simply return `true` or `false`: ![boolean example](boolean-example.png) ```javascript const isLoggedIn = true; return isLoggedIn; // This will return true ``` ::: ## `let` and `const` keywords You can use `let` and `const` to define variables in JavaScript. Here’s the difference: - **`let`**: Used to declare variables whose value can change later. ```javascript let counter = 0; counter = 5; // Valid, because "let" allows reassignment ``` - **`const`**: Used to declare variables whose value will not change after being assigned. ```javascript const PI = 3.1416; PI = 3.14; // ❌ Error: Cannot reassign a value to a constant ``` ## Dot notation The dot notation is a method for accessing specific properties within [objects](/function-editor/data-types#objects) and [arrays](/function-editor/data-types#arrays-lists) in JavaScript. [Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors) ### How does It work? Consider your data as a tree structure, where each branch represents a property and each leaf corresponds to a value. Dot notation allows you to "navigate" this tree by specifying the path from the root to the desired leaf. ::: details example accessing an object value ![dot-notation-object-example](dot-notation-object-example.png) For example, if you have a user object with properties like `name` and `email`, you can access these properties using dot notation as follows: ```javascript const user = { name: 'John Doe', // User's name email: 'john.doe@example.com', // User's email }; return user.name; // Returns 'John Doe' return user.email; // Returns 'john.doe@example.com' ``` ::: ::: details example accessing an array object value ![dot-notation-array-example](dot-notation-array-example.png) Additionally, dot notation is not only used for objects but also for arrays. Here is an example of how to access a value within an array using dot notation: ```javascript const users = [ { name: 'John Doe', email: 'john.doe@example.com' }, { name: 'Jane Smith', email: 'jane.smith@example.com' }, ]; // Accessing the name of the first user return users[0].name; // Returns 'John Doe' // Accessing the name of the second user return users[1].name; // Returns 'Jane Smith' ``` ::: --- ## Operators and expressions Operators are used to perform calculations and comparisons in your JavaScript code. Below are the principal categories of operators you will encounter: ### Arithmetic operators: These include `+`, `-`, `*`, `/`, and `%`, which perform addition, subtraction, multiplication, division, and modulus (remainder of division), respectively. ::: details Subtraction example ![Substraction example](subtraction-example.png) ```JavaScript // Subtraction: Calculate remaining stock let initialStock = 10; // You can replace this value by any other value such as variables, cookies, request responses, etc. let soldItems = 5; // fixed number of items sold return remainingStock = initialStock - soldItems; // subtract sold items from stock ``` ::: ::: details Multiplication example ![multiplication example](multiplication-example.png) ```JavaScript // Multiplication: Calculate interest on product price let productPrice = 200; // fixed product price let interestRate = 3; // You can replace this value by any other value such as variables, cookies, request responses, etc. return totalWithInterest = productPrice * interestRate; // multiply price by interest rate ``` ::: ::: details Division example ![division example](division-example.png) ```Javascript // Subtraction: Calculate remaining stock with variable let initialStock = v.initialStock; // stock variable let soldItems = 5; // fixed number of items sold return remainingStock = initialStock - soldItems; // subtract sold items from stock // Multiplication: Calculate interest on product price from API response let productPrice = 200; // fixed product price let interestRate = r.getInterest.data; // interest rate from an API request response return totalWithInterest = productPrice * interestRate; // multiply price by interest rate // Division: Calculate average score from a sum of scores let sumOfScores = v.totalScores; // total scores variable let numberOfTests = 4; // fixed number of tests return averageScore = sumOfScores / numberOfTests; // divide total scores by number of tests ``` ::: ::: warning Note Make sure that if you are going to use variable values, cookies, responses to requests, etc. They must be already created and contain a value with a valid format. ::: ### Comparison operators: These include `>`, `<`, `>=`, `<=`, `==`, `!=`, `===`, and `!==`. They are used to compare values, determining if one is greater than, less than, equal to, or not equal to another. ::: details greater than example ![greater than example](greater-than-example.png) ```JavaScript // Greater than (>): Check if total points exceed a threshold let totalPoints = v.totalPoints; // variable storing total points let pointsThreshold = 100; // fixed threshold value return exceedsThreshold = totalPoints > pointsThreshold; // true if totalPoints is greater than pointsThreshold ``` ::: ::: details greater than or equal to example ![greater-than-or-equal-to](greater-than-or-equal-to.png) ```JavaScript // Greater than or equal to (>=): Check if cart total meets minimum for discount let cartTotal = 50; // total value of items in the cart let minForDiscount = 50; // minimum cart total for discount return qualifiesForDiscount = cartTotal >= minForDiscount; // true if cartTotal is at least minForDiscount ``` ::: ::: details equal to In JavaScript, the operators =, ==, and === have different functions: - `=` is the assignment operator. It is used to assign a value to a variable. ```JavaScript let x = 5; // x is now 5 ``` - `==` is the loose equality operator. It compares values but converts types if necessary. ```JavaScript 5 == "5"; // true (converts the string to a number before comparing) ``` - `===` is the strict equality operator. It compares both values and types, without conversions. ```JavaScript 5 === "5"; // false (one is a number, the other is a string) ``` - example ```JavaScript // Strict equal to (==): Check if API response status differs from success let responseStatus = r.request_name.status; // response status from an request let successStatus = 200; // success status code return isEqual = responseStatus == successStatus; // true if responseStatus is equal to successStatus ``` ::: ::: warning Note Make sure that if you are going to use variable values, cookies, responses to requests, etc. They must be already created and contain a value with a valid format. ::: ### Logical operators: These include `&&` (AND), `||` (OR), and `!` (NOT). They are used to combine or negate boolean expressions. ::: details && AND example ![and-example](and-example.png) ```JavaScript // AND (&&): Check if the `get_all_products` request was executed and successful. let hasRequested = r.get_all_products.hasRequested; // Boolean if the request has already been executed let successful = r.get_all_products.status === 200; // Boolean result of the validation if the get_all_products" request was successfully executed. return hasRequested && successful; // true, if hasRequested and successful are true ``` ::: ::: details OR (||) example ![or-example](or-example.png) ```JavaScript // OR (||): Check if product is in stock or if backorder is allowed let inStock = v.stock > 0; // boolean indicating if stock is available let allowBackorder = true; // boolean indicating if backorder is allowed return canPurchase = inStock || allowBackorder; // true if in stock or backorder allowed ``` ::: ::: details NOT (!) example ```JavaScript // NOT (!): Negate login status to check if user is not logged in let loggedIn = r.login.ok; // boolean indicating login status let isGuest = !loggedIn; // true if user is not logged in ``` ::: ::: details combined example ```JavaScript // Combined example: Check if user is an admin and either logged in or has a valid session let role = r.auth_user.data.role === "admin"; // boolean for admin role let loggedInStatus = r.auth_user.ok; // boolean for login status let validSession = v.session === "valid"; // boolean for valid session status return access = role && (loggedInStatus || validSession); // true if admin and (logged in OR has a valid session) ``` ::: ::: warning Note Make sure that if you are going to use variable values, cookies, responses to requests, etc. They must be already created and contain a value with a valid format. ::: ### Assignment operators: These operators (`=`,`+=`,`-=`,`*=`,`/=`,`%=`) allow you to assign a value to a variable or update its existing value: ::: details `=`: Assigns a value to a variable. ```JavaScript return counter = 10; //In this example a fixed value `10` was set, however, you can replace it by the value of a cookie, variable, URL parameter, request response, etc. ``` ::: ::: details `+=`: Adds a value to the current value of the variable. ```JavaScript let counter = 10; //In this example a fixed value `10` was set, however, you can replace it by the value of a cookie, variable, URL parameter, request response, etc. return counter +=1; ``` ::: ::: details `-=`: Subtracts a value from the current value of the variable. ```JavaScript let counter = 10; //In this example a fixed value `10` was set, however, you can replace it by the value of a cookie, variable, URL parameter, request response, etc. return counter -=1; ``` ::: ::: details `*=`: Multiplies the current value of the variable by a value. ```JavaScript let counter = 10; //In this example a fixed value `10` was set, however, you can replace it by the value of a cookie, variable, URL parameter, request response, etc. return counter *=1; ``` ::: ::: details `/=`: Divides the current value of the variable by a value. ```JavaScript let counter = 10; //In this example a fixed value `10` was set, however, you can replace it by the value of a cookie, variable, URL parameter, request response, etc. return counter /=1; ``` ::: ::: details `%=`: Calculates the modulus (remainder of division) ```JavaScript let counter = 10; //In this example a fixed value `10` was set, however, you can replace it by the value of a cookie, variable, URL parameter, request response, etc. return counter %=1; ``` ::: ## Conditionals (if...else) Conditionals allow you to execute different blocks of code depending on whether a condition is met or not. The basic structure of an if...else conditional is: ```JavaScript if (condition) { // Code to be executed if the condition is true } else { // Code to execute if the condition is false } ``` ::: details If-else example ![if-else-example](if-else-example.png) **example** ```JavaScript // example: Check if the user qualifies for a discount based on cart total let cartTotal = v.cartTotal; // variable storing the total value in the user's cart let discountThreshold = 50; // minimum cart total to qualify for a discount if (cartTotal >= discountThreshold) { // User qualifies for discount return "Congratulations! You qualify for a discount."; } else { // User does not qualify for discount return "Add more items to your cart to qualify for a discount."; } ``` ::: --- ## Ternary operators The ternary operator is a shorthand way of writing a simple conditional on a single line. Its structure is: ```JavaScript condition ? valueIfTrue : valueIfFalse ``` ::: details Ternary Operators example ![ternary-operators-example](ternary-example2.png) ```JavaScript // example: Check if the user qualifies for a discount using a ternary operator let cartTotal = v.cartTotal; // variable storing the total value in the user's cart let discountThreshold = 50; // minimum cart total to qualify for a discount // Ternary operator for discount qualification let message = cartTotal >= discountThreshold ? "Congratulations! You qualify for a discount." // value if true : "Add more items to your cart to qualify for a discount."; // value if false return message; ``` ::: # Data types guide ## Numbers Represents numeric values, which can be integers or decimals.In this [guide](https://www.w3schools.com/js/js_number_methods.asp), you will find some methods that you can use inside the [function editor](/function-editor/) with number data. :::info Note Go to Math [formulas](/formulas/math) to better understand how to work with this type of data ::: ## Strings Text strings represent sequences of characters, such as names, descriptions, messages, or any other type of textual information. In JavaScript, text strings are delimited by single ( ' ) or double ( " ) quotes. More information in this [guide](https://www.w3schools.com/js/js_string_methods.asp) :::info Note Go to Text [formulas](/formulas/text) to better understand how to work with this type of data ::: ## Booleans (true and false) Booleans represent logical values of `true` or `false`. They are essential for making decisions in your code and controlling the execution flow of your application. ## Objects An object is a data structure that stores information in key-value pairs. Each key is a unique identifier (a string) that points to a value, which can be of any data type (number, string, array, another object, etc.). ### How to identify an object? - It is written inside `{}` (curly braces). - Uses key-value pairs separated by colons `:`. - Keys are strings. - Values can be any data type. ### Creating an object You can create an object using curly braces `{}` and separating properties with commas. Each property has a key (name) and a value, separated by a colon `:`. For example: ```javascript const person = { name: 'John', age: 30, city: 'Madrid', }; // Object created with name, age and city properties return person; ``` You can check if a value is an object using: ```javascript return typeof person; // "object" ``` ### Accessing properties: You can access the value of a property of an object using [dot notation](/function-editor/basic-concepts#dot-notation). ### Modifying properties: If you need to change the value of an existing property, you can assign a new value to its key. For example: ```javascript person.age = 31; // Updates the value of the property "age" to 31 ``` ### Adding properties: You can add new properties to an object by assigning a value to a new key. For example: ```javascript person.profession = 'Developer'; // Adds the property "profession" to the object ``` ## Arrays An array is a data structure that stores multiple values in an ordered list. Each value is assigned a numeric index, starting from `0`. ### How to identify an array? - It is written inside `[]` (square brackets). - Elements are separated by commas. - The order of elements is maintained. ### Creating an array: To create an array, use square brackets `[]` and separate the elements with commas. For example: ```javascript return (myShoppingList = ['apples', 'milk', 'eggs', 'bread']); ``` ### Accessing elements: You can access a specific element in an array by using [dot notation](/function-editor/basic-concepts#dot-notation). ### Modifying elements: You can change the value of an existing element in an array by assigning it a new value using its index. For instance: ```javascript myShoppingList[1] = 'yogurt'; // Replace "milk" with "yogurt" ``` ### Types of content in an array Arrays can contain different types of values, including: - Numbers: `[1, 2, 3]` - Strings: `["apple", "banana", "cherry"]` - Booleans: `[true, false, true]` - Objects: `[{name: "Alice"}, {name: "Bob"}]` - Other arrays (Nested Arrays): `[[1, 2], [3, 4]]` :::info Note Go to array [formulas](/formulas/array) to better understand how to work with this type of data ::: # How to use AI to create code for Wized Artificial Intelligence can be an invaluable programming partner in Wized, assisting you in generating JavaScript code snippets quickly and efficiently. Even for those who are new to JavaScript or need to implement complex logic. To use AI effectively in Wized, it is crucial to provide the right context so that it understands the user's needs and generates code that is compatible. Here's how to do it: 1. **Identify the task:** Clearly define what the user wants to accomplish with the code. Is it to validate a form, display a conditional message, or perform a specific calculation? 2. **Ask a precise question:** Use clear and concise language to describe the task at hand. Include relevant details, such as the names of variables, cookies, or API responses that the user needs to utilize. 3. **Provide context to the AI:** Before asking the question, include the following prompt so that the AI understands the Wized environment and generates appropriate code: ## Snippet ```JavaScript You are assisting a Wized user, a low-code platform integrated with Webflow for creating interactive web applications. The user needs guidance writing JavaScript code within the Wized Function Editor to customize website behavior. Keep the following points in mind: - **Data Access:** Wized offers real-time access to data through specific parameters: - `c`: Cookies (e.g., `c.myCookie`) - `v`: Variables (e.g., `v.myVariable`) - `i`: Inputs (e.g., `i.myInputField`) - `f`: Forms (e.g., `f.myForm.name.email`) - `r`: API Responses (e.g., `r.myRequest.data.price`) - `n`: Navigation (e.g., `n.currentPage`) - **Functions:** Functions within the Function Editor must always return a value using the `return` keyword. - **Syntax:** Ensure the code is valid JavaScript and supported by modern web browsers. - **No `console.log`:** Avoid `console.log` statements, as Wized provides a built-in preview for results. - **No direct DOM access:** Do not use `document.getElementById` or similar DOM access methods, as Wized automatically manages element selection. Now, provide the user with Wized-compatible JavaScript code to answer their question. ``` ## Tips for better results with AI - **Be specific and detailed in your questions:** The clearer and more precise your task description is, the better the AI-generated code will be. - **Include examples:** If possible, provide examples of how you would like the end result to look or function. - **Mention relevant actions or settings:** If your code is related to a specific Wized action or setting, please mention this in your question so the AI can generate more contextualized code. # Intro to the funtion editor The **function editor** is a core component of the Wized configurator, designed specifically to empower you to create custom logic and enhance the interactivity of your web applications. While Wized offers a range of predefined [configurations](/elements/configurations), [events](/global-events/), and [actions](/global-events/actions-available) essential for any web application, it is important to provide these configurations with personalized context. Understanding when and how these configurations, actions, and events will execute is key to optimizing your application’s functionality. In this guide, you will learn how to utilize the function editor, as well as how it integrates with events, actions, and element configurations. ![function editor](function-editor-overview.png) # Window overview The **function editor** is organized into two main areas, designed to enhance your coding experience and facilitate result visualization. ![Function Editor](function-editor-overview.png) ## Text area In the **Text area**, you can write JavaScript functions that execute within Wized. This editor operates similarly to traditional code editors. Within the Wized environment, you have access to [specific parameters](/function-editor/parameters) that allow you to interact directly with the application's state data. ![text-area](text-area.png) ## Result area The **Result area** shows the output of your code after execution. By clicking the **Test button**, the code in the Text area executes, and the returned data is presented in various formats, including text, numbers, arrays, and objects. Some specific use cases for each format are: ![result-panel](result-panel.png) :::tip Note You can expand or collapse each property of an object or array, making it easier to analyze data and providing better visual control over the results. ::: ## Buttons area ![buttons](buttons.png) - **Test**: Executes the code written in the Text area and updates the Result area with the output area. - **Open data store**: Opens a floating window displaying the current contents of the Data store. - **Prettify**: Improves code readability by automatically formatting it. - **Documentation**: Shortcut to Wized documentation - **Wrap code**: Resizes the code to fit the window, eliminating the need for horizontal scrolling. # Into to the function editor parameters The parameters in Wized allow easy access to all types of data within the [function editor](/function-editor/). Each parameter represents a specific type of data. ## c: Access to cookies - ```javascript return c; //Returns an array with all cookies and their values ``` - ```javascript return c.cookie_name: //Returns the specific value of the indicated cookie. For more information, refer to the Cookies section. ``` ## f: Access to forms - ```javascript return f: // Returns an array of all created forms, where each form is an object that includes inputs as properties. ``` - ```javascript return f.form_name: //Returns an object with the inputs of a form (name, email, password, etc.). ``` - ```javascript return f.form_name.email: //Returns the value of the "email" input within the form ``` :::tip Note - In order for Wized to recognize forms, they must have the [Wized attribute](/start-here/getting-started/wized-attribute). - Form values are only accessible after the form has been submitted; ::: ## i: Access to input fields - ```javascript return i : // Returns a list of all recognized inputs on the current page. ``` - ```javascript return i.input_name : // Returns the real-time value of the specified input. ``` :::tip Note In order for Wized to recognize inputs, they must have the [Wized attribute](/start-here/getting-started/wized-attribute), Refer to the [Input Fields section](/data-store/inputs) for more information. ::: ## n: Access to navigation - ```javascript return n.href : // Returns the current URL value. ``` - ```javascript return n.parameter : // Returns an object with all previously defined URL parameters. ``` - ```javascript return n.parameter.parameter_name : // Returns the specific value of a real-time parameter. ``` - ```javascript return n.path : // Returns the current navigation path. ``` ## r: Access to requests - ```javascript return r : // Returns a list of all requests and their values. ``` - ```javascript return r.request_name : // Returns the result, headers, and status of an executed request. ``` ## v: Access to variables - ```javascript return v : // Returns an array of all defined variables along with their values. ``` - ```javascript return v.variable_name : // Returns the specific value of the indicated variable. ``` ## t: Access to the Wized element object Provides access to the Wized Element object that defines the element that is associated with the function. This parameter is only available for element settings and event actions. ```javascript return t.node.innerText; // Returns the innerText value of the element. ``` # Async Functions Async functions allow you to work with asynchronous operations like API requests, timeouts, and other promises using the `await` keyword. By enabling the async mode for a function, you can write cleaner, more readable code when dealing with asynchronous operations. ## Enabling Async Mode To make a function asynchronous: 1. Open the function configuration 2. Navigate to the **Function Code** section 3. Check the **Async?** checkbox below the code editor ![Async function](./images/function-async.png) Once enabled, your function automatically becomes async and you can use `await` within the function body. ## When to Use Async Functions Use async functions when you need to: - Wait for API requests to complete before processing the response - Perform multiple sequential asynchronous operations - Use `await` with promises - Call other async functions ## Async Functions and Return Values Async functions automatically wrap their return value in a Promise. When you call an async function, the caller receives a Promise that resolves to the returned value. ```javascript // This async function returns a Promise const result = await f.myAsyncFunction(); // The result is the actual value, not the Promise ``` ::: tip Learn more about async functions in the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). ::: # Creating a Reusable Function ### Steps to create a Reusable Function 1. Open the **Functions** panel from the left sidebar 2. Click the **+** button to create a new function ![Create function](./images/create-function.webp) 3. In the configuration panel, you can define: - **Function name** - A descriptive name for your function - **Folder** - Organize functions into folders (optional) ![Function settings](./images/function-settings.webp) - **Props** - Define parameters that can be passed to the function ![Function props](./images/function-props.webp) - **Function code** - Write the JavaScript code that will execute ![Function code](./images/function-code.webp) ## Defining the Function Name Give your function a clear, descriptive name that indicates its purpose. For example: - `validate_email` - `format_currency` - `format_date` - `get_relative_date` Function names should follow JavaScript naming conventions (camelCase or snake-case is recommended) ## Organizing with Folders Functions can be organized into folders to keep your project structured, especially when working with many functions. You can: - Create new folders from the Functions panel - Assign functions to existing folders - Move functions between folders ## Writing Function Code The function code editor provides a full JavaScript environment with: - Access to all Wized data store variables (`v`, `c`, `i`, `r`, `f`, etc.) - Access to function props via the `p` variable - Full JavaScript syntax support with async/await - Autocomplete and IntelliSense ### Example: Simple Function ```javascript // A function to format a price const formatted = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', }).format(p.amount); return formatted; ``` ## Best Practices - **Keep functions focused** - Each function should have a single, clear purpose - **Use descriptive names** - Make it obvious what the function does - **Document complex logic** - Add comments to explain non-obvious code - **Define appropriate props** - Make functions flexible by accepting the right parameters - **Handle errors** - Use try/catch blocks for operations that might fail - **Return values** - Always return meaningful values that can be used by the caller # Function Props Function props are parameters that enable you to pass dynamic values into reusable functions. By defining props, you can make a single function adaptable to many different scenarios, eliminating the need to write duplicate code. Props make functions truly reusable by allowing callers to customize their behavior with specific input values. ## Defining Props To define props for a function: 1. Open the function configuration 2. Navigate to the **Props** section 3. Click the **`+`** icon to add a new prop 4. Configure each prop with: - **Name** - The identifier used to access the prop value (e.g., `email`, `userId`, `amount`) - **Default value** - Optional default value if no value is provided by the caller - **Required** - Whether the prop must be provided when calling the function ![Function props](./images/function-props.webp) ### Example: Defining Function Props Consider a function named `sendEmail` that sends an email notification. Here, we define several props: - `recipientEmail` (required) - The email address to send to - `subject` (required) - The email subject line - `message` (required) - The email body content - `priority` - Optional, defaults to `'normal'` ```javascript // Inside the function, props are accessed via the 'p' variable const emailData = { to: p.recipientEmail, subject: p.subject, body: p.message, priority: p.priority || 'normal', }; // Send the email using a request const response = await r.sendEmailRequest.trigger({ data: emailData, }); return response; ``` ## Accessing Props in Function Code Props are always accessed through the `p` variable in your function code: ```javascript // Single prop access return p.userName; // Multiple props const fullName = `${p.firstName} ${p.lastName}`; // In conditionals if (p.isAdmin) { // Admin-specific logic } ``` ## Passing Props When Calling Functions When you select a reusable function in an event or workflow action, Wized automatically displays input fields for each defined prop. ### In Global Events or Element Events 1. Set the **Function Mode** to "Select function" 2. Choose your function from the **Function** dropdown 3. The **Function Props** section appears with fields for each prop 4. Enter values or use the function editor to pass dynamic values ![Selecting function](./images/selecting-reusable-function.webp) ### In Workflow Nodes Same as events - after selecting the function, configure each prop value in the automatically generated fields. ### In Other Functions You can call one reusable function from another. However, when doing this, you write the call inline rather than using the configurator interface: ```javascript // Calling another function from within a function // Note: This would require using the Wized JavaScript API const result = await Wized.functions.increaseCount({ delta: 5, }); return result; ``` # Intro to Reusable Functions Reusable functions are custom JavaScript functions that can be defined once and called from multiple places throughout your Wized project. They provide a powerful way to encapsulate logic, reduce code duplication, and make your project more maintainable by centralizing commonly used functionality. ## Key Benefits - **Code Reusability**: Write once, use everywhere - functions can be called from global events, element events, workflow nodes, and other functions - **Props Support**: Functions can accept props (parameters) to make them flexible and adaptable to different use cases - **Maintainability**: Update logic in one place and have it automatically apply everywhere the function is used - **Organization**: Keep your code organized by grouping related functionality into reusable functions - **Efficiency**: Reduce the amount of duplicate code across your project ## Where Can You Use Functions? Reusable functions can be invoked from: - **Global Events** - Run functions in response to page-level triggers - **Element Events** - Execute functions when users interact with elements - **Workflow Nodes** - Call functions as part of a workflow sequence - **Other Functions** - Build complex logic by composing multiple functions ## Function Modes When configuring actions in events or workflows, you have two options: 1. **Inline Function** - Write code directly in the action (traditional approach) 2. **Select Function** - Choose a pre-defined function and pass values to its props This flexibility allows you to use inline code for simple, one-off logic while leveraging reusable functions for shared functionality. # Using Reusable Functions Reusable functions can be called from multiple locations in your Wized project. This page explains how to invoke functions in different contexts. ## Function Mode Selection Wherever you can run custom JavaScript code (in events and workflows), you'll see a **Function Mode** option that lets you choose between: 1. **Inline function** - Write code directly in the action (default for most cases) 2. **Select function** - Choose a predefined function and pass values to its props ## Using Functions in Global Events Global events can trigger reusable functions in response to page-level events. ### Steps: 1. Navigate to **Global Events** in the left sidebar 2. Create or edit a global event 3. Add a **Run Function** action 4. Set **Function Mode** to "Select function" 5. Choose your function from the **Function** dropdown 6. Configure the function props with the values you want to pass ### Example: Create a global event that validates and processes a form submission: - **Trigger**: After request `r.submitContactForm` succeeds - **Action**: Run Function - **Function**: `processContactSubmission` - **Props**: ```javascript // formData prop return r.submitContactForm.data; // successMessage prop return 'Thank you for contacting us!'; ``` ## Using Functions in Element Events Element events can call functions when users interact with specific elements. ### Steps: 1. Select an element in your project 2. Open the **Element Events** panel 3. Add an event (e.g., click, submit, etc.) 4. Add a **Run Function** action 5. Set **Function Mode** to "Select function" 6. Select your function and configure props ### Example: Add a click event to a button that formats and displays user input: - **Element**: Button with attribute `wized="formatButton"` - **Event**: click - **Action**: Run Function - **Function**: `formatAndDisplay` - **Props**: inputValue: ```javascript return i.userInput.value; ``` formatType: ```javascript return 'currency'; ``` ## Using Functions in Workflow Nodes Workflows can call functions as part of a sequence of actions. ### Steps: 1. Open your workflow 2. Create or select an **Action Node** 3. Set the node type to **Run Function** 4. Set **Function Mode** to "Select function" 5. Choose your function from the dropdown 6. Configure the function props ### Example: Lets define a function with name `validate-user-create-data` with props: `email` and `password` and code: ```javascript if (p.password.length < 8) { return { valid: false, message: 'Password should have more than 8 characters!', }; } return { valid: true, }; ``` In a user registration workflow: - **Node**: Action - **Type**: Run Function - **Function**: `validate-user-create-data` - **Props**: ```javascript // email prop return p.email; // Using workflow prop // password prop return p.password; // Using workflow prop ``` ![Validate user create data](./images/node-select-reusable-function.webp) - You can then access function result in the next if else node ```javascript return w.Register_user.nodes.validate_data_node.result.valid; ``` or the message ```javascript return w.Register_user.nodes.validate_data_node.result.message; ``` ## When to Use Inline vs Reusable Functions ### Use Inline Functions When: - The logic is simple and specific to one place - The code is unlikely to be reused elsewhere - You want to quickly prototype without creating a separate function - The logic is tightly coupled to the specific event or workflow ### Use Reusable Functions When: - The same logic needs to be used in multiple places - The function performs a distinct, well-defined task - You want to maintain consistency across your project - The logic is complex enough to benefit from centralized maintenance - You want to improve code organization and readability ## Common Use Cases ### Form Validation Create reusable validation functions for email, phone numbers, passwords, etc., and call them from multiple form submissions. ### Data Formatting Build functions to format dates, currencies, addresses, or other data types consistently across your project. ### API Response Processing Centralize logic for processing API responses, extracting data, and handling errors. ### User Notifications Create functions that display messages or notifications in a consistent way throughout your application. ### State Management Build functions that update multiple related variables or perform complex state changes. ## Best Practices - **Name functions clearly** - Use descriptive names that indicate what the function does - **Keep functions focused** - Each function should do one thing well - **Return meaningful values** - Always return data that can be useful to the caller - **Handle errors gracefully** - Use try/catch blocks and return error indicators - **Document complex logic** - Add comments to help others (and future you) understand the code - **Test thoroughly** - Verify functions work correctly with different prop values - **Organize with folders** - Group related functions together for easy management # Available actions - **Perform a request:** Executes a specific request to an API. You can add an optional condition using the Function Editor to control when the request is executed. For example, you can chain multiple requests, executing one only if the previous one was successful. - **Set cookie:** Updates the value of an existing cookie or creates a new one. You can use the Function Editor to define the new value of the cookie and add optional conditions. - **Set variable:** Updates the value of an existing variable or creates a new one. You can use the Function Editor to define the new value of the variable and add optional conditions. - **Navigate to:** Redirects the user to another URL or route within your application. You can add an optional condition using the Function Editor to control when the redirection occurs. For example, you can redirect the user to a login page if they are not authenticated. - **Run function:** Executes a custom JavaScript code snippet. You can use this action to perform complex tasks or programmatically interact with elements on your page. For example: ## Use cases ### 1. Perform a request This action allows you to send a request to an external API in response to a global event. You can use it to fetch updated data, send information to a server, or perform any other operation that requires communicating with an external service. **Example:** - **Event:** Page Load Complete - **Action:** Perform a Request to get user profile data from an API. - **Configuration:** - **Request:** Select the API request you want to execute (e.g., getUserData). - **Condition (optional):** You can add a condition in the Function Editor to control when the request is executed. For example, only if the user is authenticated: ```javascript // Check if there is an authenticated user return c.loggedUser; ``` ### 2. Set cookie This action allows you to create a new cookie or update the value of an existing one. Cookies are useful for storing information in the user's browser, such as preferences, session data, or authentication tokens. **Example:** - **Event:** Request Completed (associated with a login request) - **Condition:** r.loginRequest.ok (True if the login was successful) - **Action:** Set Cookie to create a cookie named tokenUsuario with the value of the authentication token received from the API: ```javascript // Returns the authentication token from the login return r.loginRequest.data.token; ``` ### 3. Navigate to This action allows you to redirect the user to another page or URL within your application or to an external site. You can use it to create custom navigation flows or send the user to a specific page after completing an action. **Example:** - **Event:** Request Completed (associated with a user registration request) - **Condition:** r.registroUsuario.ok (True if the registration was successful) - **Action:** Navigate to redirect the user to the login page: ```javascript // Returns the URL of the login page return '/login'; ``` ### 4. Run function This action allows you to execute a custom JavaScript code snippet in response to a global event. It is useful for performing complex tasks, interacting with DOM elements, or implementing logic that cannot be achieved with predefined actions. **Example:** - **Event:** Page Load Start - **Action:** Run Function to initialize an external JavaScript library and configure it: ```javascript // Make sure to have imported the library in your Webflow project return initializeMyLibrary(); ``` ## Disabling actions To temporarily disable an action without deleting it, you can use the disable switch in the action's header. This feature allows you to pause specific functionalities and re-enable them later as needed. ![disable-actions](disable-functionality.png) # Global events **Global events** in Wized are system-wide event listeners that **react dynamically** to specified conditions, triggering predefined actions when those conditions are met. Unlike [element-based events](/elements/events), **Global events are not tied to a specific element or user interaction** they execute automatically whenever the defined condition evaluates as `true`. This allows you to create **reactive workflows**, where logic runs in the background based on application state, API responses, or custom triggers. --- ## How global events work Each **Global event** consists of two main components: 1. **Trigger** - Custom condition - Request finished - Attribute present - Page starts loading - Page finishes loading 2. **Conditional** - The validation rule that determines when the event is executed. - This condition is continuously evaluated in real time by Wized. 3. **Actions** - A set of tasks that will be executed **when the event is triggered**. - These actions can include executing requests, modifying variables, among others. --- ### **Example** Execute an API request when a user logs in **Trigger:** `Request finishes` **Condition:** The `ok` property of a login request becomes `true`. **Actions:** - Fetch user data from an API. - Store the user’s role in a variable. - Redirect to a dashboard page. --- ## Best Practices - **Use Global events for background automation** rather than user-triggered actions. - **Ensure conditions are specific** to prevent unintended executions. - **Leverage multiple actions** within a single event to streamline workflows. - **Test conditions manually** to verify they trigger as expected. # Event "Run On" property ## Overview Page event restrictions allow you to control exactly when and where your events execute using the `run-on` property. This powerful feature enables you to optimize performance by running events only on relevant pages and provides fine-grained control over event execution across your site. ![run on example](./run-on-example.png) ## Key Features - **Page-Specific Execution**: Run events only on selected pages or exclude specific pages - **CMS Collection Filtering**: Target events to run on specific CMS collection pages - **Path-Based Filtering**: Filter by URL path patterns (starts with, includes) - **Visual Indicators**: UI icons show which events have restrictions - **Performance Optimization**: Reduce unnecessary event execution ## Run On Options ### 1. All Pages (Default) Events run on every page of your site when no restriction is set. **Use Case**: Global functionality like analytics, authentication checks, or universal navigation updates ### 2. Selected Pages Run events only on specific pages you choose from a list. **Use Case**: Page-specific features like dashboard functionality, checkout processes, or specific form handlers ### 3. All Except Selected Pages Run events on all pages except those you specify. **Use Case**: Excluding events from certain pages like admin areas, login pages, or maintenance pages ### 4. Path Starting With Execute events only when the URL path starts with a specified string. **Use Case**: - All search-related pages (`/search`) - User profile sections (`/profile`) - Admin area (`/admin`) ### 5. Path Including Execute events when the URL path contains a specific string anywhere in it. **Use Case**: - Blog posts with specific keywords - Pages with certain identifiers - Dynamic routes with common patterns ### 6. Selected CMS Collections Run events only on pages within specified CMS collections. **Use Case**: - Blog post-specific interactions - Product page features - Team member profiles ### 7. Except CMS Collections Run events on all pages except those in specified CMS collections. **Use Case**: Disabling certain features on blog posts or excluding product pages from general events ## Viewing Event Restrictions To see which pages or collections an event is restricted to, click the run-on indicator icon in the event item. This will display a complete list of all selected pages or CMS collections where the event will execute. ![Run on list items](./run-on-list-popup.png) ## Filtering Events by Current Page To view only the events configured to run on the currently selected page, use the "Selected page events" filter in the events panel. ![Current Selected page events](./events-on-current-page.png) This filter helps you quickly identify which events are active on a specific page, making it easier to debug and manage page-specific functionality. # Event triggers Event triggers in Wized allow you to define **real-time event listeners** that execute specific actions when certain conditions are met. These triggers operate independently of user interaction and can be used to automate logic, update data dynamically, and manage application behavior efficiently. Each trigger can be accompanied by an **optional condition**, which determines whether the event should execute. If no condition is set, the event will always run when the trigger is activated. --- ## Available triggers ### **Custom condition** - Executes when a user-defined condition evaluates to `true`. - Conditions are created using the [function editor](/function-editor/) and can leverage: - Variables - Cookies - requests responses - Input values --- ### **Attribute Present** - Fires when an element with a specific [Wized attribute](/start-here/getting-started/wized-attribute) is detected on the current page. - Useful for triggering actions **based on dynamic elements** that load or appear conditionally. --- ### **Request Finished** - Executes **immediately after a request completes**, whether it succeeds or fails. You can set a conditional, so that this event is executed only when the validation is fulfilled and the request finishes. - Can be used to **handle API responses dynamically**, update UI components, or trigger subsequent requests. --- ### **Page Starts Loading** - Fires **as soon as the page starts rendering** in the browser. - Ideal for: - **Initializing variables** before any user interaction. - **Executing API requests early** to preload data. - **Displaying loading indicators** for better UX. --- ### **Page Finishes Loading** - triggers once **all page elements have fully loaded**. - Perfect for: - **Handling UI adjustments** that depend on the entire page being ready. - **Running animations** or interactive elements. - **Final validations** such as checking user authentication. --- ## `Page starts loading` Or `Page finishes loading` | Trigger | Best For | | ------------------------- | -------------------------------------------------------------------- | | **Page Starts Loading** | Initializing critical data, preloading APIs, showing loading states. | | **Page Finishes Loading** | Handling UI interactions, animations, final data validations. | Choosing the right trigger depends on **when** the action should take place for the best user experience. # Welcome to Wized documentation Welcome to the official **Wized documentation**! Here, you'll find everything you need to build powerful, dynamic web applications using Wized. Whether you're just starting or you're an experienced developer, this guide will help you unlock Wized’s full potential. ## Get Started with the community Wized is more than just a tool—it’s a growing ecosystem of builders, creators, and developers. Connect with the community, ask questions, and stay updated with the latest features and best practices. - 💬 **Join the community:** [Discord](https://discord.gg/nAxTsRYB) - 🎥 **Video tutorials & guides:** [YouTube Channel](https://www.youtube.com/@Wized) - 📩 **Support & help center:** [Submit a Ticket](https://www.wized.com/support) ## 🔥 Popular Resources If you're looking for specific guidance, here are some useful links to get you started: - 📖 **[Quick Start guide](/start-here/getting-started/)** – Learn the basics and set up your first project. - 🛠️ **[Integrations](/apps/)** – Connect Wized with external tools, APIs, and databases. - 🔄 **[API requests](/requests/)** – Learn how to work with APIs integrations. - ⚡ **[Wized API](/javascript-api/)** – Dive into Wized API. Ready to start building? **Let’s go!** # JavaScript API Wized offers a JavaScript API to extend your web apps with custom logic, providing access to the following features: - The project configuration. - The Data Store. - The Wized Elements. - Global events. - Request helpers. Most of these functionalities can be accessed right from inside the [Function Editor](../function-editor/index.md), but in some cases you might want to use the JavaScript API directly from your own code. ## Initialize If you are writing custom code within Wized's [Function Editor](../function-editor/index.md), you have immediate access to the Wized object: ```js async (c, e, f, i, n, r, v) => { console.log(Wized.version); }; ``` Hovever, if you are writing code outside of the Function Editor, you need to ensure that the Wized API is loaded before executing your code. The following wrapper will ensure that your code is executed only after the Wized API has been initialized: ```js window.Wized = window.Wized || []; window.Wized.push((Wized) => { // Your code goes here }); ``` ## The `Wized` object ### `Wized.version` - **Type:** `string` Returns the current version of the Wized Embed library. This is useful when debugging your app. ```js window.Wized = window.Wized || []; window.Wized.push((Wized) => { console.log(Wized.version); }); ``` ### `Wized.config` - **Type:** `WizedConfig` Returns the project configuration that was loaded by Wized. This is useful when debugging your app. ```js window.Wized = window.Wized || []; window.Wized.push((Wized) => { console.log(Wized.config); }); ``` ### `Wized.data` - **Type:** `DataStore` Contains your project's Data Store, also known as your app's state. ```typescript type DataStore = { c: Record; f: Record>>; i: Record>; v: Record; r: Record; n: { href: string; path: string; parameter: Record; }; }; type WizedRequestData = { id: string; number: number; data: unknown; // The response data headers: Record; // The response headers isRequesting: boolean; hasRequested: boolean; statusText: string | null; status: number | null; ok: boolean | null; duration: number; }; ``` #### Reading values from the Data Store You can read any value from the Data Store by simply accessing the `Wized.data` object properties: ```js window.Wized = window.Wized || []; window.Wized.push((Wized) => { console.log(Wized.data.v.my_variable); console.log(Wized.data.c.my_cookie); }); ``` ::: info Note If you're writing code inside the [Function Editor](../function-editor/index.md) you don't need to use the `Wized.data` object, simply use the provided argumets directly. ::: #### Updating values in the Data Store You can update any value in the Data Store by simply assigning a new value to the `Wized.data` object properties or mutating them: ```js window.Wized = window.Wized || []; window.Wized.push((Wized) => { // Normal assignments Wized.data.v.my_variable = 'New value'; Wized.data.n.parameter.id = 1234; // Array updates Wized.data.v.items.push('New item'); Wized.data.v.items.sort(); Wized.data.v.items = [...Wized.data.v.items, 'Newer item']; // Nested objects Wized.data.f.my_form = { name: 'John', email: 'john@doe.com', }; }); ``` ::: info Note If you're writing code inside the [Function Editor](../function-editor/index.md) you don't need to use the `Wized.data` object, simply use the provided argumets directly. ::: Updates to: - Variables (`v.my_variable`): will trigger any reactivity associated to them. This applies to any other field in the Data Store too. - Cookies (`c.my_cookie`): will set the new cookie value to the browser. To remove cookies, just set the value to `null`. - Parameters (`n.parameter.my_parameter`): will set the new parameter value to the current URL. To remove parameters, just set the value to `null`. - Inputs (`i.my_input`): will set the new input value to the input field. Each field expects the correct value type: - Text inputs: `string` - Number and range inputs: `number` - Checkboxes: `boolean` - Checkbox groups: `Array` - Radio groups: `string` - Select dropdowns: `string` - Multi-select dropdowns: `Array` - Forms (`f.my_form`): any field of a form can be updated using the field name. The expected value types are the same as Inputs (`i`). - Update a single field: `Wized.data.f.my_form.name = "John"` - Update multiple fields: `Wized.data.f.my_form = { name: 'John', email: 'john@doe.com' };` - Requests (`r.my_request`): although it’s possible to update requests state using the API, it’s not recommended as it can create conflicts with the native Actions & Requests. ### `Wized.reactivity.watch()` Watches one or more reactive Data Store values and invokes a callback function when the sources change. Example: ```js window.Wized = window.Wized || []; window.Wized.push((Wized) => { Wized.reactivity.watch( () => Wized.data.v.my_variable, (newValue, oldValue) => { console.log(`my_variable changed from ${oldValue} to ${newValue}`); } ); }); ``` Example with multiple values: ```js window.Wized = window.Wized || []; window.Wized.push((Wized) => { Wized.reactivity.watch( [() => Wized.data.v.my_variable, () => Wized.data.v.my_other_variable], ([newVar, newOtherVar], [oldVar, oldOtherVar]) => { console.log(`my_variable changed from ${oldVar} to ${newVar}`); console.log(`my_other_variable changed from ${oldOtherVar} to ${newOtherVar}`); } ); }); ``` This function is provided by Vue's [@vue/reactivity](https://www.npmjs.com/package/@vue/reactivity) package, [the full documentation can be found here](https://vuejs.org/api/reactivity-core.html#watch). ### `Wized.reactivity.effect()` Runs a function immediately while reactively tracking any Data Store values and re-runs it whenever those values are changed. Example: ```js window.Wized = window.Wized || []; window.Wized.push((Wized) => { Wized.reactivity.effect(() => { console.log(Wized.data.v.my_variable); }); }); ``` This function is provided by Vue's [@vue/reactivity](https://www.npmjs.com/package/@vue/reactivity) package, [the full documentation can be found here](https://vuejs.org/api/reactivity-core.html#watcheffect). ### `Wized.requests.execute()` - **Type:** `(identifier: string, props?: Record) => Promise` The function expects an identifier of the request that can be either the Request ID or the Request name. Optionally, you can pass `props` to provide additional data for the request execution. Triggers a request and returns a Promise with the [WizedRequestData](#wizeddata). Example: ```js window.Wized = window.Wized || []; window.Wized.push(async (Wized) => { const result = await Wized.requests.execute('request_name'); console.log(result); }); ``` Example with props: ```js window.Wized = window.Wized || []; window.Wized.push(async (Wized) => { const props = { id: 123, name: 'John Doe' }; const result = await Wized.requests.execute('request_name', props); console.log(result); }); ``` > **_NOTE:_** > > - Only the properties explicitly defined in the request will be processed. For more details, refer to the [Request props documentation](/requests/request-props). > - The result of the operation will be stored in the Data Store under the specified key. Learn more in the [Data Store key documentation](/requests/request-props#data-store-key). ### `Wized.requests.waitFor()` - **Type (single):** `(requestId: string | number, props?: Record) => Promise` - **Type (multiple):** `(requests: Array<{ requestId: string | number, props?: Record }>) => Promise` Returns a Promise that resolves when the request (or all requests) have finished. As opposite to [Wized.requests.execute](#wizedrequestsexecute), this method does not execute the requests, only awaits for them to finish. The function can be called in two ways: 1. **Single request** – pass an identifier (Request ID or Request name) and optional `props`. 2. **Multiple requests** – pass an array of `{ requestId, props? }` objects. All requests are awaited concurrently. Example (single request): ```js window.Wized = window.Wized || []; window.Wized.push(async (Wized) => { const result = await Wized.requests.waitFor('request_name'); // This will not trigger a request execution console.log(result); }); ``` Example with props (single request): ```js window.Wized = window.Wized || []; window.Wized.push(async (Wized) => { const props = { userId: 42, includeDetails: true }; const result = await Wized.requests.waitFor('request_name', props); console.log(result); }); ``` Example with multiple requests: ```js window.Wized = window.Wized || []; window.Wized.push(async (Wized) => { const [userResult, postsResult] = await Wized.requests.waitFor([ { requestId: 'get_user', props: { userId: 42 } }, { requestId: 'get_posts' }, ]); }); ``` > **_NOTE:_** > > - Only the properties explicitly defined in the request will be processed. For more details, refer to the [Request props documentation](/requests/request-props). > - The result of the operation will be stored in the Data Store under the specified key. Learn more in the [Data Store key documentation](/requests/request-props#data-store-key). ### `Wized.requests.getClient()` - **Type:** `(identifier: string) => Promise` ::: warning Warning This is an advanced feature and should only be used if you know what you are doing. ::: The function expects an identifier that can be either a Request ID, a Request name, an App ID or an App name. Returns the client used to execute the request. This is useful when you need to interact with the SDK client directly via custom code. Currently only [Supabase](https://supabase.com/docs/reference/javascript/introduction) and [Firebase](https://firebase.google.com/docs/reference/js) clients are supported, and the returned object will be one of the following: ```typescript type WizedClientData = | { type: 'supabase'; version: string; // The version of the SDK, i.e. "2.39.7" client: SupabaseClient; // https://supabase.com/docs/reference/javascript/initializing } | { type: 'firebase'; version: string; // The version of the SDK, i.e. "10.8.1" app: FirebaseApp; // https://firebase.google.com/docs/reference/js/app.firebaseapp.md#firebaseapp_interface} auth: Auth; // https://firebase.google.com/docs/reference/js/auth.auth.md#auth_interface firestore: Firestore; // https://firebase.google.com/docs/reference/js/firestore_.firestore.md#firestore_class storage: FirebaseStorage; // https://firebase.google.com/docs/reference/js/storage.firebasestorage.md#firebasestorage_interface modules: { // Modules to interact with the client, dynamically imported from the `firebase` npm package app: Promise; auth: Promise; firestore: Promise; storage: Promise; }; }; ``` You can use this method to interact with the client like this: ```js window.Wized = window.Wized || []; window.Wized.push(async (Wized) => { const { version, client } = await Wized.requests.getClient('my_supabase_app'); // You should check the client version before using it, as the API might change between versions if (version.startsWith('2')) { const user = await client.auth.getUser(); } }); ``` Notice how in the example above we check the client version before using it. This is an important step because Wized may update the client version in the future, and the API might change between versions. ::: warning Important Wized reserves the right to update client versions without prior notice, it's the developer's responsibility to keep their code prepared for newer versions of the SDKs. ::: To interact with the Firestore client, you may want to access the modules included in [the firebase npm package](https://www.npmjs.com/package/firebase). You can do this via the `modules` object, which the `firebase/app`, `firebase/auth`, `firebase/firestore`, and `firebase/storage` modules. Each accessor is a promise that returns the npm module when resolved: ```js window.Wized = window.Wized || []; window.Wized.push(async (Wized) => { const { version, firestore, modules } = await Wized.requests.getClient('my_firebase_app'); // Check for the client version if (version !== '10') return; // Retrieve the Firestore module const { doc, getDoc } = await modules.firestore; // Use the Firestore methods const docRef = doc(firestore, 'todos', '1234'); const docSnap = await getDoc(docRef); const todo = docSnap.data(); }); ``` ### `Wized.elements.get()` - **Type:** `(name: string) => WizedElement` Returns a [WizedElement](#the-wizedelement-object) instance by its name. If there are multiple elements with the same name, it will just return the first one. ```js window.Wized = window.Wized || []; window.Wized.push((Wized) => { const element = Wized.elements.get('element_name'); }); ``` ### `Wized.elements.getAll()` - **Type:** `(name?: string) => WizedElement[]` Returns an array of all the app's [WizedElement](#the-wizedelement-object) instances. If a name is provided, it will return all the elements with that name. ```js window.Wized = window.Wized || []; window.Wized.push((Wized) => { const elements = Wized.elements.getAll(); // Returns all the elements const elementsWithName = Wized.elements.getAll('element_name'); // Returns all the elements with the name "element_name" }); ``` ### `Wized.elements.update()` - **Type:** `() => WizedElement[]` Forces Wized to rescan the current page to find any newly added elements. You can use this method if you programatically add DOM nodes to the page after Wized has initialized. Returns an array of all the new [WizedElement](#the-wizedelement-object) instances, if any. ```js window.Wized = window.Wized || []; window.Wized.push((Wized) => { // Example: clone an element const element = Wized.elements.get('element_name'); const clone = element.node.cloneNode(true); document.body.appendChild(clone); // Rescan to initialize the new element const newElements = Wized.elements.update(); console.log(newElements); }); ``` ### `Wized.on()` - **Type:** `(eventName: string, listener: (event: Event) => void) => void` Listens for global events of the app. The following events are available: #### `Wized.on('requeststart', listener)` This event is fired when a request is triggered. The listener callback receives an object with the request name and ID. ```js window.Wized = window.Wized || []; window.Wized.push((Wized) => { Wized.on('requeststart', (result) => { console.log(`Request ${result.name} was triggered`); }); }); ``` #### `Wized.on('requestend', listener)` This event is fired when a request execution finalizes. The listener callback receives a [WizedRequestData](#wizeddata) object. ```js window.Wized = window.Wized || []; window.Wized.push((Wized) => { Wized.on('requestend', (result) => { console.log(`Request ${result.name} finalized executing after ${result.duration}ms`); }); }); ``` ## The `WizedElement` object For each element that is defined with a `wized = "element_name"` HTML attribute in Webflow, Wized creates a `WizedElement` instance that is used for several purposes: - Store element-specific state. - Store the element's actions and cleanups. - Store the element's node or anchor (when not rendered). - Store the element's clones when applying a [Render List](../elements/configuration-types/single-use/render-list) action. - Store the element's child tree. ### `WizedElement.name` - **Type:** `string` Returns the element name. ### `WizedElement.rendered` - **Type:** `boolean` Returns `true` if the element is currently rendered on the page, `false` otherwise. The rendered state is controlled via the [Set Visibility](../elements/configuration-types/single-use/set-visibility) action. ### `WizedElement.node` - **Type:** [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) Returns the element's DOM node. This is useful when you need to interact with it directly instead of using Wized's actions. The node is only present in the DOM when the element is [rendered](#wizedelementrendered). ### `WizedElement.anchor` - **Type:** [Comment](https://developer.mozilla.org/en-US/docs/Web/API/Comment) The element's anchor is a placeholder comment that is put in place when the element is not rendered. This is useful when you need to interact with it directly instead of using Wized's actions. The anchor is only present in the DOM when the element is not [rendered](#wizedelementrendered). ### `WizedElement.parent` - **Type:** `WizedElement | undefined` Returns the element's parent [WizedElement](#the-wizedelement-object) instance, if any. ### `WizedElement.children` - **Type:** `WizedElement[]` Returns an array of the element's child [WizedElement](#the-wizedelement-object) instances. ### `WizedElement.clones` - **Type:** `WizedElement[]` Returns an array of the element's clones. Clones are created when applying a [Render List](../elements/configuration-types/single-use/render-list) action. ### `WizedElement.data` - **Type:** `Record` A reactive object used to store element-specific data. This object is shared across all the element's tree (parents and children). ### `WizedElement.on()` - **Type:** `(eventName: string, listener: (event: Event) => void) => void` Adds a lifecycle event listener to the element. The listener will be removed when the element is destroyed. ```js window.Wized = window.Wized || []; window.Wized.push((Wized) => { const element = Wized.elements.get('element_name'); element.on('attribute', (event) => { console.log(`Attribute ${event.key} was updated to ${event.value}`); }); }); ``` The following events are available: #### `WizedElement.on("attribute", listener)` This event is fired when the element's attributes are updated via a [Set HTML Attribute](../elements/configuration-types/multi-use/set-html-attribute.md) action. The listener callback receives the following event object: - `event.key`: The HTML Attribute key. - `event.value`: The new value. #### `WizedElement.on('class', listener)` This event is fired when the element's CSS classes are updated via a [Set Class](../elements/configuration-types/multi-use/set-class) action. The listener callback receives the following event object: - `event.className`: The CSS class name. - `event.valid`: Defines if the class was added or removed. #### `WizedElement.on('list', listener)` This event is fired when the element's clones are updated via a [Render List](../elements/configuration-types/single-use/render-list) action. The listener callback receives the following event object: - `event.addedClones`: The added element clones. - `event.updatedClones`: The clones that were kept in the DOM. - `event.removedClones`: The clones that were destroyed. #### `WizedElement.on('parameter', listener)` This event is fired when the element's URL parameters are updated via a [Set URL Parameter](/elements/configuration-types/multi-use/url-parameter) action. The listener callback receives the following event object: - `event.name`: The URL parameter name. - `event.value`: The new value. #### `WizedElement.on('style', listener)` This event is fired when the element's inline styles are updated via a [Set Style](../elements/configuration-types/multi-use/set-style.md) action. The listener callback receives the following event object: - `event.style`: The style name. - `event.value`: The new value. #### `WizedElement.on('text', listener)` This event is fired when the element's text is updated via a [Set Text](../elements/configuration-types/single-use/set-text.md) action. The listener callback receives the following event object: - `event.type`: The type of update that was made (text, html or markdown). - `event.value`: The new value. #### `WizedElement.on('value', listener)` This event is fired when the element's input value is updated via a [Set Input Value](../elements/configuration-types/single-use/set-input-value) action. The listener callback receives the following event object: - `event.value`: The new value. #### `WizedElement.on('visibility', listener)` This event is fired when the element's render state is updated via a [Set Visibility](../elements/configuration-types/single-use/set-visibility) action. The listener callback receives the following event object: - `event.displayed`: Defines if the element was added or removed from the DOM. # Adding Wized Attributes in Custom Sites Wized attributes are essential for identifying and configuring elements on your custom website. These custom HTML attributes tell Wized which elements should be managed by the configurator. ## Understanding Wized Attributes Wized uses custom HTML attributes to identify elements that should be managed by the configurator. The main attributes are: | Attribute | Purpose | | -------------- | ----------------------------------------------- | | `wized` | Main attribute to identify interactive elements | | `wized-cloak` | Prevents content flash during page load | | `wized-loader` | Identifies loader elements | ## Adding Attributes in Your HTML ### Method 1: Direct HTML Editing Add Wized attributes directly to your HTML elements: ```html

Content here

Form content

``` ### Method 2: Using JavaScript If you need to add attributes dynamically: ```javascript const element = document.getElementById('my-element'); element.setAttribute('wized', 'your-element-name'); ``` ### Method 3: Using a Build Tool If your custom site uses a build tool (React, Vue, Svelte, etc.): ```jsx // React example

Content here

// Vue example

Content here

``` ::: tip Choose the method that best fits your site's architecture. For static HTML sites, direct HTML editing is recommended. For dynamic sites, use JavaScript or your framework's binding syntax. ::: ## Best Practices 1. **Use descriptive names** - Choose clear, unique names for your Wized attributes that describe the element's purpose 2. **Keep it organized** - Use a consistent naming convention (e.g., `page-section-element`) 3. **Document your elements** - Keep a list of all Wized-enabled elements and their purposes 4. **Test thoroughly** - After adding attributes, verify they appear correctly in the Wized configurator ## Learn More To learn more about attributes, check our [Wized Attribute documentation](/start-here/getting-started/wized-attribute). # Collections and Dynamic Pages When working with custom sites that have CMS collections or dynamic pages with similar templates, you can optimize Wized's configurator functionality by creating a `manifest.json` file. This helps Wized understand your site structure and detect attributes more efficiently. ## Why Use a Manifest File? ### 1. Configurator optimization If your custom site has multiple pages that share the same template and attributes (like blog posts, product pages, team member profiles, etc.), Wized needs to detect the attributes only once per collection instead of scanning every individual page. This significantly improves performance and reduces configuration time. ### 2. Page Events Functionality This improves page events functionality, allowing you to set up events to run within a specific collection instead of globally across all pages. ## Creating the Manifest File Create a file named `manifest.json` in the root directory of your website with the following structure: ```json { "detailPages": { "team": "/detail_team", "blog": "/detail_blog", "products": "/product", "case-studies": "/case-study" } } ``` ### Structure Explained - **`detailPages`** - An object containing your CMS collections or dynamic page types - **Key** (e.g., `"team"`, `"blog"`) - A unique identifier for your collection - **Value** (e.g., `"/detail_team"`) - The URL path pattern or template page for that collection ## How It Works When Wized fetches pages from your sitemap, the `manifest.json` file tells the configurator: 1. Which pages belong to the same collection 2. That these pages share the same template and attributes 3. To detect attributes only once per collection instead of for every page For example, if you have 100 blog posts all using the `/detail_blog` template, Wized will: - Detect the attributes from one blog page - Apply the same attribute configuration to all other blog pages - Save time and improve configurator performance ## Example Use Cases ### Blog with Multiple Posts ```json { "detailPages": { "blog": "/blog-post" } } ``` ### E-commerce Site with Products and Categories ```json { "detailPages": { "products": "/product", "categories": "/category" } } ``` ### Multi-Collection Site ```json { "detailPages": { "blog": "/blog", "team": "/team-member", "portfolio": "/project", "services": "/service" } } ``` ## Best Practices 1. **Place at root** - Ensure `manifest.json` is in your website's root directory (e.g., `https://yoursite.com/manifest.json`) 2. **Match URL patterns** - The path values should match the actual URL structure of your dynamic pages 3. **Keep it updated** - Update the manifest when you add new collections or change URL structures 4. **Test the configuration** - After adding the manifest, verify in the Wized configurator that your collections are detected correctly 5. **Use descriptive keys** - Choose clear, meaningful names for your collection identifiers # Custom Sitemap URL for Custom Sites When using Wized with your custom site, you may need to configure the sitemap URL to help Wized understand your site's page structure and discover all available pages. ## Setting Up Your Sitemap Wized uses your site's XML sitemap to map out your pages. You can configure this in your project settings. ![Custom Sitemap](./images/custom-sitemap.webp) ## Common Sitemap Locations Here are common sitemap URL patterns for different setups: | Site Type | Typical Sitemap URL | | ------------------ | -------------------------------------- | | Static HTML site | `/sitemap.xml` | | Next.js | `/sitemap.xml` | | Nuxt | `/sitemap.xml` | | Custom Node.js app | `/sitemap.xml` (depends on your setup) | If your sitemap is not at the standard `/sitemap.xml` location, you'll need to provide the correct path in your Wized project settings. ## Creating a Sitemap If your custom site doesn't have a sitemap, you can: 1. **Generate one automatically** - Use a sitemap generator service 2. **Create one manually** - Write an XML sitemap file with your site's pages 3. **Generate programmatically** - Use a library or middleware in your application to generate a dynamic sitemap For example, a basic sitemap structure looks like: ```xml https://yoursite.com/ 2024-01-29 https://yoursite.com/about 2024-01-29 https://yoursite.com/contact 2024-01-29 ``` Once your sitemap is in place, update the sitemap URL in your Wized project settings to match your site's configuration. # Introduction ## What is Wized? > **Note for Wized Users**: If you're already familiar with Wized, this guide focuses specifically on using Wized with custom-built websites. The core concepts remain the same with very small differences Wized is a powerful visual development platform that allows you to add dynamic functionality to your custom websites without writing complex code. It bridges the gap between static website designs and fully functional web applications by providing a visual interface to connect your frontend elements to backend services, APIs, and databases. With Wized, you can extend your custom-built sites with powerful backend integrations and interactive features. Instead of building everything from scratch, you can create sophisticated solutions tailored to your exact needs. Wized handles the logic, data fetching, and interactivity while you maintain full control over your custom site design and architecture. ## What Can You Build with Wized + Custom Sites? The combination of custom sites and Wized is incredibly powerful. You can transform your custom website into a fully dynamic web application. Here are some examples of what you can create: **User Dashboards & Personalization** - Build custom user dashboards that display personalized data from external services like Airtable, Supabase, or Firebase. Create user-only areas with dynamic content that updates based on user permissions, subscription status, or activity history. **Advanced E-commerce Features** - Add custom product configurators, real-time inventory displays from external systems, dynamic pricing calculators, or integrate with third-party fulfillment and payment processors. Build custom checkout flows that connect to any backend system. **Dynamic Directories & Listings** - Create searchable directories with advanced filtering, real-time search, and data pulled from external databases. Perfect for job boards, real estate listings, business directories, or any content that needs powerful search and filter capabilities. **Forms & Multi-Step Workflows** - Build sophisticated multi-step forms with conditional logic, real-time validation, and data that saves to any backend service. Create booking systems, application processes, or onboarding flows that integrate with your existing tools and databases. **Custom Integrations & Automation** - Connect your site to virtually any API or service. Display live data from CRMs, project management tools, analytics platforms, or any service with an API. Automate workflows between your website and external services without relying on third-party middleware. # Integration ## Prerequisites Before you begin, make sure you have: - A live website - A Wized account - Access to your website's HTML files or hosting control panel to add custom code ## Creating a Wized Project From the Wized dashboard, click **New Project** in the top right corner. 1. Paste the domain of your custom site. ![Creating new project](./images/create-new-project.webp) 2. The name and platform will be automatically detected. You can change the name if needed. If needed, select **Other** as the platform. 3. Copy the generated code at the bottom. This will be the Wized integration script you need to add to your website. This step is optional for testing and can be done later. ## Adding Wized to Your Custom Site You have two options for integrating Wized into your custom site: ### Option 1: Add to Global Website Head (Recommended) This ensures Wized is available across all pages of your website without needing to add the script to each page individually. For website-wide Wized functionality, add the script to the `` section of your site's main HTML file or master template: 1. Open your website's main HTML file or template. 2. Locate the `` section. 3. Paste the Wized script before the closing `` tag. 4. Save your changes and deploy. This makes Wized available across all pages of your website. ### Option 2: Add to Specific Pages For page-specific Wized functionality, add the script only to the pages where you need it: 1. Open the HTML file for the specific page. 2. Locate the `` section (or just before the closing `` tag). 3. Paste the Wized script. 4. Save your changes and deploy. This approach is useful if you only want Wized functionality on certain pages of your site. ## Testing Your Integration After adding the Wized script, visit your website and open the browser console (F12 or right-click → Inspect). You should see Wized initialize without any errors. You can now start building your dynamic functionality using Wized. # Wized Cloak attribute When loading dynamic data, it's essential to hide static content or display a loading state until Wized finishes loading and initialization. ## Using Wized Cloak Add the `wized-cloak` attribute to elements you want to hide during the loading phase. Then, add CSS to hide these elements initially. Wized will automatically show them once fully loaded: # Adding Wized Attributes in WordPress Wized attributes are essential for identifying and configuring elements on your WordPress website. Unlike Webflow where you can add custom attributes directly in the designer, WordPress requires different approaches depending on your setup. ## Understanding Wized Attributes Wized uses custom HTML attributes to identify elements that should be managed by the configurator. The main attributes are: | Attribute | Purpose | | -------------- | ----------------------------------------------- | | `wized` | Main attribute to identify interactive elements | | `wized-cloak` | Prevents content flash during page load | | `wized-loader` | Identifies loader elements | ## Adding Attributes in Page Builders ### Elementor 1. Select the element you want to add attributes to 2. Go to **Advanced** tab 3. Scroll to **Attributes** section 4. Add your Wized attribute: ``` wized|your-element-name ``` ![Wized attribute](./images/wized-attribute.webp) ::: tip In Elementor, attributes are added in `key|value` format separated by a pipe character. ::: ## Best Practices 1. **Use descriptive names** - Choose clear, unique names for your Wized attributes that describe the element's purpose 2. **Avoid conflicts** - Ensure attribute values are unique across your entire site 3. **Keep it organized** - Use a consistent naming convention (e.g., `page-section-element`) 4. **Document your elements** - Keep a list of all Wized-enabled elements and their purposes 5. **Test thoroughly** - After adding attributes, verify they appear correctly in the Wized configurator ## Learn More To learn more about attributes, check our [Wized Attribute documentation](/start-here/getting-started/wized-attribute). # Custom Sitemap URL for WordPress When using Wized with WordPress, you may need to change the default sitemap URL to help Wized understand your site's page structure. By default, the sitemap URL is set to `wp_sitemap.xml`. You can configure this in your project settings. ![Custom Sitemap](./images/custom-sitemap.webp) # Building a URL shortener with Wordpress, Wized and Xano This guide walks you through building a dynamic WordPress website that combines the design flexibility of WordPress, the business logic capabilities of Wized, and the backend power of Xano. ## Architecture Overview The Wized + WordPress + Xano setup creates a three-tier architecture: ``` WordPress (Design & Content Layer) ↓ Wized (Logic & Interaction Layer) ↓ Xano (Backend & Database Layer) ``` **WordPress** handles your site design, static content, and core website structure. It's what your visitors see and navigate. **Wized** acts as the bridge between your WordPress frontend and your backend services. It manages all the dynamic functionality, data binding, event handling, and user interactions without requiring complex code. **Xano** (or similar backend services) provides your database, business logic, authentication, and API endpoints that power your dynamic features. ## Key Concepts ### 1. Pages & Routes Your WordPress site contains multiple pages that need dynamic functionality. Each page becomes an interactive application powered by Wized. **Common page types:** - **Dashboard Pages** - Display user-specific data (user profile, activity history, preferences) - **List/Directory Pages** - Show filtered and searchable data from your backend (products, users, content) - **Form Pages** - Collect user input and send data to Xano (registration, contact forms, applications) - **Detail Pages** - Display individual item information (product details, user profiles, post details) - **Admin Pages** - CRUD operations for managing content (create, read, update, delete) ### 2. Dynamic Elements Every interactive element on your WordPress page that needs to change based on data or user actions must be identified with Wized attributes. **Element types:** - **Text elements** - Display dynamic content (user name, status, counters) - **Image elements** - Show dynamic images (profile pictures, thumbnails, product images) - **Input fields** - Collect user data (search queries, form inputs, filters) - **Buttons** - Trigger actions (submit forms, delete items, navigate to detail pages) - **Containers** - Repeat or show/hide sections based on data or conditions - **Lists/Tables** - Display collections of data with dynamic rows ### 3. Wized Attributes Wized attributes are HTML identifiers that link WordPress elements to Wized's logic system. These attributes tell Wized which elements to manage and how. **Main attributes:** - `wized="element-name"` - Main identifier for interactive elements - `wized-cloak` - Prevents content flash while data loads - `wized-loader` - Shows/hides loading indicators ## Step-by-Step Setup - [Setting up WordPress](./wordpress.md) - [Setting up Xano](./xano.md) - [Connecting with Wized](./wized.md) - [Redirect Service](./redirect-service.md) # Redirect Service To handle URL redirection for the link shortener, we built a lightweight service using [Hono.js](https://hono.dev/). The service provides two endpoints: 1. **Redirect endpoint** — Redirects users to the destination URL while tracking click analytics 2. **Site info endpoint** — Fetches and returns the title of a given URL ## Helper Functions These utility functions extract visitor information from request headers for analytics tracking: ```ts const getIpAddress = (c: Context) => { return ( c.req.header('x-forwarded-for') || c.req.header('cf-connecting-ip') || c.req.header('true-client-ip') || c.req.header('x-real-ip') || c.req.header('x-client-ip') || c.req.header('x-forwarded') || c.req.header('forwarded-for') || c.req.header('forwarded') ); }; const getBrowser = (c: Context) => { return c.req.header('user-agent'); }; const getLocation = (c: Context) => { return c.req.header('cf-ipcountry'); }; ``` ## Endpoints ### Get Site Title Fetches the `` tag from any URL. Useful for displaying link previews. **Request:** `GET /api/site-info/title?url={url}` ```ts app.get('/api/site-info/title', async (c) => { const url = c.req.query('url'); if (!url) { return c.json({ success: false, error: "Missing 'url' query parameter" }, 400); } try { const response = await fetch(url); const html = await response.text(); const titleMatch = html.match(/<title[^>]*>([^<]+)<\/title>/i); const title = titleMatch ? titleMatch[1].trim() : null; if (!title) { return c.json({ success: false, error: 'No title found' }, 404); } return c.json({ success: true, title }); } catch (error) { return c.json({ success: false, error: 'Failed to fetch the URL' }, 500); } }); ``` ### Redirect & Track Click Handles the short link redirect. When a user visits a short URL, this endpoint: 1. Sends click data (IP, browser, location) to the backend for analytics 2. Redirects the user to the destination URL **Request:** `GET /:identifier` ```ts app.get('/:identifier', async (c) => { const { identifier } = c.req.param(); const response = await fetch('<XANO_BASE_URL_HERE>/track_click', { method: 'POST', headers: { 'content-type': 'application/json', }, body: JSON.stringify({ identifier, ip: getIpAddress(c), browser: getBrowser(c), location: getLocation(c), }), }); const data: any = await response.json(); if (data.redirect_url) { return c.redirect(data.redirect_url); } return c.json({ message: 'Link does not exist!' }, 404); }); ``` ## Deployment This service is designed to be deployed on [Cloudflare Workers](https://workers.cloudflare.com/), which provides: - Global edge distribution for low-latency redirects - Access to Cloudflare headers like `cf-connecting-ip` and `cf-ipcountry` - Serverless scaling with minimal cold starts   # Connecting Everything with Wized This guide walks you through connecting your WordPress frontend with the Xano backend using Wized. We'll cover Apps, Requests, Variables, Elements, and Workflows. ## Step 1: Create Apps Apps in Wized represent your API connections. For this URL shortener, we need two Xano apps: | App Name | Base URL | Purpose | | -------------- | --------------------------------------------------------------------- | ------------------------- | | Xano Auth | `Xano base url for auth endpoints` | User authentication | | Xano Short Url | `Xano base url for short url endpoints` | URL shortening operations | | Hono helper | `We use this to fetch the title of the Website before saving to Xano` | Fetch title | ![Wized Apps](../images/wized-apps.webp) ::: tip Learn More Check out the [Apps documentation](/apps/creating-apps) to learn how to create and configure Apps in Wized. ::: ## Step 2: Set Up Variables Variables store data that persists across your application. Create the following variables: User management variables: | Variable Name | Storage Type | Initial Value | Purpose | | ------------- | --------------- | ------------- | ------------------------------------ | | `token` | Session Storage | `''` | Stores the authentication JWT token | | `user_data` | Session Storage | `null` | Stores the authenticated user's data | Links management variables: | Variable Name | Storage Type | Initial Value | Purpose | | --------------- | ------------- | ------------- | --------------------------------- | | `user_links` | Local Storage | `[]` | Stores the user's shortened URLs | | `links_loading` | None | `true` | Stores the loading state of links | Index variables | Variable Name | Storage Type | Initial Value | Purpose | | --------------------------- | ------------ | ------------- | ------------------------------------------------------------- | | `urls_index` | None | `0` | Helper to render the list of urls, and access a specific item | | `analytics_countries_index` | None | `0` | Helper to render country analytics | | `analytics_devices_index` | None | `0` | Helper to render device analytics | Constant variables | Variable Name | Storage Type | Initial Value | Purpose | | ------------- | ------------ | ------------------------------- | ---------------------------------------- | | `ORIGIN_URL` | None | `https://short-url.wizedwp.com` | Save the Origin of the url shortener app | UI State management | Variable Name | Storage Type | Initial Value | Purpose | | --------------------------- | ------------ | ------------- | -------------------------------------------------------- | | `show_details_section_open` | None | `false` | state of the analytics details section, opened or closed | ![Variables Setup](../images/variables-setup.webp) ::: tip Learn More Check out the [Variables documentation](/data-store/variables) to learn how to create and configure Variables in Wized. ::: ## Step 3: Create Reusable Helper functions Reusable helper functions in Wized allow you to define custom JavaScript logic that can be called from any expression throughout your project. Example: For our URL shortener, we'll create a function called `get_random_string` that generates random alphanumeric strings for short codes. | Function Name | Parameters | Purpose | | ------------------- | ---------- | --------------------------------------- | | `get_random_string` | `n` | Generates a random string of length `n` | ```javascript // get_random_string function return Math.random().toString(36).slice(2, p.n); ``` This function is called when creating new short URLs: `Wized.functions.get_random_string({ n: 10 })` generates a unique 10-character code for each shortened link. Below are all functions used in this demo: | Function Name | Purpose | | ---------------------------- | ----------------------------------------------------------- | | `toggle_section` | Shows or hides a UI section (e.g., analytics details panel) | | `show_success_message` | Displays a success notification to the user | | `get_random_string` | Generates a random alphanumeric string of specified length | | `get_link_analytics_summary` | Returns aggregated analytics data for a shortened link | | `get_device_type_from_ua` | Parses the user agent string to determine device type | | `get_country_name` | Converts a country code to its full country name | | `get_country_flag` | Returns the flag emoji for a given country code | | `format_date` | Formats a date value into a human-readable string | | `enable_form` | Enables form inputs (e.g., after successful submission) | | `disable_form` | Disables form inputs (e.g., while a request is in progress) | ![Wized functions](../images/wized-functions.webp) ::: tip Learn More Check out the [Functions documentation](/functions/) to learn how to create and use reusable functions in Wized. ::: ## Step 4: Create Wized Requests Requests in Wized are how you communicate with external APIs. Each request defines an endpoint, method, headers, and body parameters. They can be executed from workflows or triggered by element interactions, and their responses can be stored in variables for use throughout your application. For our URL shortener app we need these requests ![Url Shortener Wized requests](../images/wized-requests.webp) ### Authentication Requests #### Sign Up Request Creates a new user account. | Property | Value | | -------- | ------------------- | | App | Xano Auth | | Props | `email`, `password` | | Method | POST | | Endpoint | `/auth/signup` | | Body | `email`, `password` | Values for body: ``` email = 'return p.email' password = 'return p.password' ``` #### Sign In Request Authenticates an existing user and returns a token. | Property | Value | | -------- | ------------------- | | App | Xano Auth | | Props | `email`, `password` | | Method | POST | | Endpoint | `/auth/login` | | Body | `email`, `password` | Values for body: ``` email = 'return p.email' password = 'return p.password' ``` #### Load User Data Request Fetches the current user's data using the stored token. | Property | Value | | ------------- | --------------------------- | | App | Xano Auth | | Method | GET | | Endpoint | `/auth/me` | | Authorization | Bearer Token from `v.token` | ### URL Management Requests #### Create Short URL Request Creates a new shortened URL. | Property | Value | | ------------- | ---------------------------- | | App | Xano Short Url | | Props | `url`, `title` | | Method | POST | | Endpoint | `/short_link` | | Authorization | Bearer Token from `v.token` | | Body | `url`, `title`, `short_code` | Values for the body: ``` email = 'return p.email' password = 'return p.password' short_code = 'return Wized.functions.get_random_string({ n:10 })' ``` #### Load User URLs Request Fetches all shortened URLs for the authenticated user. | Property | Value | | ------------- | --------------------------- | | App | Xano Short Url | | Method | GET | | Endpoint | `/short_link` | | Authorization | Bearer Token from `v.token` | #### Delete URL Request Deletes a shortened URL by ID. | Property | Value | | ------------- | --------------------------- | | App | Xano Short Url | | Method | DELETE | | Endpoint | `/short_link/${p.id}` | | Authorization | Bearer Token from `v.token` | | Props | `id` (URL ID to delete) | ## Step 5: Create Wized Workflows Workflows orchestrate multiple actions in sequence. Here are the key workflows: ### Sign In Workflow Handles user login and redirects to the dashboard. Name: `sign_in_workflow` Props: `email` and `password` ``` 1. Execute Request: sign_in (with form email & password) 2. Condition: Check if request succeeded ├─ Success: │ ├─ Set Variable: token = response.authToken │ ├─ Run Workflow: load_user_workflow │ └─ Navigate: /dashboard/ └─ Error: └─ Show error message (alert) ``` ![Sign In Workflow](../images/sign-in-workflow.webp) ### Sign Up Workflow Handles user registration and redirects to the dashboard. Name: `sign_up_workflow` Props: `email` and `password` ``` 1. Execute Request: sign_up (with form email & password) 2. Condition: Check if request succeeded ├─ Success: │ ├─ Set Variable: token = response.authToken │ ├─ Run Workflow: load_user_workflow │ └─ Navigate: /dashboard/ └─ Error: └─ Show error message (alert) ``` ![Sign Up Workflow](../images/sign-up-workflow.webp) ### Load User Workflow Fetches and validates the current user's authentication status. Name: `load_user_workflow` ``` 1. Execute Request: load_user 2. Condition: Check if request succeeded ├─ Success: │ └─ Set Variable: user_data = response.data └─ Error: └─ Run Function: Alert session expired, clear token & user_data ``` ![Load user workflow](../images/load-user-workflow.webp) ### Log Out Workflow Clears user session and redirects to sign-in page. Name: `log_out_workflow` ``` 1. Set Variable: token = null 2. Set Variable: user_data = null 3. Set Variable: user_links = [] 4. Navigate: /sign-in/ ``` ![Log Out Workflow](../images/log-out-workflow.webp) ### Load User URLs Workflow Fetches the authenticated user's shortened URLs. Name: `load_user_urls` ``` 1. Execute Request: load_user_urls 2. Set Variable: user_links = response.data 3. Set Variable: links_loading = false ``` ![Load User URLs Workflow](../images/load-user-urls-workflow.webp) ### Short URL Workflow Creates a new shortened URL with automatic title fetching. Name: `short_url` Props: `original_url` ``` 1. Run Function: disable_form 2. Execute Request: get_title (fetch page title from URL) 3. Execute Request: create_short_url (with original_url & fetched title) 4. Run Function: enable_form 5. Set Variable: user_links = [new_url, ...existing_urls] ``` ![Short URL Workflow](../images/short-url-workflow.webp) ### Delete URL Workflow Removes a URL and updates the list. Name: `delete_url_workflow` Props: `id` ``` 1. Execute Request: delete_url (with URL id) 2. Set Variable: user_links = filtered array (remove deleted item) ``` ![Delete URL workflow](../images/delete-url-workflow.webp) ### Require Authentication Workflow Redirects unauthenticated users to sign-in page. Name: `require_authentication_workflow` ``` 1. Condition: Check if token is missing ├─ No token: │ └─ Navigate: /sign-in/ └─ Has token: └─ Continue (no action) ``` ![Require Authentication Workflow](../images/require-authentication-workflow.webp) ### Redirect Authenticated Users Workflow Redirects already authenticated users away from auth pages. Name: `redirect_authenticated_users` ``` 1. Condition: Check if token exists ├─ Has token: │ └─ Navigate: /dashboard/ └─ No token: └─ Continue (no action) ``` ![Redirect Authenticated Users Workflow](../images/redirect-authenticated-users-workflow.webp) ::: tip Learn More Check out the [Workflows documentation](/workflows/) to learn how to create and configure Workflows in Wized. ::: ## Step 4: Configure Elements Elements connect your WordPress HTML to Wized's logic. Add the `wized` attribute to elements in WordPress, then configure them in Wized. For each element, you can configure visibility conditions, set dynamic values, define events. **Sign Out button example:** For the sign out button, we set visibility to `return v.user_data`, so it only shows when the user is loaded. ![Sign out button example](../images/sign-out-button-example.webp) ### Visibility examples | Element Name | Type | Configuration | | ----------------- | ------ | ------------------------------------------------------- | | `sign-in-button` | Button | Visibility: `return !v.user_data` (hide when logged in) | | `sign-out-button` | Button | Visibility: `return v.user_data` (show when logged in) | ### Text value example | Element Name | Type | Configuration | | ------------ | ---- | -------------------------------------------------------------------- | | `user-name` | Text | Text: `return v.user_data.name \|\| v.user_data.email.split('@')[0]` | ### Rendering a List of Items To render a list of items, select the container element that wraps each item. In this example, we render link items from the `user_links` variable. **Configuration:** 1. **Index Variable:** Create a variable (e.g., `urls_index`) to access individual items within the list 2. **List Value:** Set the render list expression to `return v.user_links` Elements inside the container can then reference the current item using the index variable, such as `v.user_links[v.urls_index]`. ![Render list example for shorted url](../images/shorted_url_render_list_example.webp) Now we render items, for example for the title, we setup text value `return v.user_links[v.urls_index].title` ![Element inside list](../images/element-inside-list-example.webp) ### Form submit and events | Element Name | Type | Configuration | | -------------- | ---- | ----------------------------- | | `url-form` | Form | Triggers `short_url` workflow | | `sign-in-form` | Form | Triggers `sign_in_workflow` | ![Short url example](../images/short-url-form-example.webp) ### Complete Elements Reference Below is a comprehensive table of all elements configured in the URL shortener demo: #### Authentication Elements | Element Name | Configuration Type | Configuration | | ----------------- | ------------------ | ------------------------------------------------------------------------ | | `sign-in-button` | Visibility | `return !v.user_data` | | `sign-out-button` | Visibility | `return v.user_data` | | `sign-out-button` | Event (Click) | Triggers `log_out_workflow` | | `sing-in-form` | Event (Submit) | Triggers `sign_in_workflow` with `email` and `password` from form fields | | `sing-up-form` | Event (Submit) | Triggers `sign_up_workflow` with `email` and `password` from form fields | | `user-name` | Visibility | `return v.user_data` | | `user-name` | Text | `return v.user_data.name \|\| v.user_data.email.split('@')[0]` | #### URL List Container | Element Name | Configuration Type | Configuration | | ----------------------- | ------------------ | ---------------------------------------------------------- | | `shorted_url_container` | List | Value: `return v.user_links`, Index Variable: `urls_index` | | `links-title` | Visibility | `return v.user_links.length>0` | | `links-loader` | Visibility | `return v.links_loading && v.user_links.length===0` | #### URL Item Elements | Element Name | Configuration Type | Configuration | | ----------------- | ------------------ | ----------------------------------------------------------------------------------------- | | `title` | Visibility | `return v.user_links[v.urls_index].title` | | `title` | Text | `return v.user_links[v.urls_index].title` | | `shorted_url` | Text | `` return `${v.ORIGIN_URL}/${v.user_links[v.urls_index].short_code}` `` | | `original_url` | Text | `return v.user_links[v.urls_index].original_url` | | `link-created-at` | Text | `return Wized.functions.format_date({time:\`${v.user_links[v.urls_index].created_at}\`})` | #### URL Actions | Element Name | Configuration Type | Configuration | | --------------- | ------------------ | ----------------------------------------------------------------------------- | | `url-form` | Event (Submit) | Triggers `short_url` workflow (condition: `return !w.short_url.isRunning`) | | `copy-url` | Event (Click) | Copies short URL to clipboard using `navigator.clipboard.writeText()` | | `go-to-url` | Event (Click) | Opens short URL in new tab: `window.open(\`${v.ORIGIN_URL}/...\`, '\_blank')` | | `remove-button` | Event (Click) | Triggers `delete_url_workflow` with `id` from `v.user_links[v.urls_index].id` | #### Analytics Elements | Element Name | Configuration Type | Configuration | | ------------------------ | ------------------ | ------------------------------------------------------------------------------------ | | `visits-count-text` | Text | `` return `${v.user_links[v.urls_index].analytics.length} visits` `` | | `show-details` | Text | Returns `'Hide details'` or `'Show details'` based on `v.show_details_section_open` | | `show-details` | Event (Click) | Toggles section visibility and loads analytics summary via `toggle_section` function | | `extra-analytics` | Visibility | `return v.user_links[v.urls_index].id === v.show_details_section_open` | | `locations-section-item` | List | Value: `return v.analytics.top_countries.slice(0,5)`, Index: `analytics_list_index` | | `locations-section-item` | Text | Returns formatted country with flag and count using `get_country_name` function | | `devices-section-item` | List | Value: `return v.analytics.devices`, Index: `analytics_devices_index` | | `devices-section-item` | Text | `` return `${v.analytics_devices_index + 1}. ${item.name} (${item.count})` `` | ## Step 6: Set Up Global Events Global events trigger workflows on specific pages when certain conditions are met. ### Dashboard Page Load When the dashboard page loads, we trigger the `load_user_urls` workflow to fetch and display the user's shortened URLs. ![Load event example](../images/load-urls-event.webp) Other events on this project: | Event Name | Type | Configuration | | ------------------------------ | -------------------------------- | ------------------------------------------------ | | `Redirect authenticated users` | Page starts loading (Auth Pages) | Triggers `redirect_authenticated_users` workflow | | `Dashboard Check auth` | Page starts loading (Dashboard) | Triggers `require_authentication_workflow` | ## Summary By following these steps, you've connected: 1. **WordPress** → Provides the visual structure with Wized attributes 2. **Wized** → Manages all dynamic behavior, data binding, and API calls 3. **Xano** → Handles authentication, database storage, and business logic 4. **Redirect Service** → Handles short URL redirects and click tracking The result is a fully functional URL shortener where users can sign up, log in, create shortened URLs, view their links, and delete them, all without writing complex code in WordPress.   # WordPress Setup This page describes the WordPress pages we created for the URL Shortener product demo. ## Pages Created For the URL Shortener product, we set up the following pages in WordPress: ### 1. Dashboard Page The main page where users can shorten URLs, view their links, and track click statistics. **URL:** `/dashboard` **Purpose:** Display and manage all shortened URLs created by the user ![Dashboard Page](../images/dashboard-page.webp) > **Note:** We render all static elements that will be used by Wized to make them dynamic. In this case, we render the Link Item, analytics, and loader components statically, then Wized manages showing, hiding, or loading the dynamic content based on the data fetched from the backend. ### 2. Home/Landing Page The public homepage that introduces the URL shortener functionality. **URL:** `/` **Purpose:** Marketing and entry point for the application ![Home Page](../images/home-page.webp) ### 3. Sign In / Sign Up Pages Used for authenticating users with the Xano backend ![alt text](../images/sign-in-page.webp) ![alt text](../images/sign-up-page.webp) ## Setting up Wized Attributes When you need dynamic functionality with Wized, such as rendering a list of components, showing or hiding elements based on conditions, or managing form submissions, you add the `wized` attribute to HTML elements. For example, to render links fetched from Xano, add `wized="shorted_url_container"` to the static container inside WordPress/Elementor. ![Shorted URL Container](../images/link-item-container.webp) ### Other Attribute Examples | Attribute | Element | Purpose | | ------------------------ | --------- | ------------------------------------------------------------------------- | | `wized="sign-in-button"` | Button | Dynamically show or hide the button based on user authentication status | | `wized="username"` | Paragraph | Dynamically display the authenticated user's username or hide the element | | `wized="url-form"` | Form | Handle form submission functionality | Below you can see all the Wized attributes used in this demo displayed on Wized dashboard: ![Dashboard attributes](../images/dashboard-attributes.webp) ## How It Works 1. **WordPress** provides the page structure and HTML elements with Wized attributes 2. **Wized** identifies the attributes and manages the dynamic functionality 3. **Xano** provides API endpoints and database management for authentication and URL storage ## Next Step Continue to the Xano setup guide to learn how the backend API and database are configured: - [Setting up Xano](./xano.md)   # Xano setup ## Step 1: API Setup We'll first set up our API in Xano to manage authentication and URL shortening. This involves creating the database schema and API endpoints that handle user registration, login, and all URL shortener operations. The API will provide secure endpoints for managing authentication tokens and CRUD operations on shortened URLs with analytics integration. ## Database Tables The Xano backend uses three core tables: **user** - Stores user account information including name, email, and password for authentication. **short_link** - The main table for URL shortcuts, containing the original URL, generated short code, title, and the user ID of the creator with a timestamp for when it was created. **click_analytic** - Tracks analytics for each short link click, recording the IP address, geographic location, browser type, and the associated short link ID to measure engagement. ![Xano tables](../images/xano-tables.webp) ## Xano Authentication The authentication system consists of three key endpoints: **1. <span style="color: green;">POST</span> auth/login** - Authenticates existing users with email and password, returning an authentication token for subsequent requests. **2. <span style="color: green;">POST</span> auth/signup** - Creates new user accounts and returns an authentication token, accepting email, password, and name as inputs. **3. <span style="color: lightblue;">GET</span> auth/me** - Retrieves the current user's profile information using the authentication token, used to verify the user session. ![alt text](../images/xano-auth.webp) ## URL Shortener Endpoints The URL shortener service provides three main endpoints: ![Url shortener endpoints](../images/url-shortener-endpoints.webp) **1. <span style="color: lightblue;">GET</span> short_link** - Query all short links for the authenticated user, joining with the click_analytic table to include analytics data. This endpoint filters results using `short_link.user_id == $auth.id` to show only the current user's links along with their click statistics. ![Short links list](../images/short-links-query-current-user.webp) **2. <span style="color: green;">POST</span> short_link** - Create a new short link record, storing the original URL, generated short code, title, and associating it with the authenticated user. **3. <span style="color: red;">DELETE</span> short_link/{short_link_id}** - Delete a short link record (private endpoint). ## Helper Service: Track Click Endpoint ### POST /track_click This helper endpoint is called by the Hono proxy service to handle URL redirections. It accepts the short link identifier along with click analytics data: **Inputs:** - `identifier` - The short code of the URL (text) - `ip` - The visitor's IP address (text) - `location` - The geographic location of the click (text) - `browser` - The browser information of the visitor (text) **Process:** 1. Retrieves the short_link record using the identifier ![Get record](../images/track-click.webp) 2. Creates a new click_analytic record with the provided tracking data and links it to the short_link ![Add record](../images/track-click-add-record-in.webp) 3. Returns the original URL for the proxy to redirect to **Response:** - `redirect_url` - The original URL to redirect the visitor to This endpoint enables seamless tracking of all clicks while maintaining a clean redirect experience for end users. ## Next Step Now that the Xano backend is configured, proceed to the Wized setup guide to connect your frontend with these API endpoints. [Connecting Everything with Wized →](./wized.md)   # Introduction ## What is Wized? Wized is a powerful visual development platform that allows you to add dynamic functionality to your websites without writing complex code. It bridges the gap between static website designs and fully functional web applications by providing a visual interface to connect your frontend elements to backend services, APIs, and databases. For WordPress users, Wized opens up a world of possibilities beyond what traditional plugins offer. Instead of being limited to pre-built plugin functionality, you can create custom solutions tailored to your exact needs. Wized handles the logic, data fetching, and interactivity while you maintain full control over your WordPress design and content. ## What Can You Build with Wized + WordPress? The combination of WordPress and Wized is incredibly powerful. You can transform your WordPress site into a fully dynamic web application. Here are some examples of what you can create: **Membership Portals & Dashboards** - Build user dashboards that display personalized data from external services like Airtable, Supabase, or Firebase. Create member-only areas with dynamic content that updates based on user permissions, subscription status, or activity history. **E-commerce Extensions** - Extend WooCommerce functionality with custom product configurators, real-time inventory displays from external systems, dynamic pricing calculators, or integrate with third-party fulfillment and CRM services. Build custom checkout flows that connect to any payment processor or backend system. **Dynamic Directories & Listings** - Create searchable directories with advanced filtering, real-time search, and data pulled from external databases. Perfect for job boards, real estate listings, business directories, or any content that needs powerful search and filter capabilities beyond what WordPress offers natively. **Forms & Multi-Step Workflows** - Build sophisticated multi-step forms with conditional logic, real-time validation, and data that saves to any backend service. Create booking systems, application processes, or onboarding flows that integrate with your existing tools and databases. **Custom Integrations** - Connect your WordPress site to virtually any API or service. Display live data from CRMs, project management tools, analytics platforms, or any service with an API. Automate workflows between your website and external services without relying on Zapier or similar tools.   # Integration ## Prerequisites Before you begin, make sure you have: - A WordPress website with admin access - A Wized account - Access to your WordPress theme files or a plugin that allows adding custom scripts ## Creating a Wized Project From the Wized dashboard, click **New Project** in the top right corner. 1. Paste the staging domain of your WordPress site. ![Creating new project](./images/create-new-project.webp) 2. The name and platform will be automatically detected. You can change the name if needed. If the system fails to detect the platform, select **WordPress** manually. 3. Copy the generated code at the bottom to add to your WordPress site. This step is optional for testing and can be done later. To add custom code, you can either edit your theme files directly or use a plugin like [Elementor](https://elementor.com/) to manage custom scripts. ## Using Elementor to Integrate Wized 1. Go to your WordPress admin dashboard. 2. In the left sidebar, click **Elementor**. 3. Hover over **Editor**, then click **Tools**. ![Elementor tools](./images/elementor-tools.webp) 4. In the Elementor left panel, click **Code**. 5. In the top right corner, click **Add New**. 6. Paste the Wized script, enter a name for it, and set the location to **Head** with priority **1**. ![Wized script](./images/paste-wized-scripts.webp) ![Elementor Custom Code](./images/elementor-custom-code.webp)   # Wized Cloak attribute When loading dynamic data, it's essential to hide static content or display a loading state until Wized finishes loading and initialization. ## Using Wized Cloak Add the `wized-cloak` attribute to elements you want to hide during the loading phase. Then, add CSS to hide these elements initially. Wized will automatically show them once fully loaded: This example hides elements with `wized-cloak` on the live site while keeping them visible in the Elementor editor: ```css html:not(.elementor-html) [wized-cloak] { display: none !important; } ```   # WordPress Plugin Releases The Wized WordPress plugin is a companion plugin that adds server-side functionality to your WordPress site. It is required for specific Wized features that cannot be handled through the standard WordPress REST API alone. ::: info Required for - [Send Email Verification](/requests/wordpress/methods/authentication/send-email-verification/) — sends a verification email to confirm a user's email address - [Verify Email](/requests/wordpress/methods/authentication/verify-email/) — verifies a user's email using the token from the verification link - **ACF field filtering** — enables filtering posts by Advanced Custom Fields values ::: ## Installation 1. Download the `.zip` file from the release you want below. 2. In your WordPress admin, go to **Plugins → Add New → Upload Plugin**. 3. Select the downloaded `.zip` file and click **Install Now**. 4. Click **Activate Plugin**. --- ## v1.0.0 **Released:** March 2, 2026 <a href="https://wordpress-plugin-releases.wized.com/wized_1.0.0.zip" class="wp-download-btn" download="wized_1.0.0.zip">↓ Download v1.0.0</a> ### Changes - Added Wized metadata to WordPress users to support the email verification flow. - Enabled post filtering by ACF (Advanced Custom Fields) field values. --- <style> .wp-download-btn { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.75rem 0 1.25rem; padding: 0.5rem 1.25rem; background-color: var(--vp-c-brand-1); color: var(--vp-c-white) !important; border-radius: 6px; font-size: 0.875rem; font-weight: 600; text-decoration: none !important; transition: background-color 0.2s; } .wp-download-btn:hover { background-color: var(--vp-c-brand-2); } </style>   > [!NOTE] > To use this method, you will need to enable authentication in the App configuration   # Airtable Requests ## What is an Airtable Request? <iframe width="100%" height="400" src="https://www.youtube.com/embed/JsF0woyUWbg?si=jKJ03S_KdYK1mR3D" frameborder="0" allowfullscreen></iframe> An Airtable request is a way to integrate your Application with Airtable. You can retrieve data, create new records, update existing ones, or delete information with Airtable as your backend database. You can use Airtable to just fetch data without any authentication like in public blogs, or you can use authentication build by Wized so users can create account, sign in, read and write data based on permission setup in Wized configurator. To create airtable requests you will need to first create an Airtable Wized App. ## How to Create Airtable App ### 1. Go to My Apps Begin by going to the 'My Apps' panel in Wized. 1. Click the `+` button at the top of the panel. 2. Add a name for your app for later reference, i.e. `Airtable App`. 3. Pick the `Airtable` option. ![Adding an Airtable App to my apps](my-apps.png) 4. Connect Airtable using OAuth and select bases you want to use with this app 5. Click "Add base" and select Airtable Base 6. Click "Grant access" and wait for the authorization ![Connect Airtable Oauth Popup](wized-airtable-connect-popup.png) ### 2. Configure your request #### Create a new request, and add basic info - Name your request i.e. `get_blog_posts` - Add your request to a folder (optional) - Select your Airtable App from the dropdown ![Adding basic info to our request](airtable-request.png) #### Select method You will need to select one of the methods for a specific functionality - [Create user](./methods/authentication/create-user/index.md) Create a user with specified email and password and store in the table you selected in app configuration - [Login user](./methods/authentication/login-user/index.md): Login a user with email and password - [Load user](./methods/authentication/load-user/index.md): Load authenticated user - [Logout user](./methods/authentication/logout-user/index.md): Sign out currently authenticated user - [Delete user](./methods/authentication/delete-user/index.md): Delete currently authenticated user - [Request password reset](./methods/authentication/request-password-reset/index.md): Request password reset - [Password reset](./methods/authentication/password-reset/index.md) Reset password with new password - [Get item](./methods/data/get-item/index.md): Get Airtable Record item - [Get list items](./methods/data/get-list-items/index.md): Get Airtable Record list of items - [Create item](./methods/data/create-item/index.md): Create Airtable Record - [Update item](./methods/data/update-item/index.md) Update Airtable Record - [Delete item](./methods/data/delete-item/index.md): Delete Airtable Record ### 3. User authentication If you want to have an authentication system on your app, you just need to check "Enable authentication" in the app configuration ![Enable authentication](enable-user-authentication.png) <a id="airtable_user_info_base"></a>Select Base from which you want to store and retrieve users <a id="airtable_user_info_table"></a>Select table from which you want to store and retrieve users <a id="airtable_user_info_email_password"></a>In the selected table you will need to have two fields, email, email verified and password Select email, email verified and password fields and you are ready to go. Go to the Requests panel and start configuring your request.   ## Create user method With "Create User" method, you can implement sign-up functionality in your application. Users will be saved in the Base and table you selected in the [App configuration](../../../index#how-to-create-airtable-app). - All passwords will be encrypted!  ### Parameters - Email: This is a required [function field](../../../../../function-editor/index.md) where you can return the user's email. - Password: This is a required function field where you can input the user's password. - Page: This is an optional function field where you can input the URL of the page to which you want to redirect the user after successful sign-up. - Auto Login: This is a checkbox field that lets Wized know if you want to automatically sign in the new user or not. ![User Create Method](user-create-method.png)   ## Delete user method With "Delete User" method, you can implement delete user functionality in your application. User will be deleted from the Base and table you selected in the App configuration.  ![User delete Method](delete-user.png)   ## Load user method With "Load User" method, you can fetch current authenticated user! This usually need to be done when app loads the first time, then you can save that on app state! Users will be retrieved from the Base and table you selected in the App configuration.  ### Parameters - Page: Page url to redirect after loading the user. ![User Load Method](load-user-method.png)   ## Login user method With "Login User" method, you can implement sign-in functionality in your application. Users will be retrieved from the Base and table you selected in the App configuration.  ### Parameters - Email: This is a required [function field](/function-editor/) where you can input the user's email. - Password: This is a required function field where you can input the user's password. - Page: This is an optional function field where you can return the URL of the page to which you want to redirect the user after successful login. ![User Login Method](login-user-method.png)   ## Login with magic link method With "Login with magic link" method, you can implement passwordless sign in functionality in your application. You will first need to use ["Send magic link"](../send-magic-link/index) method to send the link to the email. This method will get access token from the link that is build from "Send magic link" method and will login user!  ### Parameters - Redirect url: This is an optional [function field](../../../../../function-editor/index.md) where you can redirect user after successful sign in! ![Login with magic link method](login-with-magic-link.png)   ## Logout user method With "Logout User" method, you can implement logout functionality in your application. This will clear the current user data from the application state and you can redirect user with page param to the page you want!  ### Parameters - Page: Page to redirect after logout! ![User Logout Method](logout-user-method.png)   ## Password reset method With "Password reset" method, you can implement password reset functionality in your application. After user click on the link from email that is sent from "Request password reset" method, user will need to be redirected in this page and query params will be added to the page. This need to be called after user will write the new password in the input fields in the page.  ### Parameters - New Password: This is a required [function field](/function-editor/) where you can return user's submitted new password. ![Password reset method](password-reset-method.png)   ## Request password reset method With "Request password reset" method, you can implement password reset functionality in your application. An email with reset link will be sent to the user email that is returned from email param function.  ### Parameters - Email: This is a required [function field](/function-editor/) where you can return user's email. - Redirect url: This is a required function field where you can return the page url in which user will input the new password. ![Request password reset method](request-password-reset-method.png)   ## Send email verification link method With "Send email verification link" method, you can implement email verification in your application. This method will send a verify link to the user email and after user go to that link, you will need to call "Verify email" method to verify the email.  ### Parameters - Email: This is a required [function field](/function-editor/) where you can return user's submitted email. - Redirect url: This is a required [function field](/function-editor/) where you can return the url of the page in which you plan to redirect user from email. ![Send email verification link method](send-email-verification-link.png)   ## Send magic link method With "Send magic link" method, you can implement passwordless sign in functionality in your application. This method will send a login link to the user email and after user go to that link, you will need to use the "Login with magic link" method to login user to your application.  ### Parameters - Email: This is a required [function field](/function-editor/) where you can return user's submitted email. - Redirect url: This is a required [function field](/function-editor/) where you can return the url of the page in which you plan to redirect user from email. ![Send magic link method](send-magic-link-method.png)   ## Verify email method With "Verify email" method, you can implement last step of email verification functionality in your application. This method will get access token from the link that is build from "Send email verification link" method and will verify the email!  ### Parameters - Redirect url: This is an optional [function field](/function-editor/) where you can redirect user after successful email verification! ![Verify email method](verify-email-method.png)   ## Create item method With "Create item" method, you can create a record from the specified Base and Table. ### Main Parameters - Base: This is a required dropdown field where you can select the base you want to create the record into. - Table: This is a required dropdown field where you can select the table you want to get the record into. ![Create item method](create-item-method.png) ### Permissions You can select who can create record You can select from: - Allow Any: Any user can create a record - Authenticated: Any authenticated user can create record - Owner: Authenticated user can create the record, and user id will be stored into record. If you select this option, you will need to select also the field in which you will store user id ![Owner permissions](../../../owner-permissions.png) ### Fields Airtable fields will be listed as function fields, in which you will need to specify for each one what value will be returned.   ## Delete item method With "Delete item" method, you can delete an existing record from the specified Base and Table. ### Main Parameters - Base: This is a required dropdown field where you can select the base you want to delete existing record from. - Table: This is a required dropdown field where you can select the table you want to delete existing record from. - Record ID: This is an required function field where you can return the record id that you want to delete. ![Delete item method](delete-item-method.png) ### Permissions You can select who can delete record You can select from: - Allow Any: Any user can delete the record - Authenticated: Any authenticated user can delete the record - Owner: Authenticated user can delete the record if the user id field value will match with authenticated user. If you select this option, you will need to select also the field in which you will store user id > [!NOTE] > In most cases you need to select Owner here, so only users that created the record can also delete it. ![Owner permissions](../../../owner-permissions.png)   ## Get item method With "Get item" method, you can retrieve a single airtable record from the specified Base and Table. ### Main Parameters - Base: This is a required dropdown field where you can select the base you want to get the record from. - Table: This is a required dropdown field where you can select the table you want to get the record from. - Record ID: This is an required function field where you can return the record id that you want to retrieve. - Limit fields to: This is an optional multi select dropdown field in which you can select fields that you want to retrieve. ![Get item method](get-item-method.png) ### Permissions You can select who can retrieve this record You can select from - Allow Any: Any user can retrieve this record - Authenticated: Any authenticated user can retrieve this record - Owner: Only the user that created this record can retrieve it - If you select Owner, you will need to select also the field in which the user id is stored ![Owner permissions](../../../owner-permissions.png)   ## Get list items method With "Get list items" method, you can retrieve and filter multiple records from the specified Base and Table. ### Main Parameters - Base: This is a required dropdown field where you can select the base you want to get items from - Table: This is a required dropdown field where you can select the table you want to get items from - Limit fields to: This is an optional multi select dropdown field in which you can select fields that you want to retrieve. - View: This is an optional required dropdown field where you can select the view you want to get items from ![Get list items method](get-list-items.png) ### Permissions You can select who can retrieve the data You can select from: - Allow Any: Any user can retrieve the data - Authenticated: Any authenticated user can retrieve the data - Owner: Only records that user field value will match with currently authenticated user id will be retrieved - If you select Owner, you will need to select also the field in the user id is stored > [!NOTE] > In most cases you need to select Owner here, so only users that created the records can also retrieve them. ![Owner permissions](../../../owner-permissions.png) ### Filter Parameters You can add multiple filters and each filter will need to have params: - Include record if: This is a required dropdown field in which you will need to select table field to apply filter to - Condition: This is a required dropdown filed with values Equals, Does not equal, Includes, Does not include - Value: This is a required function field, in which you will need to select the value to test with condition ![Filtering](get-list-items-filtering.png) ### Filtering Records Based on Reference Fields To filter records based on a reference table field, you need to create a lookup field for that table and select the field you want to filter with. _Figure 1: Example of a reference field_ ![Reference Field](get-list-reference-fields-filtering.png) _Figure 2: Configuration of a reference field for filtering_ ![Reference Field Configuration](get-list-reference-fields-filtering-config.png) ### Pagination Parameters You can paginate airtable records result with following params: - Page size: The number of records returned in each request. Must be less than or equal to 100. Default is 100. - Offset: To fetch the next page of records, include offset from the previous request in the next request parameters. - Max records: The maximum total number of records that will be returned in your requests. If this value is larger than pageSize (which is 100 by default), you may have to load multiple pages to reach this total. ![Pagination](get-list-pagination.png) ### Sort Parameters You can add multiple sort conditions and each condition will need to have params: - Sort by: This is a required dropdown field in which you will need to select table field to apply sorting - Order: This is a required dropdown filed with values Ascending, Descending ![Sorting](get-list-sorting.png)   ## Update item method With "Update item" method, you can update an existing record from the specified Base and Table. ### Main Parameters - Base: This is a required dropdown field where you can select the base you want to update existing record. - Table: This is a required dropdown field where you can select the table you want to update existing record. - Record ID: This is an required function field where you can return the record id that you want to update. ![Create item method](update-item-method.png) ### Permissions You can select who can update record You can select from: - Allow Any: Any user can update a record - Authenticated: Any authenticated user can update record - Owner: Authenticated user can update the record if the user id field value will match with authenticated user If you select this option, you will need to select also the field in which you will store user id > [!NOTE] > In most cases you need to select Owner here, so only users that created the record can also update it. ![Owner permissions](../../../owner-permissions.png) ### Fields Airtable fields will be listed as function fields, in which you will need to specify for each one what value will be returned.   # Creating a request **Requests** allow your project to communicate with external web services through APIs. Before creating a request, you need to have an [app](/apps/) set up. An app acts as an integration and can be either a **native integration** (prebuilt by Wized) or a **REST integration** (fully customizable). ## Creating requests for native apps If you are using a **native integration**, Wized provides predefined methods that simplify request creation. Currently, Wized offers native integrations with `Supabase, Memberstack, Firebase, and Airtable`. These services primarily handle databases and authentication. ### Steps to create a native request 1. Navigate to the left sidebar and click on `Requests`. This opens the **requests panel**. 2. If you have existing requests, they will be listed here. To create a new one, click on the **`+`** icon in the top-right corner. 3. In the right panel, configure the request by: - Naming the request. - Selecting the **app**. ![name-app-overview](name-app-overview.png) 4. Once the app is selected, configure the request using a series of dropdown menus: - Choose the **method** from the available options. The available methods depend on the selected integration and may include actions like: `Get List Items`, `Get Item`, `Login`, `Create Item`, `Sign In`, `Update Profile`, `Get User`. ![native-request-methods](native-request-methods.png) - Depending on the selected method, a set of inputs will appear. For example :::tip Note To see all the available methods, go to the documentation of the native integration of your choice ::: **Example** if you are configuring a **login** request, you will need to provide the **email** and **password** fields. ![login_request_example](login_request_example.png) ::: info Note Wized does not handle authentication itself; it simply facilitates the necessary API calls based on the chosen method. ::: --- ## Creating REST requests If you need to interact with a third-party service that is not covered by Wized’s native integrations, you can create a **REST API request**. ### Steps to create a REST request 1. Navigate to the left sidebar and click on `Requests`. 2. Click on the **`+`** icon to create a new request. 3. In the right panel, configure the request by: - Naming the request. - Selecting **REST** as the app. 4. Once REST is selected, manually configure the request: - Choose the **HTTP method** (`GET`, `POST`, `PUT`, `PATCH`, `DELETE`). - Set the **endpoint URL** (only the relative path, as the base URL was already configured when creating the app). - Define **parameters, headers, and body** using key-value pairs: - The **key** is a fixed text string (e.g., `Authorization`, `Content-Type`, `userId`). - The **value** can be set using Wized’s [function editor](/function-editor/), allowing you to use real-time data from: `Cookies, Variables, Request responses, URL parameters, among others` ::: info Note To properly configure REST requests, refer to the API documentation of the service you want to integrate. There, you'll find details about endpoints, parameters, headers, and the required request body. ::: ## Next steps Now that you have created your request, the next step is to **trigger** and **use** the request inside your project. You can execute requests based on [user interactions](/elements/events) or [global events](/global-events/).   # Confirm Password Reset The `Confirm password reset` method is used to set a new password for a user existing in your Firebase app. It requires an `OOB Code` that is obtained by first [sending a password reset email to the user](../send-password-reset/index.md). To make a request to confirm a password reset, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Confirm password reset`. 3. Provide the new `Password` and the `OOB Code` received from the [Send password reset email](../send-password-reset/index.md), usually through the page query parameters. ![Confirm password reset Firebase](confirm_password_reset_1.png)   # Create Item The `Create Item` method enables you to add a document to a collection in your Firebase Cloud Firestore. To create a request to add a document to a collection, follow the steps below: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Create Item`. ![Create Item Firebase](create_item_1.png) 3. Under the `Path`, fill in the full path to the collection in your Cloud Firestore database. ![Create Item Firebase](create_item_2.png) 4. Add the data of the new document to be added in key-value pairs. ![Create Item Firebase](create_item_3.png)   # Delete File The `Delete file` method is used to delete files from your Firebase Cloud Storage. To make a delete file request, follow these steps: 1. First, ensure you have Cloud Storage set up on your Firebase app. 2. Make sure that the Storage Bucket is defined in your [Firebase App integration](../index.md#adding-an-app-to-your-project-in-the-firebase-console). 3. Open the request panel and click on the `+` button to add a new request. 4. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Delete file`. 5. Scroll down to fill in the storage path of the file you want to delete. ![Delete file Firebase](delete_file_firebase.png)   # Delete Item The `Delete Item` method allows you to delete a specific document or an entire collection from your Cloud Firestore. To create a request to delete a document or collection, follow the steps below: 1. Open the request panel and click on the `+` button to add a new request. 2. Provide an appropriate name for the request and select the Firebase app to be used for the request. Then, choose `Delete Item` as the method. 3. In the `Path` field, enter the full path to the document or collection in your Cloud Firestore database. ![Delete Item Firebase](delete_item_1.png)   # Get File URL The `Get File URL` method is used to obtain the full public-facing URL paths to your file in Cloud Storage in Firebase. To make a request to get the file URL, follow these steps: 1. First, ensure you have Cloud Storage set up on your Firebase app. <video src="https://media.wized.com/docs-v2/upload_file_1.mp4" controls loop muted title="Create Cloud Storage in Firebase"></video> :::info NOTE The clip starts with the project in test mode - this isn't secure. You'll need to update the Firebase rules. ::: 2. Make sure that the Storage Bucket is defined in your [Firebase App integration](../index.md#adding-an-app-to-your-project-in-the-firebase-console). 3. Open the request panel and click on the `+` button to add a new request. 4. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Get File URL`. 5. Scroll down to fill in the bucket name and storage path of the file. You can then choose whether to download it or just display it. ![Get File URL Firebase](get_file_url_1.png)   # Get Item The `Get Item` method allows you to fetch a specific document from your Cloud Firestore. To create a request to get an item, follow the steps below: 1. Open the request panel and click on the `+` button to add a new request. 2. Provide an appropriate name for the request and select the Firebase app to be used for the request. Then, choose `Get Item` as the method. 3. <a name="firestore-path"></a>Fill in the full path to the document in your Cloud Firestore database under the `Path` field. ![Get Item Firebase](get_item_1.png) ::: info NOTE In most cases, the Get Item request requires the document ID at the end of the path. :::   # Get items list The `Get items list` method allows you to fetch a collection from your Cloud Firestore. To create a request to get a collection, follow the steps below: 1. Open the request panel and click on the `+` button to add a new request. 2. Provide an appropriate name for the request and select the Firebase app to be used for the request. Then, choose `Get items list` as the method. ![Get Item list Firebase](get_list_1.png) 3. Fill in the full path to the collection in your Cloud Firestore database under the `Path` field. ![Get Item list Firebase](get_list_2.png) The `Limit items` field is optional, but for much larger collections, we do advise using it. The `Subscribe realtime` checkbox allows you to listen to your data and receive real-time updates. 4. (Optional) If you want to filter, you can provide a field path to filter by, as well as the criteria to filter by. In the screenshot below, we are filtering by the `name` field path, and we only want those matching the value `John Doe` to be returned. ![Get Item list Firebase](get_list_3.png) 5. (Optional) If you want to sort, you can provide a field path to sort by, as well as the direction to sort by. In the screenshot below, we are sorting by the `name` field path in ascending order. ![Get Item list Firebase](get_list_4.png) 6. (Optional) To paginate your results, you can use one of the following methods: a. Start After Use this method to begin pagination after a specific value. ![Get Item list start after Firebase](get_list_pagination_start_after.png) b. Start At Use this method to begin pagination at a specific value. ![Get Item list start after Firebase](get_list_pagination_start_at.png) c. Multiple Fields Pagination To paginate with multiple fields, specify sort by for the fields you want, and define the starting point as a list. ![Get Item list multiple fields](get_list_pagination_multiple.png)   # Get User The `Get User` method is used to retrieve the details of the currently logged-in user using Firebase. To make a request to get a user, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Get user`. ![Get User Firebase](get_user_1.png)   # Firebase Requests Wized has a native Firebase integration, which makes it easy to make requests to your Firebase app to perform CRUD operations on Cloud Firestore. Firebase is a popular Backend-as-a-Service (BaaS) that provides a real-time database. It is a NoSQL database that stores data in JSON-like documents. <iframe width="100%" height="400" src="https://www.youtube.com/embed/5qJQF_SubAE?si=ujqoh4khUSYEsMR3" frameborder="0" allowfullscreen></iframe> <iframe width="100%" height="400" src="https://www.youtube.com/embed/SgDDoe-GHOc?si=oAx4ycoNXF1pbTMv" frameborder="0" allowfullscreen></iframe> ## How to get started? ### Creating a project in the Firebase console To start using Firebase, first, you need to create a project in [the Firebase console](https://console.firebase.google.com/). You'll see a screen similar to the one below. ![Firebase console](./introduction_2.png) Click on the `Add Project` button and follow the on-screen prompts. Not much customization is needed for this sample app, so just clicking on continue for all steps with the default settings will be okay. ### Adding an app to your project in the Firebase console After successfully creating a project, you'll be presented with this screen where we should add our app. ![Firebase console successful project creation](./introduction_5.png) Since what we are building is a web app, we will click on the `</>` button, which will give us a set of credentials to use in Wized. You'll then give it an appropriate name, and on the step of adding the Firebase SDK, we will choose to do so via script tags. <video src="https://media.wized.com/docs-v2/introduction_1.mp4" controls loop muted title="Adding an app to Firebase project"></video> <a id="firebase_config"></a>Copy the `firebaseConfig` values for use in setting up the Firebase app in Wized. ![Firebase console config](./introduction_4.png) ### Setting up Firebase in the Wized configurator In the Wized configurator, go to `My Apps`, then click on the `+` button to add an app. Give the app an appropriate name, and under the `App` option, choose `Firebase`. Next, transfer the data from the Firebase config copied earlier onto Wized. If you lost access to the Firebase config, you can always [find it in the Firebase project settings](https://support.google.com/firebase/answer/7015592). The final result will be as below: ![Firebase console](./introduction_3.png) ### Creating Cloud Firestore After creating an app, we'll need to add a database to store our data, and that is where Cloud Firestore comes into play. Check out an example below of creating the Cloud Firestore and manually adding a document to it. <video src="https://media.wized.com/docs-v2/introduction_6.mp4" controls loop muted title="Adding Cloud Firestore"></video> ### Securing your database Firebase implements security rules to protect your data. It is very important that you take the time to understand how to write these rules to ensure your data is secure. Otherwise, anyone can potentially read or write to your database. Check out the [Firebase documentation](https://firebase.google.com/docs/firestore/security/get-started) for more information.   # Send Password Reset The `Send password reset` method is used to send an email to an existing user in Firebase for password resetting. To make a request to send a password reset email, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Send password reset`. 3. Under the Email menu, fill in the email (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)). ![Send password reset Firebase](send_password_reset_1.png)   # Send Verification Email method The `Send verification email` method is used to send an email to signed in user for email verification. To make a request to send an email verification, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Send verification email`. ![Send verification email](send-verification-email.png)   # Set Item The `Set Item` method works similarly to the [Create Item](../create-item/index.md) method but performs upserting instead. If the document already exists, the `Set Item` method will overwrite the existing document with the new data provided or merge the new data with the existing data in the document, depending on whether the `Merge Fields` option is active. If the document does not exist, the `Set Item` method will create a new document with the provided data. ## Example Request 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Set Item`. ![Set Item Firebase](set_item_1.png) 3. Under the `Path`, fill in the full path to the document in your Cloud Firestore database. ![Set Item Firebase](set_item_4.png) 4. Fill in the key-value pairs with the data to be set. ![Set Item Firebase](set_item_3.png)   # Sign in with email and password The `Sign in with password` method is used to authenticate an existing user to your application using the traditional format of providing an email and a password. To make a request to sign in a user using an email and password, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign in (email + password)`. ![Sign in Firebase](sign_in_1.png) 3. Scroll downwards under the Email menu, fill in the email (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)), and then fill in the password. ![Sign in Firebase](sign_in_2.png)   # Sign in with OAuth provider The `Sign in with provider` method is used to authenticate a user to your site using a widely used third-party application providing OAuth. To make a request to authenticate a user using OAuth, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign in with OAuth`. ![Sign in with OAuth Firebase](sign_in_1.png) 3. Scroll downwards to select the provider and add a redirect URL. ![Sign in with OAuth Firebase](sign_in_2.png) 4. Add the scopes required for your app. ![Sign in with OAuth Firebase](sign_in_3.png) :::info NOTE **Scopes** vary widely based on the provider used, and each provider has a sample of scopes on their respective documentation. An example is Facebook's scopes listed here: [https://developers.facebook.com/docs/permissions](https://developers.facebook.com/docs/permissions) :::   # Sign Out The `Sign Out` method is used to log out an authenticated user using Firebase. To make a request to sign out a user, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Sign Out`. 3. Under the Email menu, fill in the email (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)). ![Sign Out Firebase](sign_out_1.png)   # Sign up with email and password The `Sign up(email + password)` method is used to add a new user to your application using the traditional format of providing an email and a password. To make a request to sign up a user using an email and password, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign up(email + password)`. ![Sign up Firebase](sign_up_1.png) 3. Scroll downwards under the Email menu, fill in the email (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)), then fill in the password. ![Sign up Firebase](sign_up_2.png)   # Unsubscribe Real-Time The `Unsubscribe realtime` method lets you stop listening for live changes on your documents from earlier subscribed requests. To create a request to unsubscribe from realtime updates, follow the steps below: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Unsubscribe realtime`. 3. Under the `Requests`, choose the request(s) to stop the realtime events from. ![Unsubscribe realtime Firebase](unsubscribe_realtime_1.png)   # Update Email The `Update email` method is used to change the email of a user existing in Firebase. To make a request to update a user's email, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Update email`. 3. Under the Email menu, fill in the email (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)). ![Update email Firebase](update_email_1.png)   # Update Item The `Update item` method enables you to change the details of a document in your Firebase Cloud Firestore. To create a request to update a document, follow the steps below: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Update item`. ![Update item Firebase](update_item_1.png) 3. Under the `Path`, fill in the full path to the document in your Cloud Firestore database. ![Update item Firebase](update_item_2.png) :::info NOTE: Almost all of the time, the update item request needs the document ID at the tail end of the path. ::: 4. Fill in the key-value pairs with the data to be changed. ![Update item Firebase](update_item_3.png)   # Update Profile The `Update profile` method is used to change the user's profile information in Firebase like the display name and photo URL. To make a request to update a user's profile, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Update profile`. 3. Add the new `Display Name` or `Photo URL` for the user.   # Upload File The `Upload file` method is used to upload files to your Firebase Cloud Storage. 1. First, ensure you have cloud storage added to your Firebase app. <video src="https://media.wized.com/docs-v2/upload_file_1.mp4" controls loop muted title="Adding cloud storage to Firebase app"></video> ::: info NOTE The clip starts with the project in test mode - this isn't secure. You'll need to update the Firebase rules. ::: 2. Make sure that the Storage Bucket is defined in your [Firebase App integration](../index.md#adding-an-app-to-your-project-in-the-firebase-console). 3. Open the request panel and click on the `+` button to add a new request. 4. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Upload file`. 5. Scroll down to fill in the storage path of the file. Use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md) to choose the file to be uploaded. ![Upload file Firebase](upload_file_2.png)   # Verify Email method The `Verify email` method is used to verify a user's email address in your Firebase app. It requires an `OOB Code` that is obtained by first [sending a verification email to the user](../send-verification-email/index.md). To make a request to verify an email, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Firebase app to be used for the request. Then, under the method, choose `Verify email`. 3. Provide the `OOB Code` received from the [Send verification email](../send-verification-email/index.md), usually through the page query parameters. ![Verify email Firebase](verify-email.png)   # Handling API errors When making API requests in Wized, errors can occur for various reasons. These errors generally fall into two categories: 1. **The request was not sent** – The request never reached the API server. 2. **The request was sent but returned an error** – The API responded with an error message. Understanding the cause of these errors will help you diagnose and fix them efficiently. --- ## When the request cannot be sent If the request is not sent, it means it never reached the API server. This can happen due to: - **Incorrect configuration in Wized** Double-check the request configuration in the **Requests panel**. Ensure the endpoint URL, HTTP method, headers, and body match the API requirements. - **CORS** Some APIs do not accept requests from browsers for security reasons. By default, Wized sends requests from the browser, which can cause issues in these cases. ### How to troubleshoot To determine if the request is failing before reaching the API: 1. **Check the logs** - If the request was not sent, you might see a `500 - Failed to Fetch` error in the **data store panel** under the "States" tab. 2. **Review your request configuration** - Ensure the endpoint URL, HTTP method, headers, and body are correctly set in the **Requests panel**. 3. **Verify API availability** - Visit the API provider’s status page or check online for service interruptions. 4. **Use secrets or native integrations** - If the API blocks direct browser requests, use the [Secrets](/data-store/secrets) feature in Wized to send requests through our servers. - Alternatively, check if Wized has a **native integration** with the service, as these integrations manage API communication securely. --- ## When the request returns an error If the request is successfully sent but the API returns an error, the response will include an **HTTP status code** that indicates what went wrong. ### Common API error codes - **400 Bad Request** – The request is malformed or missing required data. - **401 Unauthorized** – Authentication is required but missing or incorrect. - **403 Forbidden** – The request is valid, but you lack the necessary permissions. - **404 Not Found** – The requested resource does not exist. - **500 Internal Server error** – The API encountered an unexpected issue. View code [list](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status) ### How to troubleshoot 1. **Check the HTTP status code** - In the **data store panel**, look at the status code in the "Statuses" tab. - Use API documentation or online references to understand the meaning of the error. 2. **Examine the response body** - Some APIs provide detailed error messages inside the response body. - Check the **"Body" tab** in the data Store Panel for additional details. 3. **Consult the API documentation** - API documentation will clarify possible causes and solutions for specific errors.   # Intro to requests **Requests** allows your project to interact with external web services through REST APIs. This means you can send and receive data, enabling communication with backends, databases, third-party services, payment gateways, and more. <iframe width="100%" height="400" src="https://www.youtube.com/embed/D395eqwWt_c?si=ZllOMISiXdjR9uew" frameborder="0" allowfullscreen></iframe>   # Memberstack Requests The [Memberstack](https://www.memberstack.com/) integration enables granular control over user access to your application, as well as managing user data and subscriptions. ## How to use Memberstack in Wized Memberstack can be used as a standalone App in Wized or in conjunction with Memberstack's `<script>` tag. ### Using Memberstack as a standalone Wized App vs with Memberstack's `<script>` tag Memberstack can be integrated into Webflow without using Wized, just by [installing their `<script>` tag on the site](https://docs.memberstack.com/hc/en-us/articles/7253090768539-Installing-Memberstack-in-Webflow). When doing so, Memberstack provides built-in functionalities like: - [Gating content and pages](https://docs.memberstack.com/hc/en-us/articles/7402927868443-Gated-Content): Memberstack automatically redirects unauthenticated users or users who are not allowed to access a specific content or pages defined in the Memberstack Dashboard. - [Creating sign in and sign up forms](https://docs.memberstack.com/hc/en-us/articles/7424129003547-Create-a-Signup-Form-in-Webflow#form): Memberstack takes care of the user authentication process by simply adding a few attributes to your site. When integrating Memberstack into a Wized app, you get more granular controls by getting access to all [the Memberstack frontend API methods](https://developers.memberstack.com/docs/dom-front-end-package), such as: - Retrieving App and Plans data. - Retrieving Member data. - Authenticating users using email and password, OAuth or Magic links. - Linking and unlinking providers. - Resetting passwords. - Launching plans purchase flows. - And much more. As mentioned, you can use Memberstack as a standalone Wized App or in conjunction with Memberstack's `<script>` tag. The main difference between the two is that when using Memberstack as a standalone Wized App, you will have to implement the content gating and user authentication functionalities yourself using [Requests](../../index.md) and [Events](../../global-events/index.md). If you use Memberstack's `<script>` tag, you will still be able to create Requests to interact with Memberstack's API. ### How to create a Memberstack Request To create a Memberstack Request, you will first need to create an App in your Wized project: 1. Go to My Apps 2. Click the `+` button at the top of the panel. 3. Add a name for your app for later reference, i.e. `Memberstack`. 4. Pick the `Memberstack` option. 5. <a id="memberstack_config_public_key"></a> Add the Memberstack [Public Key](https://docs.memberstack.com/hc/en-us/articles/11916762087835-Memberstack-API-Keys), which can be found in the Memberstack Dashboard. Once you have created the Memberstack App, you can start creating Requests to interact with the Memberstack API. ## Request methods ### Get app Retrieves information about your application. #### Response The response contains an App object with the following properties: ```typescript type App = { id: string; // The unique identifier for your application. name: string; // The name of your application. mode: string; // The operational mode of your application (e.g., "sandbox"). plans: Plan[]; // An array of plans available for your application. customFields: Array<{ order: number; label: string; key: string; hidden: boolean; }>; // An array of custom fields associated with your application. captchaRequired: boolean; // A boolean indicating whether captcha is required. authProviders: Array<{ provider: string; icon: string; name: string; }>; // An array of authentication providers for your application. additionalAuthMethods: Array<string>; // Additional authentication methods available for your application. branding: { logo: string; colors: { lightMode: { primaryButton: string; }; }; // Branding options for your application. }; ``` ### Get plan Retrieves information about a specific plan in your application. #### Parameters - `Plan ID`: The unique identifier for the plan. #### Response The response contains a Plan object with the following properties: ```typescript type Plan = { id: string; // The unique identifier for the plan. name: string; // The name of the plan. description: string; // A brief description of the plan. priority: number; // The priority of the plan. prices: Array<{ id: string; amount: number; interval: string; name: string; type: string; status: string; currency: string; }>; // An array of pricing options for the plan. }; } ``` ### Get all plans Retrieves information about all plans in your application. #### Response The response contains an array of [Plan objects](#get-plan). ### Get member Retrieves the currently logged in Member. #### Response The response contains a Member object with the following properties: ```typescript type Member = { id: string; // The unique identifier for the member. verified: boolean; // A boolean indicating whether the member is verified. profileImage: string; // The URL of the member's profile image. auth: { email: string; hasPassword: boolean; providers: Array<{ provider: string; }>; }; // The authentication details of the member. loginRedirect: string; // The URL to redirect the member to after login. stripeCustomerId: string; // The Stripe customer ID associated with the member. createdAt: string; // The date and time the member was created. metaData: object; // Additional metadata associated with the member. customFields: object; // Custom fields associated with the member. permissions: Array<string>; // Permissions associated with the member. planConnections: Array<{ id: string; active: boolean; status: string; planId: string; type: string; payment: { amount: number; currency: string; status: string; lastBillingDate: number | null; nextBillingDate: number | null; cancelAtDate: number | null; priceId: string; } | null; }>; // An array of plan connections associated with the member. }; ``` ### Get member JSON Retrieves a JSON object representing the member's information. #### Response The response contains a JSON object representing the member's information. ### Update member JSON Updates the JSON data for the currently logged-in member. For best practices, we suggest first retrieving the current member's JSON using [Get member JSON](#get-member-json). Then, make necessary changes before applying the update. This approach ensures all existing data is preserved while new data is added or existing data is modified. #### Parameters - `JSON`: The updated JSON data for the member. #### Response The response contains a JSON object representing the updated member's information. ### Update member data Updates the member's data such as the custom fields. #### Parameters - `Custom Fields`: The new custom fields for the member. Each custom field has two parameters: - `Key`: The key of the custom field. - `Value`: The new value for the custom field. #### Response The response contains the updated [Member object](#get-member). ### Update member email Updates the email address of the currently logged-in member. #### Parameters - `Email`: The new email address for the member. #### Response The response contains the updated [Member object](#get-member). ### Update member password Updates the password of the currently logged-in member. #### Parameters - `Old Password`: The member's current password. - `New Password`: The new password for the member. #### Response The response contains the updated [Member object](#get-member). ### Send verification email Sends a verification email to the currently logged-in member. #### Response The response contains a `success` property indicating whether the email was sent successfully. ### Sign in (email + password) Authenticates a member using their email and password. #### Parameters - `Email`: The member's email address. - `Password`: The member's password. #### Response The response contains a [Member object](#get-member) representing the authenticated member and a `tokens` property containing the authentication tokens. ```typescript type SignInResponse = { member: Member; // The authenticated member. tokens: { accessToken: string; // The access token. type: string; // The token type. expires: number; // The token expiration timestamp. }; }; ``` ### Sign up (email + password) Creates a new member account using their email and password. #### Parameters - `Email`: The member's email address. - `Password`: The member's password. - `Custom Fields`: The custom fields for the new member. Each custom field has two parameters: - `Key`: The key of the custom field. - `Value`: The value for the custom field. - `Metadata`: Additional metadata for the new member. Each metadata field has two parameters: - `Key`: The key of the metadata field. - `Value`: The value for the metadata field. - `Plans`: The plan connections for the new member. Note that only free plans can be added during signup. Each plan connection has: - `Plan ID`: The unique identifier for the plan. #### Response The response contains the same data as the [Sign in (email + password)](#sign-in-email--password) method. ### Send sign in email (passwordless) Sends a magic link to the member's email address for passwordless sign-in. This is the first step in the passwordless sign-in process, proceeded by the [Sign in (passwordless)](#sign-in-passwordless) method. #### Parameters - `Email`: The member's email address. #### Response The response contains a `success` property indicating whether the email was sent successfully. ### Sign in (passwordless) Authenticates a member using a magic link sent to their email address. This method is used after the member has received the magic link from the [Send sign in email (passwordless)](#send-sign-in-email-passwordless) method. #### Parameters - `Email`: The member's email address. - `Passwordless Token`: The magic link token received in the email. #### Response The response contains the same data as the [Sign in (email + password)](#sign-in-email--password) method. ### Send sign up email (passwordless) Sends a magic link to the member's email address for passwordless sign-up. This is the first step in the passwordless sign-up process, proceeded by the [Sign up (passwordless)](#sign-up-passwordless) method. #### Parameters - `Email`: The member's email address. #### Response The response contains a `success` property indicating whether the email was sent successfully. ### Sign up (passwordless) Creates a new member account using a magic link sent to their email address. This method is used after the member has received the magic link from the [Send sign up email (passwordless)](#send-sign-up-email-passwordless) method. #### Parameters - `Email`: The member's email address. - `Passwordless Token`: The magic link token received in the email. - `Custom Fields`: The custom fields for the new member. Each custom field has two parameters: - `Key`: The key of the custom field. - `Value`: The value for the custom field. - `Metadata`: Additional metadata for the new member. Each metadata field has two parameters: - `Key`: The key of the metadata field. - `Value`: The value for the metadata field. - `Plans`: The plan connections for the new member. Note that only free plans can be added during signup. Each plan connection has: - `Plan ID`: The unique identifier for the plan. #### Response The response contains the same data as the [Sign in (email + password)](#sign-in-email--password) method. ### Set password Sets a password for the currently logged-in member. This method allows a member to establish a password for their account, typically after signing up using a passwordless method. #### Parameters - `Password`: The member's password. #### Response The response contains the same data as the [Sign in (email + password)](#sign-in-email--password) method. ### Sign in (provider) Authenticates a member using a third-party authentication provider. #### Parameters - `Provider`: The name of the authentication provider. #### Response The response contains the same data as the [Sign in (email + password)](#sign-in-email--password) method. ### Sign up (provider) Creates a new member account using a third-party authentication provider. #### Parameters - `Provider`: The name of the authentication provider. - `Custom Fields`: The custom fields for the new member. Each custom field has two parameters: - `Key`: The key of the custom field. - `Value`: The value for the custom field. - `Plans`: The plan connections for the new member. Note that only free plans can be added during signup. Each plan connection has: - `Plan ID`: The unique identifier for the plan. #### Response The response contains the same data as the [Sign in (email + password)](#sign-in-email--password) method. ### Connect provider Links a third-party authentication provider to the currently logged-in member's account. #### Parameters - `Provider`: The name of the authentication provider. #### Response The response contains a list of providers to which the member is currently connected. ### Disconnect provider Unlinks a third-party authentication provider from the currently logged-in member's account. #### Parameters - `Provider`: The name of the authentication provider. #### Response The response contains a list of providers to which the member is currently connected. ### Send reset password email Sends a password reset email to the member's email address. This is the first step in the password reset process, proceeded by the [Reset password](#reset-password) method. #### Parameters - `Email`: The member's email address. #### Response A message indicating that if the provided email exists in the system, a reset password email has been sent. ### Reset password Resets the password for a member using a magic link sent to their email address. This method is used after the member has received the magic link from the [Send reset password email](#send-reset-password-email) method. #### Parameters - `Token`: The magic link token received in the email. - `New Password`: The new password for the member. #### Response The response contains a `success` property indicating whether the email was sent successfully. ### Sign out Signs out the currently logged-in member. #### Response The logged out member's id. ### Purchase plan Initiates the purchase process for a specific plan with a checkout flow. #### Parameters - `Price ID`: Identifier for the price of the plan that the member will purchase. Can be found in the Memberstack Dashboard. - `Cancel URL`: The URL to redirect the member to if they cancel the purchase process. - `Success URL`: The URL to redirect the member to after a successful purchase. - `Auto Redirect`: A boolean indicating whether to automatically redirect the member to the success URL after a successful purchase. #### Response If `Auto Redirect` is set to false, the response will contain the stripe checkout URL. ### Open customer portal Launches the Stripe customer portal for the currently logged-in member. #### Parameters - `Configuration`: An optional [configuration object](https://docs.stripe.com/api/customer_portal/configurations/object) for the customer portal. - `Return URL`: The URL to redirect the member to after they have finished using the customer portal. - `Auto Redirect`: A boolean indicating whether to automatically redirect the member to the return URL after they have finished using the customer portal. #### Response If `Auto Redirect` is set to false, the response will contain the stripe customer portal URL. ### Add free plan Adds a free plan to the currently logged-in member's account. #### Parameters - `Plan ID`: The unique identifier for the plan. #### Response The response contains the updated [Member object](#get-member). ### Remove free plan Removes a free plan from the currently logged-in member's account. #### Parameters - `Plan ID`: The unique identifier for the plan. #### Response The response contains the updated [Member object](#get-member).   # Request Props Request props are dynamic parameters that enable you to customize and reuse requests efficiently. By defining props, you can pass specific values to a request, making it adaptable to various scenarios. This flexibility is essential for creating dynamic and efficient API calls. <video controls src="https://media.wized.com/docs-v2/wized-request-props.mp4" title="Wized Request Props"></video> ## Defining Props To define props for a request: 1. Open the request configuration. 2. Add the required props in the **Props** section. 3. Specify the `name`, `defaultValue`, and whether the prop is `required`. ### Example: Defining Request Props Consider a request named `get_users_by_type`. Here, we define a prop `type` with a default value of `'admin'`. ![Defining request props](request-props.png) In the request filter, the `type` prop is accessed via the variable `p`, as shown below: ```javascript return p.type; ``` ![Using request props in request](request-props-filter.png) ### Data Store Key The **Data Store Key** is used to save dynamic responses when the request is executed. ![Setting data store key to save the response](request-props-datastore-key.png) > **Note:** If a data store key is not defined, requests may overwrite each other's responses, which will then be saved under `r.request_name`. ### Calling the Request When calling a request, you must provide the prop value. For example, to call the `get_users_by_type` request with `type` set to `'moderator'`, you would use: ```javascript return 'moderator'; ``` ![Filling prop values](calling-request-with-props.png) If simulated, the response will be saved to `r.save_to_moderator`. ![Data store example](data-store-response-example.png) ## Summary - **Props**: Enable dynamic and reusable requests. - **Data Store Key**: Ensures unique identification and caching of responses. - Always provide the required props when calling a request to ensure proper functionality.   # Intro to the body REST request The body of an API request is where you send structured data directly to the server. This is particularly useful for create, update, or modify operations and is most commonly used with the POST, PUT, and PATCH methods. ## When to use the body 1. **Methods for data transmission**: The body is primarily utilized in POST, PUT, and PATCH requests, which are designed to send data to the server. The data within the body contains the necessary details for the server to process and respond to your request. 2. **Large or structured data**: If your request involves transmitting substantial amounts of data or complex data structures (like arrays or objects), the body is the ideal space to include this information. It supports the JSON format, allowing detailed and hierarchical organization of data. 3. **Sensitive information**: For confidential data, such as user credentials or payment details, it is advisable to use the body in conjunction with secure transmission protocols like HTTPS. Storing sensitive information in the body enhances security by keeping it separate from the URL, thereby reducing its exposure. ::: tip Always consult the API documentation to understand the specific requirements for the data you are sending, including expected formats and structures. ::: ## Structure of the body In Wized, the body content is structured as key-value pairs, offering greater versatility compared to traditional URL parameters. Here’s a breakdown: - **Key**: This acts as the identifier for the data being sent, such as "username" or "address". - **Value**: The value can be of any data type or format, including text, numbers, arrays, or objects. Additionally, the value can dynamically retrieve data from your application through the [function editor](../../function-editor/). ## URL Parameters VS body When determining whether to use URL parameters or the body in your requests, it is essential to refer to the API documentation for specific guidelines. Here are some general recommendations: - **Use URL parameters**: Opt for URL parameters when handling simple filters or search queries, particularly in GET requests where data can be appended directly to the URL. - **Use the body**: Choose the body when dealing with complex data structures, sensitive information, or when making requests with POST, PUT, or PATCH methods that necessitate structured content. ::: info information By adhering to these guidelines, you can ensure that your API requests are both effective and compliant with the specifications of the external services you are interacting with. :::   # Intro to the request headers Headers are essential components of your API requests. They operate as key-value pairs, delivering crucial information about the request to the server. Headers utilize a structured format where each key signifies a specific instruction or metadata, and its corresponding value provides the necessary information. ## How headers work Headers are defined by the following components: - **Key**: A string identifier that specifies the type of metadata (e.g., `Content-Type` or `Authorization`). - **Value**: The data related to that key, which may include tokens, MIME types, or specific formatting instructions. When you construct an API request, you add headers to ensure that the API receives all the necessary metadata, instructions, and security credentials to process your request effectively. ## When to use headers 1. **Authentication**: Many APIs require headers for authentication purposes. This typically involves including tokens, API keys, or bearer tokens to verify the user's access. For instance, the `Authorization` header often contains a token essential for secure access. 2. **Specifying data format**: Headers can define the format of the data being sent or received. By using `Content-Type` headers, you can specify formats such as `application/json`, ensuring the API understands how to interpret the data structure. 3. **Additional metadata**: Headers allow for the inclusion of various types of metadata, such as preferred language (`Accept-Language`) or versioning (`Api-Version`). This capability helps the server tailor responses based on the specifics of your request. ## Common headers | Header | Description | | ----------------- | -------------------------------------------------------------------------------- | | `Content-Type` | Specifies the format of the data being sent, such as `application/json`. | | `Authorization` | Used for authentication, often including tokens (e.g., `Bearer <token>`). | | `X-Api-Key` | A custom header commonly used to securely pass API keys. | | `Accept` | Indicates the expected response format from the server, like `application/json`. | | `Accept-Language` | Specifies the preferred language for the response. | :::tip Note All API has its own requirements regarding headers and their expected values. Always consult the API documentation to confirm which headers are necessary and how to structure them correctly. This practice will ensure smooth integration and data handling in your Wized application. :::   # Rest request **Rest requests in Wized** allow you to connect your web application to any external service that supports REST APIs. This feature enables you to integrate a wide variety of third-party services ranging from payment gateways to data providers without being limited to the native integrations offered by Wized. ## Overview Rest Requests give you complete flexibility to create custom API integrations. Unlike native integrations that come with predefined methods, a Rest Request requires you to manually configure details such as the HTTP method, endpoint, headers, parameters, and body. This means you can connect to any RESTful service and tailor the request to meet your specific needs. <iframe width="100%" height="400" src="https://www.youtube.com/embed/bs6q__sv7_s?si=aN14dnX3Tjlgxz7n" frameborder="0" allowfullscreen></iframe>   # Methods - **GET:** This method retrieves information from the API. Use it when you want to access specific data, such as product details or a list of users. - **POST:** This method sends new data to the API, typically to create a new resource. Use it to submit information for the API to process and save. - **PUT:** This method completely replaces an existing resource with new data. Use it to edit an entire resource and save the updated version, which will overwrite the previous one. - **PATCH:** This method partially updates an existing resource, modifying only specific fields or properties. Use it for small adjustments to a resource without replacing the entire entity. - **DELETE:** This method removes a resource from the API. Use it when you want to eliminate a resource permanently. ::: tip Note Selecting the appropriate method depends on the action you intend to perform and the specifications outlined in the API documentation. Always refer to the documentation to determine the available methods and their correct usage. :::   # Intro to the parameters rest request URL Parameters are a vital feature that allows you to customize API requests by appending key-value pairs to the request URL. These parameters play a crucial role in filtering data, executing searches, and transmitting specific variables to an API. This is especially relevant in `GET` requests, where data is added directly to the URL. ## How URL parameters work In Wized, you can add URL parameters as key-value pairs to the base URL. For each parameter, you must define: - **Key**: A unique string identifier for the parameter. Note that this key cannot utilize dynamic data from the Function Editor. - **Value**: The value assigned to the key, which can incorporate dynamic data available in Wized, including cookies, variables, inputs, and more. ## Structure of URL parameters Parameters are added to the end of the base URL following a question mark (?). The structure is outlined as follows: - **Key-Value format**: Each parameter is formatted as `key=value`. - **Joining multiple parameters**: When you have multiple parameters, they are concatenated using the ampersand (`&`). ### Example: ```plaintext https://api.example.com/products?category=electronics&order=price_ascending ``` In this example: - **category** is the key, and **electronics** is its corresponding value. - **order** is another key, with **price_ascending** as its value. --- ::: tip Each API defines the specific parameters it accepts, their expected data types, and any mandatory values. Always refer to the API’s documentation to ensure you are configuring parameters accurately and providing the requisite data. :::   # Captcha Protection ## Overview Captcha protection helps prevent automated abuse and bot attacks on your Supabase authentication endpoints. ## Enabling Captcha in Supabase ### Prerequisites - A Supabase project - Access to your Supabase project's dashboard ### Steps 1. **Enable Captcha Protection** - Go to your Supabase Dashboard - Select your project - Navigate to the Auth section - Under Settings > Authentication > Bot and Abuse Protection > Enable CAPTCHA protection toggle 2. **Choose Your Captcha Provider** Supabase supports multiple providers: - **hCaptcha** - **Cloudflare Turnstile** 3. **Configure Your Provider** **For Cloudflare Turnstile:** - Sign up at [Cloudflare](https://www.cloudflare.com/) - Navigate to Turnstile in your dashboard - Create a new widget - Copy your **Site Key** For extra settings you can access the [Cloudflare Turnstile documentation](https://developers.cloudflare.com/turnstile) **For hCaptcha:** - Sign up at [hCaptcha.com](https://www.hcaptcha.com/) - Create a new site - Copy your **Site Key** For more information you can access the [hCaptcha documentation](https://docs.hcaptcha.com/) 4. **Set Up In Wized** - Access your Wized project from app.wized.com - Add an appropriately named variable; in this case it will be `supabase_captcha_token` - Configure your request to enable captcha and in the value use the Wized variable ![Supabase Sign Up Request With Captcha Enabled](request.png) 5. **Set Up In Webflow** **For Cloudflare Turnstile:** - In the `<head>` section of the page, add the Turnstile script: ```javascript <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> ``` - Add the widget element where the captcha will be placed, this can be a normal section element within a form ```html <div id="cf-turnstile"></div> ``` - Add the script to render the widget and assign a callback to get the captcha token and assign it to a Wized variable ```javascript const widgetId = turnstile.render("#cf-turnstile", { sitekey: "<YOUR-SITE-KEY>", callback: function (token) { Wized.data.v.supabase_captcha_token = token; }, }); ``` For more information on the client-side setup you can access the [full Cloudflare client-side setup documentation](https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/) **For hCaptcha:** - In the `<head>` section of the page, add the hCaptcha script: ```javascript <script src="https://js.hcaptcha.com/1/api.js" async defer></script> ``` - Add the widget element where the captcha will be placed, this can be a normal section element within a form ```html <div class="h-captcha" data-sitekey="YOUR_SITE_KEY" data-callback="onHcaptchaSuccess"></div> ``` > **_NOTE:_** > > The `data-sitekey` attribute should have the value of the site key copied from earlier > The `data-callback` attribute is the name of the function executed when the response from hCaptcha is successful - Add the script to render the widget and assign a callback to assign the captcha token value to the Wized variable specified earlier ```javascript function onHcaptchaSuccess(token) { Wized.data.v.supabase_captcha_token = token; } ```   # Create item <video src="https://media.wized.com/docs-v2/create_item.mp4" muted controls title="Adding an item to your Supabase table"></video> The `Create item` method is used to add a new item to your Supabase table. Here's how to do it: 1. **Specify the table**: Start by writing the name of the table to which you want to add an item. ![Specifying the table in Wized](select_table.png) ::: info NOTE **Return Inserted Data** option defaults to true and uncheck it if your RLS might block current user from reading data ::: ![The table name in the Supabase dashboard](../get-item/table_name.png) 2. **Prepare key-value pairs**: Think of these as labels and input fields. Each key matches a column in your table, and the value is the data you want to add to that column. ![Supabase table](supabase_table.png) 3. **Match keys to table headers**: Make sure the keys in your key-value pairs correspond to the headers (columns) in your table. ![Create Supabase Item](request_example.png) 4. **Set values for each key that you want to add**: The value part of each pair is the actual data you're adding to the table under that column. ![Adding multiple key-value pairs](multiple_fields.png) It's essentially like filling out a form where each field is a column in your table.   # Delete File The `Delete file` method is used to delete files from your Supabase bucket storage. To make a delete file request, follow these steps: 1. First, ensure you have a storage bucket on your Supabase app. <video src="https://media.wized.com/docs-v2/upload_file_1.mp4" controls loop muted title="Create storage bucket in Supabase"></video> 2. Open the request panel and click on the `+` button to add a new request. 3. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Delete file`. 4. Scroll downwards to fill in the bucket name and storage path of the file you want to delete. ![Delete file Supabase](delete_file_supabase.png)   # Delete item ![The selected method](method.png) The `Delete item` method allows you to delete a specific item from your Supabase table. <video src="https://media.wized.com/docs-v2/deleting_items.mp4" muted controls title="Deleting items from our Supabase database"></video> Here's how to use it: 1. **Specify the table**: Start by entering the name of the table from which you want to delete an item. ![The table name field in Wized](table_name_delete.png) ![The table name in the Supabase dashboard](../get-item/table_name.png) 2. **Add the record ID**: Next, provide the ID of the record that needs to be deleted. This ID can be a fixed value or a dynamic value from the Data Store. ![The record ID field](record_id_delete.png) Using this method, you will permanently delete an item from your database.   # Download File The `Download File` method is used to download files directly from your Supabase bucket storage. This method is particularly useful for files that are stored in private buckets, as it allows you to access them securely. To make a request to get the file URL, follow these steps: 1. First, ensure you have a storage bucket on your Supabase app. <video src="https://media.wized.com/docs-v2/upload_file_1.mp4" controls loop muted title="Create storage bucket in Supabase"></video> 2. Open the request panel and click on the `+` button to add a new request. 3. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Download File`. ![Download File Supabase](download-file.png) 4. Fill in the bucket name and storage path of the file you want to download. By default Supabase Download File requests only return the file as a [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) in the response data. If you want to automatically download the file to the user's browser, enable the `Trigger download?` option.   # Get File URL The `Get File URL` method is used to obtain the full URL paths to your file storage. To make a request to get the file URL, follow these steps: 1. First, ensure you have a storage bucket on your Supabase app. <video src="https://media.wized.com/docs-v2/upload_file_1.mp4" controls loop muted title="Create storage bucket in Supabase"></video> 2. Open the request panel and click on the `+` button to add a new request. 3. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Get File URL`. ![Get File URL Supabase](file_url_1.png) 4. Scroll downwards to fill in the bucket name and storage path of the file. You can then choose whether to download it or just display it. ![Get File URL Supabase](file_url_2.png)   # Get Item ![Get item](get_item.png) The `Get Item` method lets you fetch a specific item from your Supabase table. <video src="https://media.wized.com/docs-v2/getting_items.mp4" muted controls title="Getting an item from your Supabase database"></video> Here's how to use it: 1. **Specify the table**: Start by writing the name of the table from which you want to retrieve an item. ![Specifying a table](tasks.png) ![Table name](table_name.png) 2. **Add the record ID**: Next, provide the ID of the record you're looking for. This ID can be a fixed value or it can be a dynamic value from the Data Store. ![Selecting record ID](record.png) 3. **Select columns (optional)**: This step allows you to choose which columns to include in your response, so you get only the information you need. ![The select columns section](select_columns.png) ![Response with selected columns](selected_columns.png) Think of this method as asking a librarian for a book; you specify which book you need, and the method retrieves it for you.   # Get list ![The get list method in Wized](get_list.png) The `Get list` method lets you fetch a list of items from your Supabase table. Think of this method as asking someone for a map with lots of files in it. <video src="https://media.wized.com/docs-v2/get_list.mp4" muted controls title="Getting a list of items from your Supabase database"></video> ## Basic configuration ### Specify the table Start by writing the name of the table from which you want to retrieve an item. ![specifying a table](../get-item/tasks.png) ![table name](../get-item/table_name.png) That's all you need. The rest of the options covered in the sections below are optional. If you're facing authorization issues, make sure that your [RLS policies](https://supabase.com/docs/guides/auth/row-level-security) are correctly set. ### Subscribe to real-time (optional) ![Subscribe to real-time option](../../supabase/realtime_data.png) When you're configuring Get List requests, you have the option to subscribe to real-time updates. This feature keeps your app in sync with your database changes instantly, ensuring your data is always up-to-date. Whether it's an added to-do item, an updated profile, or a deleted comment, the changes will be reflected in your app instantly. This feature is great for building instant messaging apps, live collaboration features, or just ensuring that the data is in sync across devices at all times. ### Limit the query to a range (optional) ![Pagination options](pagination.png) Limit the query result by starting at an offset (Range From) and ending at the offset (Range To). Only records within this range are returned. The Range From and Range To values are 0-based and inclusive: a range from 1 to 3 will include the second, third and fourth rows of the query. ### Limit items (optional) ![Limiting response items](limit_items.png) Specify the maximum number of items in the response. ### Count results (optional) ![Setting up count](count.png) Supabase offers a `count` function to tally rows in a table. Choose from: - **Exact**: Slow, precise count using `COUNT(*)`. - **Planned**: Quick, approximate count using Postgres statistics. - **Estimated**: Combines exact count for small numbers and planned count for larger numbers. #### Include only count Selecting `include only count` returns only the item count, omitting data. Ideal when only the count is needed. ### Sort by column (optional) ![Setting up sorting](sorting.png) Arrange response items by a specified column in ascending (A-Z) or descending (Z-A) order. ### Filter type (optional) ![Setting up the filter type](filter_type.png) Choose between AND and OR logic for filters: - **AND**: All conditions must be true. - **OR**: Any one of the conditions must be true. ## Filter (optional) ![Filter by ID](filter.png) Set up optional filters for your requests. Add one or more filters, each consisting of a column, operator, and value. ### Column Choose a table column for your filter condition. ### Operator Options include: - **Equals to**: Finds items exactly matching the specified value. - **Does not equal**: Selects items that are different from the specified value. - **Greater than**: Retrieves items with values higher than the specified one. - **Greater than or equal to**: Includes items equal to or higher than the specified value. - **Less than**: Picks items with values lower than the specified one. - **Less than or equal to**: Gets items equal to or lower than the specified value. - **Matches pattern**: Searches for items matching a specified pattern (like a format or sequence). - **In**: Finds items that match any of the values in a provided list. - **Contains**: Selects items that include the specified value within them. - **Text search**: Performs a search for the specified text within items. Check the [Supabase filter documentation](https://supabase.com/docs/reference/javascript/using-filters) for more information about each operator, including examples. ### Value Define the filter criteria. For example, with the column as tasks, operator as Contains, and value as 'cook', the response will list tasks containing 'cook'. ### Do not match filter Match only rows that do not satisfy the filter criteria. Check the [Supabase "Don't match the filter" documentation](https://supabase.com/docs/reference/javascript/not) for more information.   # Get Session The `Get Session` method is used to retrieve the details of the current local session using Supabase. To make a request to get the session details, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Get session`. ![Get Session Supabase](get_session.png)   # Get User The `Get User` method is used to retrieve the details of the currently logged-in user using Supabase. To make a request to get a user, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Get user`. ![Get User Supabase](get_user_supabase.png)   # Supabase Requests Wized has a native Supabase integration, which makes it easy to make requests to your Supabase instance. This integration acts as a wrapper for the Supabase JavaScript client library, @supabase/supabase-js, enabling you to interact seamlessly with your Supabase instance. Our integration provides a rich set of functionalities to interact with your Postgres database, manage user accounts, handle file uploads, and much more. You can even subscribe to [real-time updates](#real-time). <iframe width="700" height="520" src="https://www.youtube.com/embed/ieMmHyhfJs4?si=krr3AHCYS1ol-6hJ" title="Wized + Supabase " frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> ## How to get started? To start using Supabase in your web app, you first need to add it to My Apps. ![Adding Supabase to My Apps in Wized](supabase_my_apps.png) There, you will be prompted to provide the following information: - <a id="supabase_url"></a> Supabase URL: Your unique Project URL - <a id="supabase_api_key"></a> Supabase key: Your API key — `anon` `public` ![Supabase API Settings](supabase_info.png) You can find this information in your Supabase dashboard, under Project Settings > API. ## Supabase Methods Wized offers a variety of Supabase methods to cater to your data management needs. These methods are designed to simplify your interactions with the database, user management, and real-time updates. Here’s a quick overview of the methods available: - **[Get Session](./get-session/)**: Access session information. - **[Get User](./get-user/)**: Retrieve user details. - **[Update User](./update-user/)**: Update user information. - **[Sign Up](./sign-up/)**: Register new users. - **[Sign In with Password](./sign-in-password/)**: Authenticate users with a password. - **[Sign In with Magic Link](./sign-in-magic-link/)**: Provide passwordless authentication. - **[Sign In with OAuth](./sign-in-oauth/)**: Enable OAuth-based authentication. - **[Sign Out](./sign-out/)**: Log out the user. - **[Send Password Reset](./send-password-reset/)**: Assist users with password recovery. - **[Get Item](./get-item/)**: Retrieve a specific item from your database. - **[Get List](./get-list/)**: Fetch a list of items based on certain criteria (supports real-time subscriptions). - **[Unsubscribe Real-Time](./unsubscribe-real-time/)**: Unsubscribe from real-time updates. - **[Create Item](./create-item/)**: Add new items to your database. - **[Update Item](./update-item/)**: Modify existing items in your database. - **[Delete Item](./delete-item/)**: Remove items from your database. - **[Invoke Function](./invoke-function/)**: Invoke a Supabase Edge Function. - **[Upload File](./upload-file/)**: Upload a file to your file storage. - **[Get File URL](./get-file-url/)**: Get the URL of one of your files. - **[Download File](./download-file/)**: Download a file from your file storage. - **[Delete File](./delete-file/)**: Delete a file from your file storage. ## Real-time ![Subscribe to real-time option](realtime_data.png) When you're configuring Get List requests, you have the option to subscribe to real-time updates. This feature keeps your app in sync with your database changes instantly, ensuring your data is always up-to-date.   # Invoke Function The `Invoke Function` method is used to run [edge functions](https://supabase.com/docs/guides/functions) in Supabase. Edge functions allow you to add more customization to your Supabase app. ::: info NOTE **Edge Functions** and **Database Functions** in Supabase are not the same. Wized only invokes edge functions at the moment. ::: To make a request to invoke an edge function, follow these steps: 1. First, ensure you have an edge function deployed to your Supabase app. Following [Supabase's guide](https://supabase.com/docs/guides/functions/quickstart) will allow you to get a sample edge function in your functions menu. ![Invoke function Supabase](invoke_function_1.png) 2. Open the request panel and click on the `+` button to add a new request. 3. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under method, choose `Invoke function`. ![Invoke function Supabase](invoke_function_2.png) 4. Scroll downwards to fill in the edge function name and choose the type of method to access it, whether it's `GET`, `POST`, `PUT`, `PATCH`, or `DELETE`. ![Invoke function Supabase](invoke_function_3.png) 5. (Optional) Fill in headers if the edge function requires them. ![Invoke function Supabase](invoke_function_4.png) 6. (Optional) Fill in the body key-value pair if the edge function requires a body. This is the case with `POST`, `PUT`, `PATCH`, and `DELETE` HTTP method types. ![Invoke function Supabase](invoke_function_5.png)   # Send Password Reset The `Send password reset` method is used to send an email to users to reset their passwords. To make a request to send a password reset, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign password reset`. ![Password reset Supabase](password_reset_1.png) 3. Scroll downwards under the Email menu and fill in the email (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)) and the redirect URL. ![Sign in Magic Link Supabase](password_reset_2.png)   # Sign in with Magic Link The `Sign in with magic link` method is used to authenticate an existing user to your application and it can even create new users if desired. There are two modes of signing in with a magic link: 1. **Email**: in this mode, we use an email. 2. **Phone**: in this mode, we use a phone number. ## Sign in with magic link using an email To make a request to sign in a user using an email and password, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign in with Magic Link`. ![Sign in with Magic Link Supabase](magic_link_1.png) 3. Scroll downwards to select the mode as `Email`: under the Email menu, fill in the email (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)); fill in the password and the redirect URL. ![Sign in Magic Link Supabase](magic_link_2.png) ## Sign in with magic link using a phone number 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign in with password`. ![Sign in with Magic Link Supabase](magic_link_1.png) 3. Scroll downwards to select the mode as `Phone`: under the phone menu, fill in the phone number (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)); fill in the password and choose the channel. ![Sign in with Magic Link Supabase](magic_link_3.png) ::: info NOTE **Should create user** is used to create a new user in case the email or phone number receiving the link happens not to be a user in your database. :::   # Sign in with OAuth provider The `Sign in with OAuth Provider` method is used to authenticate a user to your site using a widely used third-party application providing OAuth. To make a request to authenticate a user using OAuth, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign in with OAuth`. ![Sign in with OAuth Supabase](sign_in_oauth_1.png) 3. Scroll downwards to select the provider and add a redirect URL. ![Sign in with OAuth Supabase](sign_in_oauth_2.png) 4. Add the scopes required for your app. ![Sign in with OAuth Supabase](sign_in_oauth_3.png) ::: info NOTE **Scopes** vary widely based on the provider used, and each provider has a sample of scopes on their respective documentation. An example is Facebook's scopes listed here: [https://developers.facebook.com/docs/permissions](https://developers.facebook.com/docs/permissions) ::: ## How to sign in with OAuth inside the Configurator The Configurator Canvas is an iframe that proxies the live site. Because of that, some OAuth2 flow are not supported inside the configurator. However, you can still "simulate" signing in with OAuth by following these steps: 1. Publish the project and open the live site. 2. Sign in with the OAuth provider following the regular flow. 3. Open the developer tools and [access the local storage](https://developer.chrome.com/docs/devtools/storage/localstorage). 4. Copy the key-value pair that starts with `sb-` and paste it into the configurator's local storage, under `https://server.wized.com`. 5. Refresh the configurator canvas, and you should be signed in. This will allow you to see the logged-in state of the user in the configurator. Here's a video showing the process: <video src="https://media.wized.com/docs-v2/supabase-local-storage-oauth.mp4" controls loop muted title="Supabase oauth local storage auth token key copying"></video>   # Sign in with password The `Sign in with password` method is used to authenticate an existing user to your application. There are two modes of signing in with a password: 1. **Email**: in this mode, we use an email. 2. **Phone**: in this mode, we use a phone number. ## Sign in using an email and password To make a request to sign in a user using an email and password, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign in with password`. ![Sign in Supabase](sign_in_password_1.png) 3. Scroll downwards to select the mode as `Email`: under the Email menu, fill in the email (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)); fill in the password and the redirect URL. ![Sign in Supabase](sign_in_password_2.png) ## Sign in using a phone number and password 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign in with password`. ![Sign in Supabase](sign_in_password_1.png) 3. Scroll downwards to select the mode as `Phone`: under the phone menu, fill in the phone number (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)); fill in the password and choose the channel. ![Sign in Supabase](sign_in_password_3.png)   # Sign Out The `Sign Out` method is used to log out an authenticated user using Supabase. To make a request to sign out, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign Out`. ![Sign Out Supabase](sign_out.png)   # Sign up The `Sign up` method is used to add a new user to your Supabase database. There are two modes of signing up: 1. **Email**: In this mode, we use an email and a password. 2. **Phone**: In this mode, we use a phone number and a password. ## Sign up using an email and password To make a request to sign up a user using an email and password, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign Up`. ![Create Supabase Email Sign Up Request](sign_up_request_1.png) 3. Scroll downwards to select the mode as `Email`: Under the Email menu, fill in the email (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)); fill in the password and the redirect URL. ![Create Supabase Email Sign Up Request](sign_up_request_2.png) ::: info NOTE **Email Redirect URL** is optional. Its use is to take users to the page specified after confirming their email address. ::: 4. You can then optionally add some user metadata. ![Create Supabase Email Sign Up Request](sign_up_request_4.png) ## Sign up using a phone number and password 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Sign Up`. ![Create Supabase Phone Sign Up Request](sign_up_request_1.png) 3. Scroll downwards to select the mode as `Phone`: Under the phone menu, fill in the phone number (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)); fill in the password and choose the channel. ![Create Supabase Phone Sign Up Request](sign_up_request_3.png) 4. You can then optionally add some user metadata. ![Create Supabase Phone Sign Up Request](sign_up_request_4.png)   # Unsubscribe Real-Time The `Unsubscribe realtime` method is used to stop your client (web app) from receiving real-time updates from Supabase. To make a request to unsubscribe from real-time updates, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Unsubscribe realtime`. ![Unsubscribe realtime Supabase](unsubscribe_realtime_1.png) 3. Scroll downwards under the Unsubscribe menu and choose the request from which you want to stop listening to real-time updates. ![Unsubscribe realtime Supabase](unsubscribe_realtime_2.png)   # Update Item <video src="https://media.wized.com/docs-v2/updating_item.mp4" muted controls title="Updating an item in your Supabase database"></video> The `Update Item` method is used to update an existing item in your Supabase table. Here's how to do it: 1. **Specify the table**: Start by writing the name of the table in which you want to update an item. ![Specifying a table](../get-item/tasks.png) ![Table name](../get-item/table_name.png) 2. **Add record ID**: Next, provide the ID of the record that needs to be updated. This ID can be a fixed value or it can be a dynamic value from the Data Store. ![Specifying the record ID of the item that needs to be updated](record_id.png) 3. **Prepare key-value pairs**: Think of these as labels and input fields. Each key matches a column in your table, and the value is the data you want to update in that column. ![Supabase table](../create-item/supabase_table.png) 4. **Match keys to table headers**: Make sure the keys in your key-value pairs correspond to the headers (columns) in your table. ![Updating one key-value pair with dynamic data](data.png) Updating an item in Supabase is like updating your profile details on Twitter.   # Update User The `Update User` method is used to change the details of a user using Supabase. To make a request to update a user, follow these steps: 1. Open the request panel and click on the `+` button to add a new request. 2. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Update user`. ![Update User Supabase](update_user_1.png) 3. Scroll downwards: under the Email menu, fill in the new email (or use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md)); fill in the new password and the new phone number. ![Update User Supabase](update_user_2.png) ::: info NOTE **Email**, **Phone**, and **Password** fields are optional. ::: 4. You can then optionally add some user metadata. ![Create Supabase Email Sign Up Request](../sign-up/sign_up_request_4.png)   # Upload file The `Upload file` method is used to upload files to your Supabase bucket storage. To make an upload file request, follow these steps: 1. First, ensure you have a storage bucket on your Supabase app. <video src="https://media.wized.com/docs-v2/upload_file_1.mp4" controls loop muted title="Create storage bucket in Supabase"></video> 2. Open the request panel and click on the `+` button to add a new request. 3. Fill in an appropriate name for the request and select the Supabase app to be used for the request. Then, under the method, choose `Upload file`. ![Upload file Supabase](upload_file_2.png) 4. Scroll downwards to fill in the bucket name and storage path of the file. Use an [input field](../../../data-store/inputs.md) or [form field](../../../data-store/forms.md) to choose the file to be uploaded. ![Upload file Supabase](upload_file_3.png)   > [!WARNING] > This method requires the **Wized WordPress plugin** to be installed and active on your WordPress site. [Download the plugin →](/platforms/wordpress/releases)   # WordPress Requests ## What is a WordPress Request? A WordPress request is a way to integrate your application with WordPress using the WordPress REST API. You can retrieve data, create new posts, update existing ones, or delete content with WordPress as your backend. WordPress requests support custom post types and [ACF (Advanced Custom Fields)](https://www.advancedcustomfields.com/) out of the box. To use ACF fields, you need to have the ACF plugin installed on your WordPress site. You can use WordPress to just fetch data without any authentication (for public content like blog posts), or you can use the authentication system built by Wized so users can create accounts, sign in, and read/write data based on permissions set up in the Wized configurator. To create WordPress requests you will need to first create a WordPress Wized App. ## How to Create a WordPress App ### 1. Go to My Apps Begin by going to the 'My Apps' panel in Wized. 1. Click the `+` button at the top of the panel. 2. Add a name for your app for later reference, i.e. `WordPress App`. 3. Pick the `WordPress` option. 4. Enter your WordPress **Site URL** (e.g. `https://mysite.com`). ![WordPress App Panel](./../../apps/wordpress.webp) ### 2. Add Admin Credentials To allow Wized to communicate with your WordPress site, provide the following as secrets: 1. **Admin Username or Email** — the username or email of a WordPress admin account. 2. **Admin Password** — the password for that admin account. These credentials are securely stored and only used server-side when calling WordPress API endpoints. End users authenticate with their own username/email and password through Wized's built-in JWT authentication layer. > [!TIP] > We recommend creating a separate WordPress admin account dedicated to Wized, rather than using your personal admin credentials. ![Wordpress Wized Admin](./../../apps/wordpress-wized-admin.webp) ### 3. Install Wized Plugin After setting up your admin credentials, you can install the **Wized WordPress Plugin** on your WordPress site. The plugin enables the following features: - **Email Verification** — required for the [Send email verification](./methods/authentication/send-email-verification/index.md) and [Verify email](./methods/authentication/verify-email/index.md) methods. - **Advanced filtering and sorting** — required for complex ACF-based filtering and sorting in **Get posts** requests. > [!NOTE] > If you don't plan to use email verification or advanced ACF filtering/sorting, you can skip this step. However, installing the plugin is recommended as it unlocks more features now and in the future. The plugin is designed with security in mind, it exposes additional functionality exclusively to WordPress administrators, so regular users cannot access or abuse these capabilities. You can install the plugin directly from the **WordPress Plugin** panel in the Wized configurator. Once installed and activated, the panel will show a green **Active** status: ![Wized WordPress Plugin — Active](./images/plugin-installed.webp) If the plugin is not yet installed or activated on your site, you will see a **Plugin not detected** warning: ![Wized WordPress Plugin — Not detected](./images/plugin-not-detected.webp) ### 4. WordPress ACF Setup When setting up Advanced Custom Fields (ACF) for your post type, configure the following settings: #### General Settings Navigate to **Advanced Settings** and ensure the **Author** checkbox is enabled in the **General** tab. This is required to manage posts with authentication. ![Enable author](./images/post-type-enable-author.webp) #### REST API Settings In the **Rest API** tab, enable **Show In Rest API** so ACF fields are accessible through the WordPress REST API. ![Enable rest api](./images/post-type-show-in-rest.webp) ### 5. Configure your request #### Create a new request, and add basic info - Name your request, i.e. `get_blog_posts` - Add your request to a folder (optional) - Select your WordPress App from the dropdown #### Select method You will need to select one of the methods for a specific functionality: **Authentication methods:** - [Sign up](./methods/authentication/sign-up/index.md): Create a new user with email, username, and password - [Sign in](./methods/authentication/sign-in/index.md): Sign in a user with username and password - [Get user](./methods/authentication/get-user/index.md): Get the currently authenticated user - [Request password reset](./methods/authentication/request-password-reset/index.md): Send a password reset email - [Password reset](./methods/authentication/password-reset/index.md): Reset password with a new password - [Send email verification](./methods/authentication/send-email-verification/index.md): Send a verification email to confirm a user's email address _(requires Wized WordPress plugin)_ - [Verify email](./methods/authentication/verify-email/index.md): Verify a user's email using the token from the verification link _(requires Wized WordPress plugin)_ **Posts methods:** The WordPress integration currently supports: - **Post** - Standard WordPress posts without Advanced Custom Fields - **Post with ACF** - Posts with Advanced Custom Fields (requires ACF plugin to be installed) When using "Post with ACF", the ACF plugin must be installed and activated. This enables you to treat posts as a table with custom fields defined in ACF, allowing you to create, update, and filter posts based on any custom fields you've configured. All post methods include a **Post Type** dropdown that lets you select which type of content to work with (e.g. `Post`, `Post with ACF`, or any custom post type). When a custom post type is selected, ACF (Advanced Custom Fields) become available for create and update operations, and ACF filtering is available for list operations. - **Get posts**: Get a list of posts with filtering, sorting, and pagination - **Get post**: Get a single post by ID - **Create post**: Create a new post (with optional ACF fields for custom post types) - **Update post**: Update an existing post (with optional ACF fields for custom post types) - **Delete post**: Delete a post ### 4. Permissions For post methods, you can configure who can access the data by setting **Permissions** and optionally **Roles**. ![Request permissions](./images/request-permissions.webp) #### Permission Levels - **Allow Any**: Any user (authenticated or not) can perform this operation. When selected, the Roles field is not shown. - **Authenticated**: Only authenticated users can perform this operation. When selected, you can additionally specify which WordPress roles are allowed to access the data. - **Owner**: Only the owner (creator) of the content can perform this operation. When selected, the Roles field is not shown. #### Roles When **Authenticated** is selected as the permission level, you can further restrict access by specifying which WordPress roles are allowed: - **Subscriber**: Users with "Subscriber" role - **Contributor**: Users with "Contributor" role - **Author**: Users with "Author" role - **Editor**: Users with "Editor" role - **Administrator**: Users with "Administrator" role > [!NOTE] > By default, each user created from Wized has the "Subscriber" role in WordPress, so **Subscriber** is selected by default when choosing roles. #### Require Email Verification When the permission level is set to **Authenticated** or **Owner**, you can enable the **Require Email Verification** checkbox to block users whose email address has not yet been verified from performing that action. > [!WARNING] > This option requires the **Wized WordPress plugin** to be installed on your WordPress site. To implement the email verification flow, use the [Send email verification](./methods/authentication/send-email-verification/index.md) and [Verify email](./methods/authentication/verify-email/index.md) methods. #### Use Cases and Recommendations **Allow Any** is ideal for: - Waiting list forms - Newsletter subscription forms - Contact forms - Public content that doesn't require authentication - Any operation where you want to collect data from anonymous users **Owner** is the default selection for: - **Get**, **Update**, and **Delete** operations: Ensures users can only access and modify their own content - Use this when you want to restrict data access to only the content creator **Authenticated with Roles** is recommended for: - **Create** operations: Control which user roles can create new content on WordPress - Content that should only be visible to logged-in users with specific permissions - Operations that require role-based access control   ## Get user method With the "Get user" method, you can fetch the currently authenticated user's profile. This is typically called when the app loads for the first time to restore the user session from a stored token. ### Response The response will contain the authenticated user's profile data. If the token is invalid or expired, the request will fail. ![Get user request](../../../images/get-user.webp)   ## Password reset method With the "Password reset" method, you can implement the final step of the password reset flow in your application. After the user clicks on the link from the email sent by the "Request password reset" method, they will be redirected to your specified page with a reset token in the query parameters. This method uses that token to set the new password. ### Parameters - **Password**: This is a required [function field](/function-editor/) where you can return the user's new password. > [!NOTE] > The reset token is automatically extracted from the URL query parameters. > Make sure the user lands on this page from the password reset email link. ![Password reset request](../../../images/reset-password.webp)   ## Request password reset method With the "Request password reset" method, you can send a password reset email to the user. An email with a reset link will be sent to the user's email address. The link will redirect the user to the page you specify in the redirect URL parameter. ### Parameters - **Email**: This is a required [function field](/function-editor/) where you can return the user's email address. - **Redirect URL**: This is a required [function field](/function-editor/) where you can return the Full URL of the page where the user will input their new password. The reset token will be appended as a query parameter. ![Request password reset](../../../images/request-password-reset.webp)   ## Send email verification method  With the "Send email verification" method, you can send a verification email to a user so they can confirm their email address. An email containing a verification link will be sent to the user. The link redirects them to the URL you specify, with a `verification-token` query parameter automatically appended. ### Parameters - **Verification URL**: This is a required [function field](/function-editor/) where you can return the full URL of the page where the user will land to complete email verification. The verification token will be appended automatically as a `verification-token` query parameter. ### Response On success, an email containing the verification link will be sent to the user's registered email address. ### Flow This method is typically used as part of a two-step email verification flow: 1. Call **Send email verification** after sign-up (or whenever you want to trigger a verification email). 2. The user clicks the link in their email and lands on your verification page. 3. On that page, call the [**Verify email**](../verify-email/) method — the verification token is automatically read from the URL.   ## Sign in method With the "Sign in" method, you can implement login functionality in your application. The user will be authenticated using their username/email and password. ### Parameters - **Username**: This is a required [function field](/function-editor/) where you can return the user's username or email. - **Password**: This is a required [function field](/function-editor/) where you can return the user's password. ### Response On successful sign-in, an authentication token will be stored. The response will contain the user data. ![Sign in with props](../../../images/sign-in-with-props.webp)   ## Sign up method With the "Sign up" method, you can implement user registration functionality in your application. A new WordPress user will be created with the provided email, username, and password. ### Parameters - **Username**: This is a required [function field](/function-editor/) where you can return the desired username. - **Email**: This is a required [function field](/function-editor/) where you can return the user's email address. - **Password**: This is a required [function field](/function-editor/) where you can return the user's password. ### Response On successful sign-up, the user will be automatically signed in and an authentication token will be stored. The response will contain the user data. ![Sign up](../../../images/sign-up.webp)   ## Verify email method  With the "Verify email" method, you can complete the email verification flow by validating the token the user received in their verification email. This method should be called on the page the user lands on after clicking the verification link. The verification token is automatically extracted from the `verification-token` URL query parameter — no additional configuration is needed. ### Parameters This method has no manually configured parameters. The verification token is read automatically from the URL. ### Response On success, the user's email address is marked as verified in WordPress. ### Flow This method is the second step of the email verification flow: 1. Call [**Send email verification**](../send-email-verification/) to send the verification email to the user. 2. The user clicks the link and lands on your verification page. 3. Call **Verify email** on that page — the token is automatically picked up from the URL. ### Require email verification on requests You can enforce that a user's email must be verified before they can perform certain actions (e.g. creating or reading posts). This is configured via the **Require Email Verification** checkbox in the **Permissions** section of any post request.   ## Create Post method With the "Create item" method, you can create a new post item. When selecting a post type, you can choose between: - **Post** — a standard WordPress post with native fields only - **Post with ACF** — a post that includes both standard WordPress fields and ACF (Advanced Custom Fields) fields ### Main Parameters - **Post Type**: This is a required dropdown field where you can choose between: - **Post** — creates a standard WordPress post with native fields only - **Post with ACF** — when selected, a second dropdown will appear listing all custom post types that have ACF fields configured. Select the desired custom post type from that dropdown. ![Post type selector](../../../images/post-with-acf-selector.webp) ### Permissions You can select who can create items. You can select from: - **Allow Any**: Any user can create an item - **Authenticated**: Any authenticated user can create an item - **Subscriber**: Users with at least "Subscriber" role can create an item - **Contributor**: Users with at least "Contributor" role can create an item - **Author**: Users with at least "Author" role can create an item - **Editor**: Users with at least "Editor" role can create an item - **Administrator**: Only users with "Administrator" role can create an item ![Permissions](../../../images/request-permissions.webp) --- ## Post When you select a standard post type, the standard WordPress post fields will be listed as [function fields](/function-editor/), where you can specify the value for each one. ### Post Fields Common fields include: - **Title**: The post title - **Content**: The post content - **Excerpt**: A short summary of the post - **Status**: The post status (e.g. `publish`, `draft`). Note: Items are automatically saved as `private`. Use with caution only if you understand the permission implications, as retrieval, editing, and deletion are managed through the admin account and permissions you've configured. ![Post fields](../../../images/native-posts-fields.webp) --- ## Post with ACF When you select a post type that has ACF (Advanced Custom Fields) configured, both the standard WordPress post fields and the ACF fields will be listed as [function fields](/function-editor/) in a single unified view. ### Post Fields The same standard WordPress post fields are available: - **Title**: The post title - **Content**: The post content - **Excerpt**: A short summary of the post - **Status**: The post status (e.g. `publish`, `draft`). Note: Items are automatically saved as `private`. Use with caution only if you understand the permission implications, as retrieval, editing, and deletion are managed through the admin account and permissions you've configured. ### ACF Fields All ACF fields configured for this post type will appear below the standard fields as [function fields](/function-editor/), where you can specify the value for each one. ![Post with ACF fields](../../../images/acf-posts-fields.webp)   ## Delete Post method With the "Delete item" method, you can delete an existing post item. ### Main Parameters - **Post Type**: This is a required dropdown field where you can choose between: - **Post** — deletes a standard WordPress post - **Post with ACF** — when selected, a second dropdown will appear listing all custom post types that have ACF fields configured. Select the desired custom post type from that dropdown. - **Post Type ID**: This is a required [function field](/function-editor/) where you can return the ID of the item you want to delete. ![Post type selector](../../../images/post-with-acf-selector.webp) ### Permissions You can select who can delete the data. By default, **Owner** is selected, this means only the user who created a post can delete it, which is the recommended setting in most cases. You can select from: - **Owner**: Only the user who created the post can delete it _(default, recommended)_ - **Allow Any**: Any user can delete the data - **Authenticated**: Any authenticated user can delete the data - **Subscriber**: Users with at least "Subscriber" role can delete the data - **Contributor**: Users with at least "Contributor" role can delete the data - **Author**: Users with at least "Author" role can delete the data - **Editor**: Users with at least "Editor" role can delete the data - **Administrator**: Only users with "Administrator" role can delete the data ![Owner permission](../../../images/owner-permission.webp) ![Permissions](../../../images/request-permissions.webp) > [!NOTE] > Deleting an item is permanent. Make sure you have the correct item ID before performing this operation. ![Delete item](../../../images/delete-acf-item.webp)   ## Update Post method With the "Update item" method, you can update an existing post item. When selecting a post type, you can choose between: - **Post** — a standard WordPress post with native fields only - **Post with ACF** — a post that includes both standard WordPress fields and ACF (Advanced Custom Fields) fields ### Main Parameters - **Post Type**: This is a required dropdown field where you can choose between: - **Post** — updates a standard WordPress post with native fields only - **Post with ACF** — when selected, a second dropdown will appear listing all custom post types that have ACF fields configured. Select the desired custom post type from that dropdown. - **Post Type ID**: This is a required [function field](/function-editor/) where you can return the ID of the item you want to update. ![Post type selector](../../../images/post-with-acf-selector.webp) ### Permissions You can select who can edit the data. By default, **Owner** is selected, this means only the user who created a post can edit it, which is the recommended setting in most cases. You can select from: - **Owner**: Only the user who created the post can edit it _(default, recommended)_ - **Allow Any**: Any user can edit the data - **Authenticated**: Any authenticated user can edit the data - **Subscriber**: Users with at least "Subscriber" role can edit the data - **Contributor**: Users with at least "Contributor" role can edit the data - **Author**: Users with at least "Author" role can edit the data - **Editor**: Users with at least "Editor" role can edit the data - **Administrator**: Only users with "Administrator" role can edit the data ![Owner permission](../../../images/owner-permission.webp) ![Permissions](../../../images/request-permissions.webp) --- ## Post When you select a standard post type, the standard WordPress post fields will be listed as [function fields](/function-editor/), where you can specify the new value for each one. ### Post Fields Common fields include: - **Title**: The post title - **Content**: The post content - **Excerpt**: A short summary of the post - **Status**: The post status (e.g. `publish`, `draft`). Note: Items are automatically saved as `private`. Use with caution only if you understand the permission implications, as retrieval, editing, and deletion are managed through the admin account and permissions you've configured. ![Post fields](../../../images/native-posts-fields.webp) --- ## Post with ACF When you select a post type that has ACF (Advanced Custom Fields) configured, both the standard WordPress post fields and the ACF fields will be listed as [function fields](/function-editor/) in a single unified view. ### Post Fields The same standard WordPress post fields are available: - **Title**: The post title - **Content**: The post content - **Excerpt**: A short summary of the post - **Status**: The post status (e.g. `publish`, `draft`). Note: Items are automatically saved as `private`. Use with caution only if you understand the permission implications, as retrieval, editing, and deletion are managed through the admin account and permissions you've configured. ### ACF Fields All ACF fields configured for this post type will appear below the standard fields as [function fields](/function-editor/), where you can specify the new value for each one. ![Post with ACF fields](../../../images/update-acf-item.webp)   ## Get Post method With the "Get item" method, you can retrieve a single post item by its ID. ### Main Parameters - **Post Type**: This is a required dropdown field where you can choose between: - **Post** — retrieves a standard WordPress post - **Post with ACF** — when selected, a second dropdown will appear listing all custom post types that have ACF fields configured. Select the desired custom post type from that dropdown. - **Post ID**: This is a required [function field](/function-editor/) where you can return the ID of the item you want to retrieve. ![Post selector](../../../images/post-with-acf-selector.webp) ### Permissions You can select who can retrieve the data. By default, **Owner** is selected, this means only the user who created a post can retrieve it, which is the recommended setting in most cases. You can select from: - **Owner**: Only the user who created the post can retrieve it _(default, recommended)_ - **Allow Any**: Any user can retrieve the data - **Authenticated**: Any authenticated user can retrieve the data - **Subscriber**: Users with at least "Subscriber" role can retrieve the data - **Contributor**: Users with at least "Contributor" role can retrieve the data - **Author**: Users with at least "Author" role can retrieve the data - **Editor**: Users with at least "Editor" role can retrieve the data - **Administrator**: Only users with "Administrator" role can retrieve the data ![Owner permission](../../../images/owner-permission.webp) ![Permissions](../../../images/request-permissions.webp)   ## Get Posts List method With the "Get list items" method, you can retrieve and filter multiple items from a specified post type. When selecting a post type, you can choose between: - **Post** — retrieves standard WordPress posts with native fields only - **Post with ACF** — retrieves posts that include both standard WordPress fields and ACF (Advanced Custom Fields) fields ### Main Parameters - **Post Type**: This is a required dropdown field where you can choose between: - **Post** — retrieves standard WordPress posts - **Post with ACF** — when selected, a second dropdown will appear listing all custom post types that have ACF fields configured. Select the desired custom post type from that dropdown. ![Post type selector](../../../images/post-with-acf-selector.webp) ### Permissions You can select who can retrieve the data. By default, **Owner** is selected, this means only the user who created a post can retrieve it, which is the recommended setting in most cases. You can select from: - **Owner**: Only the user who created the post can retrieve it _(default, recommended)_ - **Allow Any**: Any user can retrieve the data - **Authenticated**: Any authenticated user can retrieve the data - **Subscriber**: Users with at least "Subscriber" role can retrieve the data - **Contributor**: Users with at least "Contributor" role can retrieve the data - **Author**: Users with at least "Author" role can retrieve the data - **Editor**: Users with at least "Editor" role can retrieve the data - **Administrator**: Only users with "Administrator" role can retrieve the data ![Owner permission](../../../images/owner-permission.webp) ![Permissions](../../../images/request-permissions.webp) ### Pagination Parameters You can paginate the results with the following params: - **Page size**: The number of items returned in each request. - **Offset**: The page number to fetch. Use this to implement pagination by incrementing the offset value. ![Pagination](../../../images/posts-pagination.webp) --- ## Post When you select a standard post type, you can sort and filter items using native WordPress post fields. ### Sort Parameters You can add multiple sort conditions and each condition will need to have params: - **Field Type**: A dropdown to select whether to sort by a native post field. - **Sort by**: This is a required dropdown field where you can select the native post field to apply sorting. - **Order**: This is a required dropdown field with values: `Ascending`, `Descending`. - **Sort type**: An optional dropdown to specify how the field value should be interpreted for sorting (e.g. `Alphabetical`, `Numeric`, `Date`). ### Filter Parameters You can add multiple filters on standard WordPress fields. Each filter will need to have params: - **Field**: This is a required dropdown field where you can select the post field to filter by. - **Condition**: This is a required dropdown field with values: `Equal`, `Does not equal`, `Includes`, `Does not include`. - **Value**: This is a required [function field](/function-editor/) where you can return the value to filter with. ![Post filter](../../../images/post-native-filter.webp) ![Post filter condition options](../../../images/native-posts-filter-condition-options.webp) --- ## Post with ACF When you select a post type with ACF configured, you can sort and filter items using both native WordPress fields and ACF meta fields. ### Sort Parameters You can add multiple sort conditions and each condition will need to have params: - **Field Type**: A dropdown to select whether to sort by a `Native Field` or an `ACF Field`. - **Sort by**: This is a required dropdown field where you can select the field to apply sorting. - **Order**: This is a required dropdown field with values: `Ascending`, `Descending`. - **Sort type**: An optional dropdown to specify how the field value should be interpreted for sorting (e.g. `Alphabetical`, `Numeric`, `Date`). ![ACF sort](../../../images/post-acf-sort.webp) ### Filter Parameters You can add multiple filters on standard WordPress fields. Each filter will need to have params: - **Field**: This is a required dropdown field where you can select the post field to filter by. - **Condition**: This is a required dropdown field with values: `Equal`, `Does not equal`, `Includes`, `Does not include`. - **Value**: This is a required [function field](/function-editor/) where you can return the value to filter with. ### ACF Filter Parameters You can add multiple filters on ACF (Advanced Custom Fields) meta fields. Each filter will need to have params: - **Field**: This is a required dropdown field where you can select the ACF field to filter by. - **Condition**: This is a required dropdown field with values: `Equal`, `Does not equal`, `Includes`, `Does not include`, `In (array)`, `Not in (array)`. - **Value**: This is a required [function field](/function-editor/) where you can return the value to filter with. ![ACF filter condition options](../../../images/acf-fields-filtering-condition-options.webp)   # Put all the pieces together ## Introduction It’s time to turn all this architecture into a functional web application! At this stage, we will bring together all the elements we have explored so far: the type of application, the key functionalities, the technological stack, and the workflow. With Wized as your ally, you will transform your architecture into an interactive and dynamic experience for your users. ## Designing the Workflow The first step in bringing your app to life is defining the workflow – the sequence of steps users will follow to interact with your site and achieve their goals. A well-designed workflow ensures an intuitive and fluid experience, which increases your users’ satisfaction and engagement. - **Identify key tasks:** What key actions do you want your users to take? Sign up, log in, search for products, make a purchase, manage their profile, etc.? - **Create a visual map:** Use flowcharts or prototyping tools to visualize the sequence of steps users will follow to complete each task. - **Define interactions:** What UI elements will you need at each step? What actions and events will trigger the transition from one step to another? - **Consider different scenarios:** What happens if the user makes a mistake? What alternative options will you offer? How will you handle exceptional cases? ## Implementing logic with Wized Once you have the workflow clear, it's time to implement logic and interactivity in Wized. For each step of the flow, identify: - **The elements involved:** What buttons, forms, lists, or other elements of your Webflow website will be needed at each step? - **Actions to perform:** What should happen when the user interacts with each element? Submit a form, make a request to an API, show or hide content, etc.? - **The events that will trigger the actions:** What specific events, such as clicks, value changes, or form submissions, will trigger the actions? - **Element settings:** How should elements change in response to actions or data received from APIs? Use settings like Set Text , Set Visibility , Render List , and Set Style to customize the appearance and behavior of your elements. - **Conditional Logic:** Use the Function Editor to define conditions and validations that control the flow of your application and personalize the user experience. ## Connecting to the backend and external APIs If your application requires a backend or uses external services, it is important to understand how data will flow between these components and your frontend in Wized. - **API Requests:** Use Wized API requests to send and receive data from your backend or external services. - **Data Storage:** If you use a backend, make sure that data is stored and managed securely and efficiently in your database. - **Data Processing:** Use the Function Editor to process and transform data received from APIs or the backend before displaying it to the user or using it in your logic.   # Choosing the stack Selecting the right technology stack is a critical step in building a robust web application. Your technology stack defines the tools and services that will power every aspect of your project from the user interface to the backend and data management. A well chosen stack ensures that your application is functional, scalable, secure, and easy to maintain. ## The role of wized in your technology stack Wized empowers the frontend of your application by providing low-code tools for interactivity, logic, and dynamic data handling. It seamlessly connects your Webflow designs to various external services, but it is not a replacement for a robust backend or database. Instead, Wized complements these components by managing the logic and user interactions on the client side. ## Why is choosing the right technology stack important? - **Functionality:** Every technology has its own strengths and limitations. Choosing the right combination allows you to implement the features you need efficiently. - **Scalability:** As your application grows, the stack must support more users and increased data loads without sacrificing performance. - **Ease of development and maintenance:** Select technologies that align with your team’s skills, so you can develop and update your project smoothly over time. - **Cost efficiency:** Evaluate the expenses associated with each technology, including licensing, hosting, and maintenance fees, to ensure your project stays within budget. - **Community and support:** Opt for technologies with active communities and comprehensive support resources, which can be invaluable when troubleshooting or seeking best practices. ## Key components of your technology stack ### Frontend: - **Webflow:** A visual tool for designing and building your app's user interface. - **Wized:** The low-code platform that adds interactivity, custom logic, and dynamic data integration to your Webflow projects. ### Backend (optional): - **SaaS platforms:** Services like Firebase, Supabase, or Xano offer complete backend solutions with databases, user authentication, and other essential functionalities managed in the cloud. - **Custom backend:** Develop your own backend using technologies such as Node.js, Python, or Ruby if you require full control or specialized features. - **Automation tools:** Tools like Zapier enable you to connect different applications and automate workflows without building a full backend. ### Database: - **Relational databases:** Options like PostgreSQL or MySQL are ideal for structured data with complex relationships. - **NoSQL databases:** Solutions like MongoDB or Firebase provide flexibility and scalability for unstructured or rapidly changing data. - **Integrated SaaS databases:** Platforms such as Airtable or Supabase offer easy-to-use databases that integrate directly via APIs. ### External APIs: - **API integrations:** Connect to various external services to add functionality—such as payment processing, notifications, maps, or social media features—without building these capabilities from scratch. ## When to consider using a backend Even though Wized handles complex frontend logic, a backend might be necessary when: - **Data security and privacy:** Securely managing sensitive information, like passwords or financial data. - **Scalability:** Supporting a high volume of users or data requires server-side resources. - **Data centralization:** Ensuring consistency when multiple users access or modify shared data. - **Resource-Intensive tasks:** Offloading heavy computations or processing from the user's browser. - **Integrations with other systems:** Facilitating communication with external systems, such as CRMs or inventory management systems. ### Backend options - **SaaS (software as a service):** Platforms like Firebase, Supabase, or Xano offer ready-to-use backend solutions. - **Custom backend:** Building your own backend offers maximum flexibility but requires advanced technical knowledge. - **Automation tools:** Tools like Zapier can integrate simple functionalities and connect your app with other services without heavy programming. ## Considerations when choosing your stack When selecting your technology stack, consider: - **Scalability:** Can the solution grow with your application? - **Cost:** What are the financial implications of each component? - **Ease of Use and integration:** Does the technology align with your team’s skills and integrate well with other tools? - **Security:** How well does the solution protect your data and that of your users? - **Support and community:** Is there sufficient documentation and community support available? By carefully choosing your technology stack, you establish a strong foundation for your project. This strategic approach ensures that your application can evolve, remain maintainable, and deliver a seamless user experience as it grows.   # Software architecture Software architecture is the comprehensive blueprint of your entire web application. It encompasses not only the dynamic features managed by Wized such as workflows, data flows, and interactive UI updates but also the structure and integration of external systems like databases, third-party APIs, and backend services. ## Why is a well-defined architecture important? A clear and well-planned software architecture offers several benefits: - **Clarity and Organization:** It provides a structured roadmap for development, helping you understand how each component interacts with the others. This clarity minimizes confusion and makes collaboration easier. - **Scalability:** A robust architecture is designed to grow. It allows you to add new features, integrate additional services, and handle increased user demand without major overhauls. - **Performance and security:** Thoughtful design ensures that data flows efficiently between systems while protecting sensitive information. This leads to better performance and a more secure application. - **Efficient troubleshooting:** With a clear architectural blueprint, you can quickly identify where issues may be occurring. Understanding the dependencies between components helps you diagnose and resolve problems faster. - **Future-Proofing your project:** By planning your architecture with both current needs and future growth in mind, you create a flexible foundation that can adapt to evolving requirements and new technologies. ## Planning your architecture Before starting development, take the time to plan your project’s architecture thoroughly. Consider the following steps: 1. **Define Your project goals:** Clarify what you want to achieve. Identify the key features, user interactions, and external systems required for your application. 2. **Map Out the components:** Create a visual diagram or flowchart that outlines: - The **frontend** design (using Webflow) and its user interface. - The **dynamic logic** handled by Wized (such as requests, events, and workflows). - The **backend systems** (APIs, databases, third-party services) that provide data and functionality. 3. **Identify interactions and dependencies:** Understand how data flows between different parts of your system. Determine which components need to react to changes in others. For example, a successful login request might update user data, which in turn triggers a navigation event. 4. **Plan your workflows:** Define the sequence of actions that should occur in response to events. Workflows might include: - User interactions (e.g., form submissions or button clicks) - API requests and responses - Conditional logic to update UI elements or variables 5. **Consider future growth:** Ensure that your design allows for easy integration of new features or services. A modular approach helps you add or modify components without disrupting the entire system. ## The Unified approach By combining the strengths of Wized’s reactive features with a solid overall architecture, you create an application where every component—from the frontend visuals to the backend data interactions—works in harmony. This unified approach ensures that: - Changes in one area (like an API response or user input) immediately propagate through the system. - The application remains flexible, scalable, and easy to maintain. - You can build complex, automated workflows without needing extensive coding knowledge. Taking the time to plan and structure your software architecture lays the groundwork for a successful, resilient web application that can evolve with your needs.   # Setting up your first project ## Getting started ### 1. Create your account on Wized - Go to [Wized](https://app.wized.com/) and create a free account. --- ### 2. Create your first project - Inside the Wized dashboard, click on the [`New Project`](https://app.wized.com/new) button. --- ### 3. Setting up Wized with Webflow #### Staging URL ::: details Click to expand - Paste the URL of your Webflow staging domain (example.webflow.io). [More info here](https://help.webflow.com/hc/en-us/articles/33961419650067-Webflow-staging-subdomain) ![staging-domain](staging-domain.png) ::: #### Project name ::: details Click to expand - Choose a unique and descriptive name for your project. ::: #### Wized script ::: details Click to expand 1. Copy the script provided by Wized and paste it into the `<head>` section of your Webflow project. ![embed-code](embed-code.png) 2. In Webflow, go to the Website Settings panel. ![settings-project](settings-project.png) 3. Look for the `Custom Code` section. ![settings-overview](settings-overview.png) 4. Paste the Wized script into the `<head>` section. 5. Save changes and publish your site. 6. Click the `Create project` button to finalize. ![create-project](create-project.png) ::: ### 4. Managing your project in Wized configurator - View a canvas of your website inside the [Wized configurator](/wized-configurator/). - This interactive version allows you to experiment and add features in real-time. --- ### 5. Adding the Wized attribute - Add the [Wized attribute](/start-here/getting-started/wized-attribute) to specific elements in Webflow. - Only elements with this attribute can be used for functionalities, actions, or events.   # Wized attribute The Wized attribute is essential for setting up elements on your Webflow website within the Wized configurator. By adding this attribute to any element, the Wized configurator can identify and manage the elements you want to customize, allowing you to add specific settings and behaviors. ## Adding the Wized attribute ::: details **Step by step guide** 1. **Select the element** - Identify in `Webflow` the element to which you want to add the Wized Attribute. ![elements-nav](elements-nav.png) 2. **Go to the element settings tab** - Navigate to the Settings tab for the selected element. ![element-settings](element-settings.png) 3. **Custom attributes section** - Locate the Custom Attributes section. ![custom-attribute](custom-attribute.png) 4. **Add a new attribute** - Use one of the supported keys [`wized`, `wized-cloak`, or `wized-loader`](#types-of-wized-attributes). ::: ## Types of Wized attributes ### **Wized attribute** - The fundamental attribute for making an element interactive. - Enables Wized configurator to recognize and manage the element dynamically. #### Example: ![example_wized_attribute](example_wized_attribute.png) ::: tip Note Assign a unique value as the element name. This value is crucial within Wized for identifying the specific element and adding the appropriate settings. ::: --- ### **Wized cloak attribute** - Prevents elements from flashing or displaying unstyled content during initial page load. **Watch the implementation guide** <video controls src="https://media.wized.com/docs-v2/preventing-content-flashes-with-wized-cloak-attribute.mp4" title="Preventing content flashes with wized cloak attribute" preload="none"></video> ##### Code Snippet: ```html <style> [wized-cloak] { display: none; } </style> ``` --- ### **Wized loader attribute** - Used for elements functioning as **page load loader**. - Ensures visual feedback when processing a request. #### Code snippet: ```html <style> [wized-loader] { display: flex; } </style> ``` #### Example: ![custom-attribute](custom-attribute.png) ::: tip Note Use this attribute only for page loaders. For other loaders (e.g., after user actions), use a visibility setting instead. :::   # 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](/requests/) 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 [requests](/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: ::: tip Note asdsa For more information, please [click here](/requests/). :::   # Booleans `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:** ```javascript let userLoggedIn = true; if (userLoggedIn) { console.log('Welcome back!'); } else { console.log('Please log in.'); } ```   # 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.   # 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.   # 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.   # 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.   # Introduction ## 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 **Using logical operators:** ```javascript 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 **Using the ternary operator:** ```javascript let age = 18; let canVote = age >= 18 ? 'You can vote' : 'You cannot vote'; console.log(canVote); ```   # Wized 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.   # 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).   # 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.   # Start here ## What is Wized? <iframe width="100%" height="400" src="https://www.youtube.com/embed/0p3Ya38Jkvo?si=NXQhBhiQcZgqRNq_" frameborder="0" allowfullscreen></iframe> Wized serves as an intelligent layer on top of your [Webflow](https://webflow.com/) website, allowing you to add advanced functionality and custom logic without the need to write complex JavaScript code. It facilitates the connection between your Webflow website and the WebApps world. You don't need to be a advance developer to create dynamic and customized WebApps. Wized provides a visual, intuitive, and secure environment to create functionalities such as: - [Connecting your website to external APIs](https://docs.wized.com/requests/) - [Interactivity in your UI elements](https://docs.wized.com/elements/) - [Add events to your website](https://docs.wized.com/global-events/) - [Adding custom logic](https://docs.wized.com/function-editor/) ## How does it work? Wized takes your website created in Webflow as a base, allowing you to choose any element from your site to add specific events or actions in response to your end users' interactions. This enables you to dynamically modify the CSS properties of your elements in real time, execute any type of event such as calling an API to send or receive data, or simply run any type of complex logic in JavaScript through our function editor. ## Why choose Wized? - **Simplicity without sacrificing power**: Say goodbye to the complexities of traditional coding. Wized offers an intuitive interface, enabling your team to incorporate advanced features into your website without requiring extensive programming skills. For more on getting started, visit our [Setup Guide](/start-here/getting-started/). - **Accelerate development**: Achieve advanced functionality in a fraction of the time it would typically take to code from scratch. - **Seamless Webflow integration**: Wized integrates directly with your Webflow projects, allowing your team to leverage existing designs and enhance interactivity without starting from scratch. Explore the [Initial configuration](https://docs.wized.com/getting-started/#first-steps) to see how it works. - **Flexibility and customization**: With Wized, your team has full control over application behavior. Create custom interactions, connect to external APIs, manage data, and much more. - **Effortless collaboration**: Wized facilitates collaboration between designers and developers, enabling seamless integration between visual design and application logic. ## Who should use Wized? Wized is a powerful and adaptable platform designed for a wide range of users, including designers and developers. It empowers individuals at all levels of programming expertise to create sophisticated web applications efficiently. ### Webflow developers - **Unlock the full potential of Webflow websites:** Wized enhances your Webflow websites by allowing the integration of custom logic, dynamic interactions, and connections to external services. - **Effortlessly build complex products:** Wized equips you with the tools to implement advanced features such as dynamic forms, user memberships, authentication, and payment gateways—all without requiring extensive coding knowledge. - **Broaden your service offerings:** By utilizing Wized, you can create more sophisticated and interactive web applications for your clients. This not only adds significant value to your projects but also distinguishes you from your competitors. - **Optimize development times:** Wized streamlines the integration of advanced features, enhancing your efficiency and profitability within your agency. ### Entrepreneurs - **Develop interactive prototypes:** With Wized, you can quickly create functional and visually appealing Minimum Viable Products (MVPs) without the need for a full development team. - **Reduce costs and accelerate launch:** Wized allows you to build and validate your ideas at a fraction of the cost of hiring developers. This facilitates faster market entry and concept validation. - **Scale your project:** Wized is designed to grow with your project. As your needs evolve, you can seamlessly add new features and complexity without changing platforms. ### Agencies - **Enhance your service offerings:** By incorporating Wized into your workflow, you can deliver more complex and interactive web applications to your clients, thereby increasing the value of your projects and setting yourself apart from the competition. - **Streamline development times:** Wized enables rapid development of advanced functionalities, which leads to increased profitability for your agency. - **Flexibility and customization:** Wized allows you to tailor each project to the specific requirements of your clients, creating customized solutions without compromising efficiency. ### Full-Stack developers - **Save time and effort:** Wized simplifies the implementation of complex functionalities on the frontend, reducing the need for repetitive coding and infrastructure management. - **Seamless integration with Webflow:** Combine the visual design capabilities of Webflow with Wized’s logic and interactivity to build comprehensive and efficient web applications. - **Focus on business logic:** Spend more time enhancing your application's core logic rather than getting caught up in repetitive tasks. - **Flexibility and customization:** Adapt each project to meet your clients' unique needs, creating tailored solutions without sacrificing productivity. - **Accelerate development:** Achieve advanced functionalities significantly faster than traditional coding methods would allow.   # What can Wized bring to your project? With Wized, you can significantly elevate the functionality of your webApp. Here are several key capabilities: <iframe width="100%" height="400" src="https://www.youtube.com/embed/mj-C5DQfBw0?si=pG_uy0RWkzSK8DIC" frameborder="0" allowfullscreen></iframe> ## Advanced logic Wized allows you to integrate complex logic directly into your website. You can write JavaScript code using the [function editor](/function-editor/) to create custom dynamic behaviors. This allows you to provide a more interactive experience without requiring extensive programming skills. ## User management You can easily manage user registrations, logins, and access control through Wized. Which help ensure that only authorized users can access specific features or content. You can customize the user journey based on their roles, enhancing security and personalization. ## API integrations Wized enables you to [connect your website](/requests/) to third-party services via APIs rest. This capability allows you to fetch and display dynamic data, such as product listings or user information, directly from external sources. By integrating APIs like payment gateways or notification services, you can streamline processes such as handling transactions or sending user alerts. ::: tip Note For more information, please [click here](/requests/). ::: ## Database connections Connecting your website to external databases (e.g., [Firebase](https://firebase.google.com/), [Supabase](https://supabase.com/), [Xano](https://www.xano.com/), etc) is straightforward with Wized. You can store and retrieve user information, subscriptions, and other relevant data, ensuring that your application operates efficiently with real-time data updates. ::: tip Note For more information, please [click here](/software-architecture/choosing-the-stack#databases-and-data-management). ::: ## Payment processing Wized facilitates the integration of secure payment gateways, allowing you to manage subscriptions and process payments seamlessly. You can respond to payment events, update user subscription statuses, and send notifications based on successful or failed transactions. ## Automated workflows You can set up automated workflows that trigger actions based on specific events within your webApp. For example, you can automatically send welcome emails to new users or notify administrators upon certain activities, thereby enhancing operational efficiency. ## Customized user experiences Wized’s conditional logic capabilities allow you to personalize the user experience. By tailoring content and functionality according to user data. ## What kind of projects can I create? You can create any type of web project that requires interactivity, custom logic, and connection to external services. From simple websites with advanced functionality to complex web applications. ### SaaS Build web applications that offer services to multiple users via a subscription. Think of project management tools, email marketing platforms, accounting software, or even your own video streaming platform. Wized lets you create the logic necessary for your users to interact with your application, register, log in, access specific features, and much more. #### How does Wized help you? - **Control access and navigation:** Implement authentication and authorization systems so that only registered users can access certain areas or functionalities of your SaaS. Use Wized’s conditional logic to show or hide elements, redirect users to different pages based on their role, or customize the content they see. - **Manage user data and subscriptions:** Connect Wized to an external database (such as Firebase, Airtable, or Xano) to store user information, subscriptions, usage data, and any other information relevant to your app. Use API requests to interact with the database and display dynamic data in your Webflow frontend. - **Process payments and manage subscriptions:** Integrate payment gateways like Stripe to securely handle subscriptions and recurring payments. Use settings and events in Wized to respond to successful or failed payments, update subscription status, and send automatic notifications to users. - **Create automated workflows:** Set up actions that run automatically in response to specific events, such as sending a welcome email when a new user signs up or notifying admins when a payment is made. - **Personalize the user experience:** Use conditional logic and data stored in Wized to tailor the content and functionality of your SaaS to each user, providing a more relevant and personalized experience. #### What else do you need? - **An external database:** This is needed to store user information, subscriptions, usage data, and any other relevant information for your application. [Learn more about external databases](/software-architecture/choosing-the-stack#databases-and-data-management) - **An authentication service:** To manage user registration, login, and access control. - **A payment platform (if applicable):** To handle subscriptions and recurring payments. - **Other external services:** Depending on the specific functionalities of your SaaS, you may need to integrate other APIs, such as email services, push notifications, or file storage. ### Marketplaces You are able to build a complete online store where your customers can browse products, add them to their cart, make payments, and receive notifications about their orders. Wized lets you create the logic and interactions needed to manage the entire checkout process, from product viewing to order confirmation. #### How does Wized help you? - **Dynamic product catalog:** Display your products in an organized and attractive way on your website. Create filters and search engines so your users can find items according to their preferences. - **Interactive shopping cart:** Allows users to add and remove products from the cart, calculate the purchase total in real time, and apply discount coupons using conditional logic in the Function Editor. - **Secure checkout processing:** Integrate payment gateways like [Stripe](https://stripe.com) or [PayPal](https://paypal.com) to process transactions securely and seamlessly. - **Automatic notifications:** Send order confirmation emails, shipping updates, and other important notifications to your customers using email services like Mailchimp or SendGrid, triggered by events in Wized. - **Inventory management:** Connect Wized to an external database to keep track of your products and their availability, updating the information in real time in your online store. #### What else do you need? - **A Payment gateway:** To securely process transactions and accept payments by credit card, debit card, or other methods. - **An Email notification service:** To send automatic emails to your customers about their orders, promotions, and other news. - **A Database (optional):** To store information about products, orders, customers, and other data relevant to your online store. If your store is small or just starting out, you can use a simple solution like Airtable. For larger or more complex projects, consider a more robust database like Supabase or Firebase. ### LMS Build an online educational platform where your students can access courses, complete interactive activities, receive assessments, and track their progress. Wized allows you to create the logic and interactions needed to manage educational content, student enrollment, and tracking of their learning. #### How does Wized help you? - **Dynamic and personalized content:** Displays lessons, quizzes, and other educational materials in an organized manner following an established logic, adapting the content to the progress and needs of each student. - **User and course management:** Allows students to register, log in, and access their courses. You can create user profiles, track their progress, and award certificates of completion. - **Interactions and assessments:** Add interactive elements such as quizzes, polls, and discussion forums to encourage student engagement. Implement assessment and grading systems to measure student progress. - **Communication and notifications:** Send assignment reminders, new content notifications, and personalized messages to your students using email or push notification services. #### What else do you need? To enhance your educational platform, consider integrating the following tools: - **Content storage services:** Utilize platforms such as [AWS S3](https://aws.amazon.com/s3/) or [Google Cloud Storage](https://cloud.google.com/storage) to host your videos, documents, and other educational materials. - **Course management tools (optional):** If you require more advanced features like creating lesson plans, managing payments, or tracking student progress in detail, you can integrate specialized tools such as [Teachable](https://teachable.com/) or [Thinkific](https://www.thinkific.com/). - **Database:** Implement a database to store information about users, courses, enrollments, grades, and other data relevant to your LMS. ::: tip Note Wized is a flexible platform that supports a variety of web projects. You can use it to create anything from a simple landing page with advanced features to a complete web application. :::   # Using NPM Packages ## What is NPM NPM (Node Package Manager) is the world's largest software registry and a powerful tool for managing and installing packages. It provides a vast collection of libraries offering a wide range of functionalities that you can easily integrate into your projects to enhance their features. You can continue exploring the documentation below to learn how to integrate NPM libraries into your Wized project. ## Importing an NPM library in Wized In this example, we’ll use the [JS-Confetti](https://www.npmjs.com/package/js-confetti) NPM package to demonstrate how to integrate an NPM library. We’ll leverage [ESM](https://www.jsdelivr.com/esm), which enables importing NPM libraries directly via a URL. ### Getting the ESM URL of the NPM package To do this: First, copy the name of the NPM package from its page. For the JS-Confetti package, the name is `js-confetti` . Then, paste the name of the library into the search field on the [ESM](https://www.jsdelivr.com/esm) page. The site also provides type-ahead suggestions, so you can start typing the library name and select it from the dropdown. <video src="https://media.wized.com/docs-v2/js-confetti.mp4" muted controls title="Getting JS-confetti URL"></video> In our case the URL is `'https://esm.run/js-confetti'`; ### Importing the library Once we have the URL, we can import the library as shown below. This can be done in any function editor. For this example, we’ll use a [run function](../global-events/actions-available#_4-run-function) method: ```javascript const module = await import('https://esm.run/js-confetti'); ``` ### Instanciating the library and using it After importing the library, you can now access its objects, methods, and properties. Here’s how you can use it: ```javascript const JSConfetti = module.default; const jsConfetti = new JSConfetti(); await jsConfetti.addConfetti(); ``` ### Putting it all together To bring everything together, here’s an example action that imports the library and triggers the confetti effect when the variable `v.time_to_party` is `true` ![JS-Confetti Global Event Action](full-js-confetti.png) ## Note JS-confetti is a library with a `default` export - some libraries may have both `default` and `named` exports, usually in their documentation you'll find it's imports documented in the following way: ```javascript const { namedExport, anotherNamedExport } from 'my-named-exports-library' ``` Their corresponding imports in Wized would be in the following way ```javascript const module = await import('https://esm.run/path-to-library'); const namedExport = module.namedExport; const anotherNamedExport = module.anotherNamedExport; ```   # Intro to the Wized configurator The Configurator is the core of Wized, where you can create, modify and remove features from your project. It is organized in three different panels, each one focused on different aspects of your project, this document will give you an overview of each panel. ## Top bar In the [top bar](/wized-configurator/top-bar), you will manage aspects related to the publication of your project. This includes navigating between different pages of your website and administering URL parameters, allowing for a smooth user experience when accessing your application. ## Left sidebar The [left sidebar](/wized-configurator/left-sidebar/) serves as the main navigation hub. Here, you can seamlessly explore your applications, events, elements, and the overall structure of your project. This centralized navigation simplifies the process of managing various components and enhances your ability to oversee complex projects. ## Right sidebar The right sidebar is activated when you need to access the specific details of an application, request, element, or any data stored in your database. This panel allows you to control and adjust the finer details of each component, ensuring that every aspect of your application is configured to meet your needs effectively. By utilizing these panels within the Wized Configurator, you can easily manage your web application, ensuring an organized workflow that caters to both novice users and experienced developers alike.   # Intro to the apps panel The Apps Panel allows you to centralize and manage the integrations between your project and the external services you choose to use, such as databases, third-party APIs, backends, etc. ## Left panel ![left-panel-apps-overview](left-panel-apps-overview.png) The left panel `Apps` serves as a navigation tool where you can: - **View created apps**: You can access all the Apps you have created within your project. The panel allows you to filter and organize these Apps efficiently for better management. - **Usage details**: Each app will display its name along with the number of instances where it is being utilized across different requests. By clicking it, a modal window will open, providing detailed insights into the specific requests where the app is in use. - **Create new apps**: Simply click on the `+` icon located in the upper right corner of the panel. ## Right panel ![right-panel-apps-overview](right-panel-apps-overview.png) You can find the specific settings for each App you have created. This panel provides you with detailed information, including the name of the App and the type of App selected. Below are the additional configurations of the App, which vary depending on the type of App you have previously chosen. ::: tip Note For more information about what an App is, how it works and best practices [go here](/apps/). :::   # Bug Report Form The Bug Reporter lets you submit bug reports to the Wized team directly from the configurator, without leaving the page. ## Submitting a bug report To open the Bug Reporter, click the bug icon in the left sidebar. ![bug-report-form-icon](bug-report-icon.png) A form will appear as below: ![bug-report-form](bug-report-form.png) - **Summary** _(required)_: Describe what is broken. Include the steps to reproduce the issue whenever possible. - **Attachments** _(optional)_: Attach any files that help illustrate the issue. Once you have filled in the summary, click **Submit**. Your name, project ID and a session recording URL are automatically included with the report to help the team debug the issue in context. After a successful submission, a confirmation message will appear and the form will close. If the submission fails, an error message will be shown and you can try again.   # Intro to the Data Store panel The Data Store panel serves as the central hub within the Wized configurator, where you can monitor and manage all the data related to your website in real-time. This panel provides essential insights and functionalities to help you understand and control various data aspects of your web application. In the Data Store panel, you will find the following key sections: ## Left panel ![data store panel](data-store-panel-overview.png) ### **Requests** Here, you can view a comprehensive list of all the [requests](/requests/) created within your project. Each request is displayed along with its current status and relevant data, enabling effective management and testing of your API integrations. ### **Cookies and variables** This section allows you to see all the [cookies](/data-store/cookies) and [variables](/data-store/variables) currently created within your application, along with their real-time values. ### **URL parameters** You can access a complete list of all URL parameters that have been defined for your application. This is particularly useful for tracking and managing user interactions and data passed through URLs. ### **Secrets** This section lists all [secrets](/data-store/secrets) stored securely within your application, such as API keys and access tokens. Managing these secrets is essential for maintaining the security of your application. ### **Inputs and forms** Here, you can view all [input fields](/data-store/inputs) and [forms](/data-store/forms) detected on the current page. This allows you to manage user interactions and input data in real time, facilitating dynamic responses to user actions. Overall, the Data Store panel provides you with a clear overview of the current state of your web App, empowering you to maintain control over real-time values and interactions. ## Right panel In this panel, you can access the settings of each of the values of the Data Store, you can also: create, modify or delete their values or settings.   # Intro to the debugger panel The Debugger Panel helps you identify and resolve issues that may impact your application's functionality. It continuously scans your project for inconsistencies or errors in configurations, events, and elements, allowing you to address these issues before they affect your users' experience. ## Alert types - **Missing elements:** If you have removed an element from your Webflow project but it still has associated settings or events in Wized, the Bug Panel will notify you so you can remove those outdated settings. - **Other configuration issues:** Wized can also detect potential problems in your configurations, such as incorrect values or conflicts between different actions. ## How to resolve them? 1. Locate the issue in the Bugs Panel. 2. Click the "Fix Issue" button associated with the problematic configuration or event. 3. Edit or delete the configuration as needed to correct the issue and ensure your application functions properly.   # Intro to the elements panel The Elements Panel is where you can manage all the [elements](/elements/) you have in your project. Here you will find a hierarchical tree representation of the elements of your page. ::: tip Note Only elements with the [wized attribute](/start-here/getting-started/wized-attribute) will appear here. ::: ![element_panel](elements_panel.png) ## Left Panel - **Elements on page:** A complete listing of all elements on the current page that have the wized attribute. These are the elements that Wized recognizes and that you can interact with to add [configurations](/elements/configurations) or [events](/elements/events). ![elements_this_page](elements_this_page.png) --- - **Elements in other pages:** A listing of all elements with the wized attribute present on other pages in your Webflow project. ![elements_other_pages](elements_other_pages.png) --- ## How Are the Elements Displayed? Elements are displayed in a tree hierarchical structure, mirroring the HTML structure of your website. **You'll be able to clearly see** the relationship between parent and child elements, making it easier to navigate. ![tree_hierarchical](<tree hierarchical.png>) - **Setting Icon**: If a gear icon appears next to the element name, it means that it has a [configuration](#settings-tab) enabled. - **Event Icon**: If a lightning bolt icon appears next to the element name, it means that it has an [event](#events-tab) enabled. - **Instances**: It will show the number of instances that the element has in this or other pages. --- ## Right Panel The Elements Settings Panel is your control center for adding interactivity and custom logic to elements on your website. **It opens automatically** when you select an element. ![elements_settings_panel](panel_element_settings.png) ### `Settings` tab ![elements_settings_icon](element_settings_icon.png) In this tab, you will find all the available settings for the selected item. You can: - **Create new configurations:** Choose the desired configuration you want to add. - **Modify existing settings:** Click an existing setting to edit its name, condition, or value in the Function Editor. - **Delete settings:** Click the delete icon next to a setting to remove it. --- ### `Events` tab ![elements_events_icon](elements_events_icon.png) In this tab, you can manage the events associated with the selected element. - **Create new events:** Click the "Add Event" button and choose the desired event from the drop-down list. - **Modify existing events:** Click on an existing event to edit its settings or add/remove associated actions. - **Delete events:** Click the delete icon next to an event to remove it. ::: info Note For detailed information about the available settings and events and how to configure them, see the [elements section](/elements/). :::   # Intro to the events panel In the events panel, you will be able to manage all the events created in your project. You will find two panels, the [left panel](#left-panel) will help you navigate through all your events, while the [right panel](#right-panel) will allow you to create, edit, delete, and test your events. --- ## Left panel ![navigation_panel](events_nav_panel.png) - **View and manage your events**: The left panel displays a list of all events created in your project. You can search, filter, and create new events as needed. - **Create new requests**: Simply click on the `+` icon located in the upper right corner of the panel. --- ## Right panel ![settings_panel](events_settings_panel.png) In this panel, you can manage and modify the settings of each event. You have the ability to adjust: - **Event properties**: such as the event's name and trigger. - **Action settings**: including the [actions](/global-events/actions-available) that will be executed when the event occurs. ::: tip Note For more detailed information about global events and how to configure them, refer to the [Global Events](/global-events/) section. :::   # Intro to the left sidebar ![staging-domain](left-sidebar-overview.png) The left sidebar is a core panel within the configurator, its multi-purpose navigation purpose dynamically displays various sections, including: - [Apps](/wized-configurator/left-sidebar/apps) - [Requests](/wized-configurator/left-sidebar/requests) - [Data Store](/wized-configurator/left-sidebar/data-store) - [Elements](/wized-configurator/left-sidebar/elements) - [Global Events](/wized-configurator/left-sidebar/global-events) - [Settings](/wized-configurator/left-sidebar/settings) - [Logs](/wized-configurator/left-sidebar/logs) - [Debugger](/wized-configurator/left-sidebar/debugger) Each section is clearly identified by its corresponding icon. In summary, the Left Sidebar serves as an essential tool for you to create, modify, and delete any configurations or integrations within your project. It also allows you to view logs and access project settings   # Intro to the logs panel The Logs Panel provides you with a comprehensive overview of the actions and events of your Wized App. Here, you can monitor every change, request, event, action, etc. As they occur in real-time, enabling you to understand the flow of your logic and identify potential errors or areas for improvement. ![logs_panel](logs.png) ## Why is the Logs panel important? The Logs Panel is an essential tool for: - **Debugging your application:** Identify and fix errors or unexpected behavior by following the execution flow of your logic and API responses. - **Understanding how your application works:** Observe how different elements, events, and configurations interact in real time. - **Optimizing performance:** Identify areas for improvement in your API logic and requests to enhance the speed and efficiency of your application.   # Intro to the requests panel In the requests panel, you will be able to manage all the API connections created in your project. You will find two panels, the [left panel](#left-panel) will help you navigate through all your requests, while the [right panel](#right-panel) will allow you to create, edit, delete, and test your API requests. ## Left panel ![requests_panel](request_panel.png) - **View and Manage your requests:** The left panel displays a comprehensive list of all API requests created in your project. You can search, filter, and create new requests as needed. - **Create New Requests:** Simply click on the `+` icon located in the upper right corner of the panel. ## Right panel - **Request configuration** In the right panel, when the "Settings" tab is activated, you will see all the configurations for the selected request. These configurations will dynamically adjust based on the type of request (Native or REST). Here, you can find and modify settings such as headers, endpoints, methods, and more, depending on the request type. ![request_settings](request_settings.png) - **Response & logs overview** When you open the "Overview" tab, you can view the response of the request, including both the results and the state. Additionally, you will have access to the logs. ![request_overview](request_overview.png) :::tip note For more detailed information on how to create and configure API requests, see the [Requests](/requests/) section. :::   # Intro to the settings panel ## Plan & usage ![plan usage](plan-usage-overview.png) ::: details View plan & usage content In this section, you will find all the relevant information about your current plan and usage statistics for your project. - **Current plan Type and upgrade**: At the top, you will see the type of plan you are currently using. If you wish to upgrade your plan. - **Elements used**: This statistic shows the total number of Elements you have created in your project. Depending on the type of plan you choose, the limit will vary. - **Elements allowed**: The number of Elements permitted depends on your selected plan. View [pricing](https://www.wized.com/pricing) - **Pageviews this month**: This is where you can see how many times your users have visited a page on your website during the month. As with actions, the pageview limit varies based on your plan type. - **Today**: This metric shows you the number of views your website has received today. ::: ::: tip Note On the free plan, there are no limits on the number of views or Elements, giving you the freedom to experiment and develop without restrictions. ::: ## Branding **Enable or disable Wized dadge**: You have the option to choose to display or hide the Wized badge on your website. This badge appears in the bottom corner of your page, indicating that your site is powered by Wized. ::: tip Note If you are using the free plan, you will not be able to hide the Wized badge. To remove the badge, you will need to upgrade to one of our paid plans. ::: ## Domains ![domains panel](domains-panel-overview.png) ::: details View domains content In this section, you can manage the domains associated with your project: - **Staging domain**: This is the domain you use to test your project before publishing changes to production. - **Custom Production domain**: Once you have a paid plan, you can add the production domains. This is the domain where your website will be accessible to all users in its final, live version. - **Adding multiple Production domains**: You can add multiple custom domains if you are in a Medium or Large plan. - **Wildcard domains**: You can use wildcard domains (e.g., `*.yourdomain.com`) to match multiple subdomains under a single domain configuration. This feature is only available for Medium or Large plans. ::: ## Embed code The embed code is essential for integrating your Webflow website with Wized. - **Integration script**: This is the code that needs to be pasted into the `<head>` section of your Webflow project to establish the [connection with Wized](/start-here/getting-started/) - **Embed version**: Here you will find the version of Wized you are currently using. The most recent version is 2. ### Check the embed code Wized performs an automatic validation to ensure that the script is correctly integrated into your website. The following indicators will help you confirm the connection: - ✅ A green icon will appear if the validation is successful, indicating that the connection between Wized and your project is correct. - ❗️ If the validation fails, review the integration steps to identify any issues. ::: warning Note If the Embed validation is not correct, it could cause undesired behavior in the configurator. ::: ## Backups ![backups panel](backups-panel-overview.png) Wized automatically creates backups of your project every 80 syncs in the background, ensuring that your work is safe. If you ever need to generate a new backup or publish changes to your staging site on webflow.io, simply click the "Saved" button. ::: details view and restore Backups To access your backup history: 1. Click the gear icon in the left sidebar. 2. Select the "Backups" tab. Here, you will find a complete listing of the backups generated. If you want to view a specific backup, click the eye icon next to it; this will open a new tab showing the project as it was on the date of that backup. If you decide to restore that backup, click the circled arrow icon to revert the project to that selected version. ::: ## Share project You can generate and share a preview link for your project. The person who receives the link will be able to open the configurator with your project and see all the information, including actions, requests, and more. ::: tip Note Changes made by the person through the preview link will only be reflected in that specific session and will not affect the project. ::: ## Clone project You can generate a link that other users can use to clone your project. This will enable them to create an exact copy of your project in their own environment, facilitating collaboration and shared learning. ::: warning Note - If you enable this option, anyone who has the link will be able to clone your project. - For security reasons, secret values are **not** copied when cloning a project. After cloning, you will need to re-enter all secret values in the cloned project under the **Data Store** panel. - Additionally, any **Airtable OAuth connections** will need to be reconnected in the cloned project. :::   # Top bar ## X-ray The X-ray feature simplifies the visualization of all elements on your page that contain the Wized attribute. ![x-ray](left-sidebar/x-ray.png) ::: details **How X-ray works** - **Element display:** When enabled, elements with Wized attributes are outlined in blue, showing their attribute names. ![x-ray-active](left-sidebar/x-ray_actived.png) - **Quick access to settings:** Clicking on a highlighted element opens its settings panel on the right side. ::: --- ## Branch Manager The Branch Manager provides tools to manage different branches of your project efficiently. ![branch manager](images/branch-manager.png) ::: details **How Branch Manager works** - **Switch branches:** Easily switch between different branches to test or develop specific features. - **Create new branches:** Start a new branch for isolated development without affecting the main project. - **Merge branches:** Combine changes from one branch into another seamlessly. ::: tip **Learn more** For detailed information about branching, Check [Branch section](/branching/). ::: ## Reload This option allows you to reload the canvas and update attribute detection in your project. ![reload](left-sidebar/reload.png) ::: details **Reload options** - **Reload canvas** Clicking the reload icon refreshes the canvas, similar to pressing `F5` on a live site. - **Rescan attributes** This feature performs a new scan of all elements, ensuring Wized correctly recognizes them. Use this only if Wized is not detecting some elements. ::: --- ## Canvas The Canvas section includes multiple tools to optimize its use in your project. ![canvas-icon](left-sidebar/canvas-icon.png) ::: details **How canvas works** ![canvas-panel](left-sidebar/canvas_panel.png) - **Navigation:** Move between previously visited pages using the back/forward arrows. - **Reload canvas:** Refresh the current page without reloading the configurator as such. - **Current URL:** Displays the current page URL. - **Parameters:** Modify, add, or delete URL parameters dynamically. ::: tip **Note** You can manually test your flows by changing URL parameters, but it's recommended to use the [dedicated panel](/data-store/navigation). ::: --- ## Pages This section allows quick access to all indexed pages in your sitemap. ![pages icon](left-sidebar/pages-icon.png) ::: details **How pages works** - Open the **Pages dropdown** to see all indexed pages. - Click a page name to navigate to it. ![pages dropdown](left-sidebar/pages-panel.png) ::: tip **Important** Webflow CMS pages are not indexed by Webflow, so they won’t appear in the list. Make sure your pages are properly indexed in your sitemap. For more details, visit [Webflow university](https://university.webflow.com/). ::: --- ## Publishing changes The Wized Configurator **always** displays the most recent version of your project. However, for updates to be reflected on your live site, you must **publish manually**. ![publish-icon](left-sidebar/publish-icon.png) ::: details **How publish works** ![publish-panel](left-sidebar/publish-panel.png) **Staging** - Publish your changes to your Webflow staging site (`.webflow.io`). - Test interactions before making them public. **Production (custom domain)** - Publish your changes to your live site. - Available only for **paid users**. ** How to publish** 1. Select the desired domain in the top right corner of the Configurator. 2. Click **"Publish"**. ::: ::: tip **Note** Manual publishing is required for updates to be reflected on your live site. :::   # Creating a workflow ### Steps to create a Wized Workflow 1. Navigate to the left sidebar and click on `Workflows` icon. This opens the **workflows panel**. ![workflow-sidebar-button](images/workflow-side-panel-button.png) 2. If you have existing workflows, they will be listed in the panel. To create a new one, click on the **`+`** icon in the top-right corner. ![workflow-create-button](images/workflow-create-button.png) 3. In the right panel, you can define workflow configurations: - Workflow name - Workflow props ![workflow-create-panel](images/workflow-create-panel.png) 4. Workflow Canvas will be opened: ![workflow-canvas](images/empty-workflow-canvas.png)   # Intro to Workflows Workflows are a set of actions and conditionals that can be triggered by element or page events. ![workflow-example](workflow.png) They are reusable and designed to optimize operations by grouping actions, handling requests, applying conditional logic, and efficiently managing tasks. Workflows can also receive props, allowing you to pass dynamic data into them for greater flexibility and customization. ## Check Out the Demo Watch the video below to see Wized Workflows in action and learn how to create and manage workflows effectively. <video controls src="https://media.wized.com/docs-v2/wized-workflows-demo.mp4" title="Wized Workflows"></video>   # Workflow Data Workflow data is saved during execution in the `Data Store`, including the results of the nodes. Example of workflow data: ![Workflow data](images/workflow-data.png) Workflow data can also be accessed outside workflows, such as for displaying progress bars or statuses. ## Node Data To view specific node data, click the **Data Store Button**. - This will display the execution data for the node. ![Data store button](images/node-data-store-button.png) ![Node data](images/node-data.png) ## Accessing Data from Previous Nodes Specific node data can be accessed in subsequent nodes, often in conditional logic. **Example**: In this example, the `ok` status from `node_1` is accessed to display a success or error alert: `return w.sign_up.nodes.node_1.result.ok` ![Previous node data](images/previous-node-data.png) ## Node Naming Each node is assigned a default name, but it's recommended to rename nodes manually. This makes it easier to reference their data later. ![Node naming](images/node-naming.png) For example, instead of accessing the `ok` status like this: `return w.sign_up.nodes.node_1.result.ok` You can use a more descriptive name: `return w.sign_up.nodes.create_user_node.result.ok`   # Workflow Nodes Workflow nodes represent actions or conditions and can include the following types: - **Perform Request**: Make an HTTP request to an external API. - **Run Function**: Run a custom function. - **Set Variable**: Set a value for a variable. - **Set Cookie**: Save a value in a browser cookie. - **Navigate To**: Redirect to a specific URL or page. - **Run Workflow**: Initiate another workflow. - **If/Else Condition**: Add conditional logic to manage the workflow's execution. ## Creating a Workflow Node You can create a workflow node by: - Creating and linking it directly to an ending node: ![Create and link node](images/workflow-create-and-link-node.png) - Creating a node from the top bar: If a node is selected, the new node will be linked to the selected node. If no node is selected, the new node will be created as an unlinked node. ![Create node](images/adding-unlinked-node.png) ## Selecting a Node and Configuring Node Settings To configure a node, first select it. The settings for the selected node will appear on the right panel: ![Node select and settings](images/node-settings.png) ## Passing Props from Workflow to Node Settings In the Workflow Node settings, you can access the `email` prop using the variable `p`, as illustrated below: ![Workflow props in function editor](images/workflow-props-function-editor.png) ## Node Top Bar Buttons When you hover over a node, the top bar buttons will appear: ![Workflow top bar buttons](images/node-top-bar-buttons.png) These buttons include: - **Play Button**: Run the workflow from the beginning up to the selected node. - **Disable Button**: Temporarily disable a node, causing the workflow to skip it during execution. ![Disable node](images/disable-node.png) - **Data Store Button**: Open the execution data for the node. ![Data store button](images/node-data-store-button.png) ![Data of the node](images/node-data.png) - **Delete Node Button**: Delete the selected node   # Overview Panel The Overview Panel provides a comprehensive view of your workflow's execution details. By selecting a workflow and clicking the **Overview** button, you can access this panel to: - Review execution data. - Analyze execution logs. - Inspect workflow triggers. ![Overview Panel Button](./images/overview-panel-button.png)   # Workflow Props Workflow props are dynamic parameters that enable you to customize and reuse workflows efficiently. By defining props, you can pass specific values to the workflow, making it adaptable to various scenarios. This flexibility is essential for creating dynamic and efficient functionality. ## Defining Props To define props for a Workflow: 1. Open the workflow configuration. 2. Add the required props in the **Props** section. 3. Specify the `name`, `defaultValue`, and whether the prop is `required`. ### Example: Defining Workflow Props Consider a workflow named `sign_up`. Here, we define a prop `email` with a default value of `'example@gmail.com'`. ![Defining workflow props](images/workflow-create-panel.png) In the Workflow Node settings, the `email` prop is accessed via the variable `p`, as shown below: ![Workflow props in function editor](images/workflow-props-function-editor.png)   ## Creating a New Workspace To create a new workspace, follow one of these methods: 1. **After Login** After logging in, click **Create a New Workspace** in the Workspace Selector. This will guide you through the setup process. ![Workspace Select](./images/workspace-select.png) 2. **From the Dashboard** Go to the dashboard and choose **New Workspace** from the menu. ![Workspace Select](./images/workspace-selector.png) Complete the setup by following these steps: - Enter a name for your workspace. - Optionally, edit the autogenerated slug to suit your preferences. ![Workspace Creation](./images/workspace-create.png) Both methods are straightforward and allow you to quickly set up a workspace tailored to your needs.   ## Editing a Workspace To update your workspace name or image, navigate to **Workspace Settings** in the [Finsweet Account](https://my.finsweet.com) sidebar. ![Workspace Settings](./images/workspace-settings.png)   # Finsweet Workspaces Finsweet Workspaces empower teams to collaborate seamlessly by organizing projects and managing access through roles and permissions. ## Logging into a Workspace Log in to your account to access the **Workspace Selector**, where you can choose an existing workspace or create a new one. ![Workspace Selector Login](./images/workspace-select.png) ## Switching Between Workspaces Easily switch between workspaces using the **Workspace Selector** in the top-left navigation bar. Simply click it and select the desired workspace from the dropdown menu. ![Workspace Selector Dropdown](./images/workspace-selector.png) ## Learn More Explore additional guides to make the most of your workspaces: - [Create a Workspace](./create.md) - [Manage Workspaces](./manage.md) - [Editing a Workspace](./edit.md) - [Members and Roles](./members.md) - [Subscriptions and Billing](./subscriptions.md)   # Managing Workspaces To manage your workspaces, navigate to [Finsweet Account](https://my.finsweet.com) or use the **Workspace Selector** located in the top-left corner of the dashboard. ![Workspace Selector](./images/workspace-selector.png) After clicking **Manage Workspaces** You will be redirected to the [Finsweet Account](https://my.finsweet.com) page, where you can view and manage all your workspaces. ![Finsweet Account](./images/finsweet-account.png) From this page you can: - [Create a Workspace](./create.md) - [Edit a Workspaces](./edit.md) - [Members and Roles ](./members.md) - [Manage Subscriptions and Billing ](./subscriptions.md)   ## Team Members You can see the team members and manage by clicking on **Team & Roles** inside [Finsweet Account](https://my.finsweet.com) dashboard page. ![workspace settings](./images/finsweet-members.png) ### Inviting Member You can invite a team member by clicking **Invite** Button. You need to write user email and select roles. ![workspace settings](./images/finsweet-invite.png) ### Roles #### Organization Roles - **Owner** The owner of the organization has full access to all features and settings. - **Admin** Admin role with full access to the organization. - **Billing** Billing role with access to billing information and settings. #### Wized Roles - **Wized Admin** Can view, update and transfer Wized projects, as well as manage Folders. - **Wized Editor** Can view and update Wized projects. - **Wized Viewer** Can only view Wized projects but cannot update them.   ## Subscription and Billing ### Upgrading Your Project To upgrade your project, navigate to the Wized dashboard settings, and in the "Plan and usage" section click **Upgrade**. ![Wized Plan Upgrade](./images/wized-plan-upgrade.png) You will be redirected to the Finsweet Checkout page. ![Finsweet Checkout](./images/workspace-checkout.png) Choose your desired plan and complete the payment process. ### Managing Your Subscriptions You can manage all your subscriptions by visiting [Finsweet Subscriptions](https://my.finsweet.com/subscriptions). ![Manage Subscriptions](./images/subscriptions.png) ### Billing Information To manage your billing details, click **Billing** in the sidebar. This will redirect you to the Stripe billing portal, where you can update your billing information and download invoices as needed.