MemberSpace

Webflow has no native membership functionality. With Webflow User Accounts shut down in January 2026, there's no built-in way to gate pages, accept subscriptions, or manage access tiers.

MemberSpace fills that gap. A single JavaScript snippet enables content protection, Stripe payments, authentication, and tiered access—all managed from the MemberSpace dashboard while your design stays in Webflow.

Course creators, coaches, publishers, and agencies use it to sell gated content: subscription video libraries, drip-fed courses, paid newsletter archives, or tiered communities—no backend development or platform migration required.

How to integrate MemberSpace with Webflow

What is MemberSpace? MemberSpace is membership site software that protects content on any existing website using a JavaScript code snippet. It has one-time payments, recurring subscriptions, free plans, trial periods, drip content scheduling, and tiered access controls. MemberSpace processes payments exclusively through Stripe and has support for Apple Pay, Google Pay, and Stripe Link.

Teams use MemberSpace with Webflow when they need to sell access to protected pages, organize content into member-only areas called Spaces, and manage billing from a single dashboard. Because Webflow no longer offers native membership features, MemberSpace is one of the primary third-party options for adding authentication and payment gating to a Webflow site.

You can integrate MemberSpace with Webflow in 3 ways:

• Script installation via site settings handles the core connection between MemberSpace and Webflow without writing code.
• Code Embed elements and data attributes let you place signup forms on specific pages and control element visibility by membership tier.
• The MemberSpace JavaScript API and Webflow Data API give you control over dynamic content visibility and Webflow CMS member record management, but require client-side and server-side development.

Most implementations start with the script installation and add signup links or data attributes. More complex setups layer in API-level customization.

Install the MemberSpace script

MemberSpace connects to Webflow through a single JavaScript snippet added to the site's custom code in head and body tags. Install MemberSpace by adding that snippet to the head code section; it is the only documented method and applies site-wide once added. After installation, a floating member button automatically appears on every page, giving visitors access to login, signup, and account management. A paid Webflow workspace plan (Core or higher) is required because the free Starter workspace does not support custom code injection.

[image placeholder]

To install MemberSpace on a Webflow site:

1. Log in to your MemberSpace dashboard and go to Customize > Integrations > Webflow.
2. Click Copy above your install code.
3. In Webflow, open your site and go to Site settings > Custom Code.
4. Paste the copied code into the Head Code field.
5. Click Save, then Publish your site.
6. Return to MemberSpace and click Verify Install. A green "Successfully Installed" message confirms the connection.

Once installed, MemberSpace gives you these capabilities directly from its dashboard:

• Gate any page by entering its URL, with wildcard support for locking entire URL paths (e.g., /courses/)
• Accept one-time, subscription, and installment payments through Stripe
• Create free and paid membership tiers with automatic upselling when members access restricted content
• Schedule drip content delivery by days elapsed or specific calendar dates
• Organize gated content into Spaces with folders, bookmarks, and search

The MemberSpace script only runs on published live sites. It does not execute in Webflow's preview mode. Every change to content protection settings or page structure requires republishing before it takes effect. If the verification step shows "Not installed yet," confirm the code is in the site-wide Head Code field (not in page-specific custom code) and republish.

Add MemberSpace signup forms and visibility controls

After the core script is installed, you can place signup forms directly on Webflow pages and control which page elements appear based on a visitor's membership status. These methods range from pasting a link into a button's URL field to adding HTML data attributes to Webflow elements.

[image placeholder]

Add signup links to Webflow elements

Link a Webflow button or navigation item to a plan-specific signup URL. No code is needed for this approach.

To add a signup link:

1. In MemberSpace, go to Pricing, find the plan, and click Signup link > Copy.
2. In Webflow, select the button, link block, or nav item you want to use as a signup trigger.
3. In the element's settings panel, paste the copied URL into the Link field.
4. Publish your site.

When a visitor clicks that element, MemberSpace displays a signup and payment overlay without leaving the page. Place signup links on homepage call-to-action buttons, navigation menus, a pricing page displaying membership plans, and the site's header or footer.

Embed signup forms with Code Embed elements

For dedicated login or signup pages where authentication is the primary function, embed MemberSpace forms directly into the page layout using a Code Embed element.

To embed a signup form:

1. In MemberSpace, go to Pricing > Get All-Plans Link and copy the embed code under All-Plans Link Embed.
2. To target a specific plan, replace "all" in the embed tag with the Member Plan ID found in the plan's signup link URL.
3. In Webflow, add a Code Embed element to your page from the Add Elements panel.
4. Paste the MemberSpace embed code into the Code Embed element.
5. Publish your site.

Code Embed elements are scoped to the page where they are placed. Use this approach for dedicated authentication pages rather than for the site-wide install script, which belongs in Site settings > Custom Code.

Control element visibility with data attributes

Use MemberSpace data attributes to show or hide individual elements on a Webflow page based on the visitor's login state or plan membership. This lets you display different content sections to free members, paid members, and logged-out visitors on the same page.

To add visibility controls:

1. In Webflow, select the element you want to conditionally display.
2. Open the element's Settings panel on the right side.
3. Click the + icon under Custom Attributes.
4. Enter the attribute name (e.g., data-ms-show) and the value (e.g., paid).
5. Publish your site.

Available attribute values include:

• data-ms-show="auth" shows the element only to logged-in members
• data-ms-show="paid" shows the element only to members with a paid plan
• data-ms-hide="auth" hides the element from logged-in members
• data-ms-show="plan(111)" shows the element only to members on a specific plan (replace 111 with the plan ID)

To prevent a brief flash of content before MemberSpace's script loads, add style="display:none;" as an inline style on elements using data-ms-show. The full data attribute reference is in MemberSpace's developer documentation.

Build with the MemberSpace JavaScript API and Webflow Data API

The MemberSpace JavaScript API and Webflow Data API v2 provide programmatic control over membership state and CMS content for setups that go beyond dashboard configuration. This path requires client-side JavaScript to read member data and server-side development (or serverless functions) to write to Webflow's CMS.

MemberSpace's developer surface is entirely client-side. There is no server-side REST API. The MemberSpace JavaScript API provides browser-based events and functions that return member data during active sessions. Webflow's Data API has REST endpoints for managing CMS collections and items. Webflow webhooks fire server-side events for form submissions and CMS changes.

Because MemberSpace events fire only in the browser, syncing member data to Webflow CMS requires a relay architecture: capture the event client-side, send it to a serverless function (Vercel, Netlify, or Cloudflare Workers), and call the Webflow API from there.

Read member data with JavaScript events

MemberSpace fires JavaScript events on the document object during active browser sessions. Event listeners must be registered before the MemberSpace install code executes to avoid missing events.

To check a member's plan status on page load:

1. Register a listener for the MemberSpace.ready event before the install snippet runs.
2. Access the memberInfo object from the event's detail property.
3. Check the memberships array for active plans and use DOM manipulation to show or hide Webflow elements.

document.addEventListener('MemberSpace.ready', ({detail}) => {
  const {memberInfo} = detail;
  if (memberInfo) {
    const hasPremiumAccess = memberInfo.memberships.some(
      membership => membership.name === 'Premium' && membership.status === 'active'
    );
    if (hasPremiumAccess) {
      // Show premium content elements
    }
  }
});

Use the MemberSpace.conversion event to trigger a CMS sync because it provides the data needed to create a Webflow CMS item at the moment of purchase. This event fires after a successful plan signup (including free plans) and returns order, membership, and member objects. Available functions like MemberSpace.getMemberInfo and MemberSpace.getMemberMetadata also return member data on demand after the widget has loaded.

Sync member records to Webflow CMS

To create or update Webflow CMS items based on MemberSpace events, relay the client-side event data to a serverless function that calls the Webflow Data API.

To implement member-to-CMS sync:

1. Create a CMS collection in Webflow with fields matching the member data you want to store (name, email, plan name, status, join date).
2. Generate a Site Token in Webflow under Site settings > Apps & integrations > API access with the cms:write scope.
3. Set up a serverless function that accepts POST requests with member data and calls POST /v2/collections/{collection_id}/items/live to create published CMS items, or PATCH /v2/collections/{collection_id}/items/{item_id}/live to update existing records.
4. Add client-side JavaScript that listens for MemberSpace.conversion and sends the member payload to your serverless function via fetch().

This relay architecture keeps Webflow CMS records aligned with MemberSpace browser events while preserving server-side API calls to Webflow.

The /items/live endpoints publish changes immediately without a separate publish step. For staged drafts that require review, use POST /v2/collections/{collection_id}/items followed by POST /v2/collections/{collection_id}/items/publish.

What can you build with the MemberSpace Webflow integration?

Integrating MemberSpace with Webflow lets you sell access to protected content and manage members without leaving your own domain or rebuilding on a dedicated membership platform.

• Subscription course platform: Build a course site on Webflow with module pages under a /courses/ path, protect all child pages with a wildcard rule, and use drip content scheduling to release lessons weekly. MemberSpace's cloneable Webflow template includes pre-built course pages, lesson pages, and a member dashboard as a starting point.
• Tiered content library: Create a media library with free and premium tiers where free members see introductory articles and paid members access the full video and PDF archive. MemberSpace auto-upsells visitors who click on content outside their current plan, converting free users into paying subscribers without custom code.
• CMS-powered member directory: Create a Webflow CMS item when a member joins and remove it when they cancel. Display the directory on your Webflow site with a Collection List that shows member names, photos, and plan tiers, updated automatically as membership changes occur.
• Paid community with Circle SSO: Gate a Webflow landing page behind a MemberSpace paywall and connect MemberSpace to Circle for single sign-on. Members authenticate once on the Webflow site and access the Circle community without a second login, creating a unified experience across both platforms.

If you need more control over dynamic content visibility or real-time CMS record management based on membership events, the API integration path covers those cases with client-side event handling and server-side CMS updates.