Memberful

Subscription billing, member account management, and gated content delivery aren't built in. So if you're selling memberships, private podcasts, or digital downloads, you're stuck building custom payment flows from scratch.

That's where Memberful comes in. It plugs subscription billing, checkout, and member portals into your Webflow site through embed codes and purchase links, while running payments through your own Stripe account, so you keep full ownership of your subscriber data and revenue.

It's a solid fit for independent publishers, podcasters, course creators, and community builders, plus Webflow agencies who want to add recurring revenue for clients without migrating everything to WordPress.

How to integrate Memberful with Webflow

What is Memberful? Memberful is a membership management and subscription billing platform for creators, publishers, and communities. It connects to your own Stripe account for payment processing, offers monthly, annual, and custom billing intervals, and includes built-in features for private podcast hosting, newsletter delivery, digital downloads, and Discord community access. All checkout and member account pages carry your branding, not Memberful's.

Teams pair Memberful with Webflow when they want full design control over their public site while offloading subscription billing, member authentication, and gated content delivery to a dedicated platform. Your Webflow site handles marketing pages, pricing tables, and content previews. Memberful handles checkout, account management, and subscriber-only content on its hosted portal.

The Memberful-Webflow integration offers 3 approaches:

• Embedded code and purchase links handle checkout buttons, member account access, and the tracking script without writing application code.
• Zapier and viaSocket let you sync member data to the Webflow CMS and automate workflows between the two platforms.
• The Webflow and Memberful APIs give you full control over member data sync, subscription lifecycle management, and personalized content delivery, but require server-side development.

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

Add Memberful to your Webflow site with embedded code

Install Memberful's tracking script, add purchase buttons, and place member account links on your Webflow pages. It requires no application code and works on any paid Webflow site plan. Memberful's official Webflow integration guide walks through each step with visual examples.

The tracking script enables member session detection and activates an overlay checkout modal. Purchase buttons link directly to Memberful's hosted checkout. Account management links let members access their subscriptions, downloads, and podcast feeds from your site's navigation.

Single sign-on (SSO) isn't supported, so exclusive content stays on Memberful's hosted member portal while your Webflow site remains the public-facing storefront.

To install the tracking script:

1. In your Memberful dashboard, go to Website > Custom website and copy the generated code snippet. Each Memberful account produces a unique snippet.
2. In Webflow, open your site's settings by clicking the gear icon on your site in the dashboard.
3. Go to the Custom Code tab, paste the snippet into the Head code section, and click Save changes. See Custom code in head and body tags for reference.
4. Publish your site. Custom code only takes effect after publishing.

The site-wide script powers session detection and checkout behavior.

To add purchase buttons:

1. In Memberful, go to Revenue > Plans, select a plan, and click Links.
2. Copy the plan purchase link (or gift purchase link).
3. In Webflow, add a Button or Link element to your page and set its URL to the copied Memberful link.
4. Publish your site.

Visitors can go directly from your Webflow page to Memberful checkout.

To add member account links:

1. Find your Memberful subdomain at Website > General settings in the Memberful dashboard.
2. Add links to your Webflow navigation or page body using these URL patterns, replacing ACCOUNT-URL with your subdomain:

• Account management: https://ACCOUNT-URL.memberful.com/account
• Downloads portal: https://ACCOUNT-URL.memberful.com/account/downloads
• Private podcast feeds: https://ACCOUNT-URL.memberful.com/account/feeds

1. For precise placement within a page, use a Code Embed element. Drag it onto your canvas, double-click to open the editor, and paste the link HTML directly.

These links give signed-in members a clear route to subscriptions, downloads, and podcast feeds.

The integration includes several checkout and access capabilities:

• Overlay checkout opens as a modal on your Webflow page when the tracking script is installed (falls back to a full-page redirect in Safari, Firefox, Brave, and on mobile devices due to third-party cookie restrictions)
• Free registration links let visitors create accounts without purchasing, configurable at Website > Forms > Free registration in Memberful
• Multiple price links per plan let you offer different billing intervals (monthly, annual) as separate buttons on the same Webflow pricing page
• Gift purchase links provide a dedicated checkout flow for gift memberships

These options cover the main ways visitors can start and manage a membership from your Webflow site.

Custom code doesn't render in the canvas preview. Publish the site and view it on the live domain to confirm the integration is working correctly.

Place account links site-wide using a Code Embed element

For account and sign-in links that appear on every page, place a Code Embed element inside your Webflow navigation component. The element renders on every page where that navigation symbol is used.

To add a site-wide account link:

1. Open your navigation symbol in Webflow.
2. Add a Code Embed element inside the navigation structure.
3. Paste the account link HTML, for example: <a href="https://ACCOUNT-URL.memberful.com/account">My Account</a>.
4. Click Save & Close and publish your site.

This approach avoids duplicating account links across individual pages.

Set up content gating without custom code

Since pages can't be protected at the server level, Memberful's recommended content gating pattern uses a two-layer architecture. Your Webflow site hosts teaser content, pricing pages, and purchase CTAs. Memberful's hosted portal (YOUR-ACCOUNT.memberful.com) hosts the actual exclusive content.

To implement this pattern:

1. Design preview cards, sample content, and pricing pages in Webflow.
2. Add purchase buttons that link to Memberful checkout (as described above).
3. Host members-only content on Memberful's built-in member website, which includes posts, downloads, and private podcast feeds.
4. Optionally configure a custom domain (e.g., members.yourdomain.com) for the Memberful portal by contacting Memberful support.

This keeps protected content on Memberful while your Webflow site continues to handle the public-facing experience.

CDN assets like PDFs and images are publicly accessible by direct URL regardless of page-level access settings. For video content that requires protection, use Vimeo or Wistia with domain restrictions and embed the players in Memberful-hosted pages.

Connect Memberful and Webflow with Zapier or viaSocket

Automation platforms bridge the gap between Memberful events and Webflow CMS data without writing server-side code. When a member signs up, renews, or cancels in Memberful, these tools can create or update CMS items in Webflow automatically. This approach is useful for maintaining public member directories with a Collection List, displaying active subscriber counts, or logging membership activity in a CMS collection.

viaSocket also offers pre-built combinations for this pairing. Available combinations include Create Item in Webflow when Member SignUp on Memberful, Create Live Item in Webflow when Member SignUp on Memberful, Update Live Item in Webflow when Member SignUp on Memberful, Create Item in Webflow when Member Deleted in Memberful, and Create Live Item in Webflow when Member Deleted in Memberful. viaSocket also includes conditional logic and branching within workflows.

Keep in mind that Webflow API tokens used by these automation tools expire after 365 days of inactivity. Workflows will fail silently if the token expires without renewal.

Build with the Webflow and Memberful APIs

For full control over member data sync, subscription lifecycle management, and personalized content display, use the Memberful and Webflow APIs together. This approach requires server-side middleware (Node.js, Python, or a serverless function on Cloudflare Workers, AWS Lambda, or similar) because server-side code doesn't run on the site itself and Memberful's OAuth callback can't be handled client-side.

The APIs handle different parts of the integration:

• Memberful's GraphQL API handles member queries, subscription data, and mutation operations at POST https://ACCOUNT-URL.memberful.com/api/graphql
• Webflow's Data API handles CMS collections and site publishing
• Memberful webhooks trigger real-time events for 21 membership lifecycle actions
• Webflow webhooks trigger events for CMS item and ecommerce changes

Together, these APIs provide the data flow needed for custom sync and personalization logic.

When you receive a Memberful webhook, always re-fetch the current data from Memberful's GraphQL API before writing to Webflow CMS. Memberful does not guarantee webhook delivery order, so payload data may be stale by the time it arrives.

Sync new members to Webflow CMS

Create a CMS item in Webflow each time a new member signs up in Memberful. It requires a webhook endpoint, a Memberful API key, and a Webflow site token.

To implement member sync:

1. Generate a Memberful API key at Settings > Custom Applications in your Memberful dashboard. Generate a Webflow site token at Site Settings > Apps & Integrations > API Access.
2. Create a CMS collection in Webflow with fields for email (plain text), memberful-id (plain text), plan-label (plain text), is-active (boolean), and expires-at (date).
3. Set up a webhook endpoint in Memberful at Settings > Webhooks, subscribe to the member_signup event, and point it to your middleware URL.
4. In your middleware, verify the webhook signature using HMAC-SHA256 with the X-Memberful-Webhook-Signature header.
5. Query Memberful's GraphQL API for the current member data:

query GetMember($id: ID!) {
  member(id: $id) {
    id
    email
    fullName
    subscriptions {
      active
      expiresAt
      plan { id label }
    }
  }
}

6. Create the CMS item in Webflow via POST /v2/collections/{collection_id}/items/bulk with the member data mapped to your collection fields.
7. Publish the item via POST /v2/collections/{collection_id}/items/publish.

This pattern gives you a durable member record in Webflow based on the current Memberful state rather than the webhook payload alone.

Be aware of a naming mismatch in Memberful's API: what the dashboard calls "Plans" maps to the Pass type in GraphQL, and what the dashboard calls "Prices" maps to the Plan type. For access control decisions, always use pass.id and pass.name, not the Plan fields.

Update CMS items on subscription changes

Subscription lifecycle events (creation, renewal, deactivation, deletion) should update the corresponding member's CMS record in Webflow rather than creating new items.

To implement lifecycle sync:

1. Subscribe to subscription.created, subscription.deactivated, subscription.renewed, and subscription.updated webhook events in Memberful.
2. On each webhook, re-fetch the member's current subscription state from the GraphQL API using the member_id from the payload.
3. Look up the existing Webflow CMS item by memberful-id using the Data API's GET /v2/collections/{collection_id}/items endpoint.
4. Update the item via PATCH /v2/collections/{collection_id}/items/{item_id} with the current is-active boolean and expires-at date.
5. Publish the updated item. The publish endpoint accepts one successful publish per minute, so batch updates when processing multiple webhooks.

One CMS record stays current across the full subscription lifecycle.

Do not delete CMS items when a subscription deactivates. Set is-active to false to preserve the member record. Timestamp formats differ across Memberful events: subscription events use ISO 8601, while order and member events use Unix timestamps. Your middleware needs to handle both formats when writing dates to Webflow CMS fields.

Display personalized content with OAuth

Memberful's OAuth 2.0 flow lets you authenticate individual members and query their subscription data, which you can use to personalize content on Webflow pages.

To implement personalized content:

1. Register a Custom Application in Memberful at Settings > Custom Applications. For single-page apps, use the PKCE flow.
2. Build a middleware endpoint that handles the OAuth callback, exchanges the authorization code for an access token (codes expire after 1 minute and are single-use), and queries the currentMember GraphQL endpoint.
3. Add a required-plan-id field to your Webflow CMS content items. Your middleware filters CMS content from the Content Delivery API (GET /v2/collections/{collection_id}/items/live) based on the member's active subscriptions.
4. Return only the filtered, authorized data to the client, where JavaScript populates the page with the member's name, plan, and accessible resources.

Authentication and filtering happen in middleware before data reaches the browser, which allows tailored content displays. It does not create secure server-side protection for Webflow-hosted pages or assets.

Access tokens expire after 15 minutes (900 seconds). Implement refresh token logic using the one-year-lifetime refresh token. Members with unrestrictedAccess: true in their Memberful profile bypass plan-tier filtering.

What you can build with the Memberful Webflow integration

Integrating Memberful with Webflow lets you sell paid memberships from a fully designed site without building custom payment infrastructure or migrating to WordPress.

• Paid podcast subscription site: Design a public show page in Webflow with episode previews, show notes, and subscription CTAs. Memberful generates private RSS feeds per subscriber that auto-revoke when a subscription lapses. Each plan can offer different billing intervals, monthly, annual, or other, through separate purchase buttons on the same Webflow pricing page. Each button can point to a different price link within the same plan.
• Subscription news publication: Build editorial layouts in Webflow with public articles and author pages. Memberful manages paid subscribers who receive member-only newsletters, ad-free reading access, and in-depth reporting delivered through the hosted member portal. A paid site plan with CMS collections supports large article archives.
• Digital product storefront with member-only downloads: Display templates, stock assets, or educational resources in a Webflow product grid. Memberful handles purchase processing and secure download delivery through its member portal. viaSocket can log member signup or deletion events as CMS updates for displaying synced records on your Webflow pages.
• Community membership with Discord access: Create a community landing page in Webflow that explains member benefits and pricing tiers. Memberful's maintained Discord integration automatically grants and revokes server roles based on subscription status. Group plans support multiple seats under a single payer for team or organizational memberships.

If you need more control over member data display or subscription-conditional content on Webflow pages, the API integration path covers those cases fully.