Wized

Webflow builds fast, semantic front-ends, but it stops at the presentation layer. You cannot query an external database or gate content behind a login. Lists that update in real time when a user filters them require logic outside what the platform does on its own.

Wized fills that gap. It is an application layer on top of your Webflow project. It connects the UI to backend databases and REST APIs through a visual configurator. After you embed one script and tag elements with attributes, Wized handles state, requests, conditional logic, and reactive rendering in the user's browser.

This integration fits client web apps and SaaS products that need Webflow's front-end speed with a real data layer behind it. Teams building LMS platforms, booking systems, CRMs, dashboards, and multi-step forms use this combination to skip custom front-end frameworks entirely.

How to integrate Wized with Webflow

What is Wized? Wized is a low-code development platform and JavaScript framework that turns Webflow sites into reactive web applications. It manages frontend state and user authentication through a visual interface, with API requests connecting the app to backend services. Wized runs client-side and connects to backend services through native integrations and REST API requests.

Teams reach for Wized when a Webflow site needs to behave like an app. Think authenticated dashboards or gated course content that talks to Stripe. Wized handles the logic and data binding while Webflow keeps handling design, hosting, and responsive layout.

Most Wized-Webflow builds start with the Wized app from the Webflow Marketplace to connect the Configurator to a project. Script embed and custom attributes activate Wized on individual elements without writing front-end code. Teams that need full control use the Webflow and Wized APIs for Webflow CMS reads and writes, form data, and webhook-driven sync, with REST configuration and server-side work.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Install the Wized app

The Wized app is listed on the Webflow Marketplace and reviewed by Webflow for site development quality. It connects the Wized Configurator to your Webflow project so you can build application logic against your live design. You need a Wized project pointed at your Webflow staging URL, and a paid Webflow Site plan or a Core, Growth, Agency, or Freelancer Workspace to add custom code.

To set up the integration:

1. Create a project in the Wized dashboard using your Webflow staging URL.
2. Copy the Wized embed script from your project dashboard.
3. In Webflow, open Website Settings > Custom Code > Head Code, paste the script, then save and publish.

Once connected, the Configurator manages visual API requests against REST services or native integrations. It maps API responses to Webflow elements and handles conditional logic, authentication flows, and multi-step forms without manual JavaScript.

The Free plan publishes to webflow.io staging domains only. Publishing to a custom production domain requires at least the Lite plan.

Activate Wized with the script embed and custom attributes

After the Wized script loads, custom attributes tell Wized which Webflow elements to control. Use this on every project, since it is how Wized identifies and manipulates elements. The base setup uses the Wized script and custom attributes. Add Code Embed elements only for custom scripts alongside Wized when needed.

The script itself goes in the head of your site. Reference the official docs on Custom code in head and body tags for placement rules. Head Code and Footer Code each support up to 50,000 characters, and only HTML, CSS, and JS run in these fields.

Add the Wized attribute to elements

Only elements with a Wized attribute respond to Wized actions, events, or data binding. You add these through Webflow's Custom attributes panel, found under Element Settings → Custom Attributes in the Designer.

To make an element controllable:

1. Select the element in Webflow and open the Settings tab.
2. Under Custom Attributes, click the plus icon.
3. Enter a supported key and assign a unique value as the element name.

Use wized for controllable elements. The wized-cloak key hides an element until Wized loads, and wized-loader marks a loading indicator. Assign unique values so Wized can reference each element internally.

Connect a Webflow form to Wized

Wized detects native Webflow forms automatically. This lets you validate inputs and send submissions to an API, then react to the result without wiring up each field by hand.

To connect a form:

1. Select the <form> element wrapper in Webflow.
2. Add the wized attribute with a unique value to that wrapper.
3. Wized recognizes the form and all its inputs automatically.

Native Webflow form field values are readable in Wized after submission only. If you need real-time access as the user types, use Wized Inputs instead. Note that enabling Webflow's bot protection disables the submit button briefly, which can block the Wized submit event during that window.

Build with the Webflow and Wized APIs

For CMS reads and writes, form retrieval, and event-driven sync, configure REST requests between Wized and the Webflow CMS Data API. This path suits teams pulling CMS data into a Collection List alternative rendered by Wized, or writing user-generated content back into collections. It requires REST configuration and, for secure webhook handling, server-side development.

API work centers on configured requests between Wized and Webflow. The Wized REST request system connects your app to any external service that supports REST. That includes the Webflow Data API. Webflow's Data API handles CMS collections and form submissions, and Webflow webhooks trigger real-time events between systems.

For Wized, configure outbound requests manually by setting the endpoint path and HTTP method. Native Wized integrations cover Supabase, Memberstack, Firebase, and Airtable, plus a built-in Stripe integration. Everything else goes through a REST request.

Read and write Webflow CMS items from Wized

Configure REST requests in Wized for the Webflow Data API, then create a request per CRUD operation. This lets a Wized app display CMS content in lists populated from CMS data and write new items back into a collection.

Because Wized runs client-side by default, treat Webflow API tokens as sensitive credentials. Do not expose a Webflow bearer token in a browser-executed request. Use Wized Secrets to route sensitive requests through Wized's servers, or send the request through a secure backend before it reaches Webflow.

To implement CMS operations:

1. Create a REST App in Wized for Webflow's Data API. For requests that require an Authorization: Bearer {token} header, route them through Wized Secrets or a secure backend so the token is not exposed client-side.
2. Add a request for each operation using full Webflow Data API URLs. List items with GET https://api.webflow.com/v2/collections/{collection_id}/items, create with POST https://api.webflow.com/v2/collections/{collection_id}/items, update with PATCH https://api.webflow.com/v2/collections/{collection_id}/items/{item_id}, and delete with DELETE https://api.webflow.com/v2/collections/{collection_id}/items/{item_id}.
3. Bind the response data to Webflow elements using Wized attributes, then trigger requests on events like input changes for live filtering.

Watch the Webflow Data API rate limits. Starter and Basic plans allow 60 requests per minute; CMS, eCommerce, and Business plans allow 120. Exceeding the limit returns a 429 error, so cache responses in Wized's Data Store for real-time apps.

Sync CMS changes with Webflow webhooks

Register Webflow webhooks to react when CMS items change. Webflow notifies your server when CMS items change. Your server can then trigger downstream logic or update an external database Wized reads from.

To set up a webhook:

1. Register the event with POST https://api.webflow.com/v2/sites/{site_id}/webhooks. Use the cms:read scope.
2. Subscribe to events like collection_item_created, collection_item_changed, collection_item_deleted, collection_item_published, or collection_item_unpublished.
3. Handle the incoming payload on your endpoint. Note that created, changed, and published events include fieldData, while deleted and unpublished events include only IDs.

Wized sends outbound calls through configured Requests in the Wized Configurator. Its browser-side JavaScript API also exposes request lifecycle events, requeststart and requestend, which you can listen to for custom logic. Webflow webhooks handle the opposite direction. Together they keep both systems in sync.

What can you build with the Wized Webflow integration?

Integrating Wized with Webflow lets you ship data-driven web applications without maintaining a separate React or Vue front-end.

• Build gated LMS platforms where authenticated students see personalized progress. AdConversion runs an LMS serving 50,000+ students on Webflow plus Wized, with course access and assessments layered on top of the design.
• Build custom booking systems with real-time filtering and pricing that updates over a third-party backend. Antarctica21 built an expedition finder and cabin booking flow with interactive ship maps on Webflow plus Wized plus Xano.
• Build authenticated dashboards that pull activity logs and metrics from an external API into personalized views. A membership platform documented on the Webflow blog renders per-user dashboards from Airtable data through Wized's request system.
• Build multi-sided SaaS platforms that manage role-based access and complex data flows across user types. Alaris Acquisitions runs a 4-sided M&A platform with 200+ endpoints and 40 database tables on Webflow plus Wized plus Xano.

If you need more control over server-side logic or secure credential handling, the API integration path covers those cases with full flexibility.