Wized

How to integrate Wized with Webflow

Webflow handles design while Wized executes application logic in the browser and coordinates backend API calls. Embed Wized's JavaScript script into Webflow's custom code section, then configure elements and APIs through Wized's visual configurator.

Use the Wized app

Install from the Webflow Apps Marketplace. Create a project in the Wized dashboard with your Webflow staging URL, copy the generated embed code, and paste into Webflow's site settings under Custom Code > Head Code.

Key capabilities:

• Visual configurator: Attach logic to elements without coding
• Element detection: Add wized attribute to any Webflow element to manage it dynamically
• State management: Variables, cookies, URL parameters, and request responses through Wized.data
• API integrations: Connect to Xano, Supabase, Airtable, Firebase, or any REST API

Add wized-cloak to prevent flash during page load and wized-loader for loading indicators.

Connect backend databases and APIs

Configure requests in the Wized dashboard with your API endpoint URL, HTTP method, and authentication credentials.

Security note: Store sensitive API keys in Wized Secrets. When a Secret is used in any request field, that request automatically executes through Wized's servers — the actual API key is retrieved and applied server-side, preventing credential exposure in the browser. For applications with stringent security requirements or regulated data handling, consider additional backend architecture.

Supported backends:

• Xano, Supabase, Airtable, Firebase
• Custom REST APIs (GET, POST, PUT, DELETE, PATCH)
• Webflow CMS API for programmatic content management

Authentication and payments

User authentication: Wized coordinates authentication flows between Webflow's UI and external providers (Firebase, Memberstack, Supabase) through API requests. Store returned tokens in Wized cookies for session persistence.

Stripe payments: Wized supports Stripe payment processing through REST API configuration — this requires manual setup, not a built-in integration. Configure requests to Stripe's Checkout Session API to create payment sessions and redirect users to hosted checkout pages. Use Stripe's hosted payment pages to maintain PCI compliance. Never store payment card data in Wized variables or Webflow CMS.

JavaScript API (advanced)

For complex logic beyond the visual configurator, use the Wized JavaScript API:

window.Wized = window.Wized || [];
window.Wized.push((Wized) => {
  // Execute after Wized initializes
  await Wized.requests.execute('requestname');
});

Access the data store through Wized.data containing variables (v), cookies (c), URL parameters (p), inputs (i), forms (f), and request responses (r).

What you can build

Integrate Wized with Webflow for database-connected applications without traditional backend development. Production implementations serve 60,000+ active students with 1.2+ million database records.

• SaaS platforms with dashboards: Build subscription applications with user authentication, Stripe payment processing, and personalized dashboards. Requires Webflow CMS Plan+, backend database, and payment processor integration.
• Learning management systems: Create educational platforms with course progress tracking, Q&A systems, and certificate generation. The BTC (Be There Certificate) program serves 60,000+ students using this architecture.
• Member portals with gated content: Build user account systems using Wized's conditional visibility controls to display personalized content based on subscription tier or user permissions.
• Multi-step forms with validation: Process complex forms with real-time validation, conditional fields, and API integration for backend storage or notifications.