Memberful

How to integrate Memberful with Webflow

Memberful turns Webflow sites into membership platforms.

While Webflow cannot create true members-only pages due to SSO limitations, you can use Webflow’s Code Embed element or automation and video apps to set up a basic integration. You can also build custom integrations using the Memberful API for advanced workflows like automated content sync and member data management.

Use code embeds and native features

The fastest path to Memberful integration uses Webflow’s Code Embed element and direct linking. Install the Memberful tracking script in your site-wide custom code to enable member sessions and purchase tracking.

Copy the JavaScript snippet from Memberful Dashboard > Settings > Install Code and paste it into Webflow’s Site Settings > Custom Code > Head Code before publishing. Publish to enable member sessions and purchase tracking.

Create membership tiers in Memberful and generate purchase links for each plan. These links follow the pattern https://YOUR-ACCOUNT.memberful.com/checkout?plan=PLAN_ID and can be added to any Webflow button or text element. Key integration points include:

• Purchase buttons that redirect to Memberful's hosted checkout
• Account management links (https://YOUR-ACCOUNT.memberful.com/account) for member self-service
• Download portals (https://YOUR-ACCOUNT.memberful.com/account/downloads) for digital product delivery
• Podcast feeds (https://YOUR-ACCOUNT.memberful.com/account/feeds) for exclusive audio content

For enhanced tracking, append UTM parameters to purchase links (e.g., ?utm_source=webflow&utm_campaign=launch) to monitor acquisition channels in Memberful's analytics dashboard.

Use automation and video apps

Several apps bridge the gap between Webflow and membership functionality.

Zapier automates workflows between Memberful and Webflow without code. Common automations include:

• New member signup → Create CMS item in Webflow
• Subscription renewal → Update member status field
• Order completion → Send welcome email sequence

Configure Zapier by generating an API key in Memberful's Settings > Custom Applications, then connect it to your Webflow site through Zapier's interface.

For video content protection, integrate Vimeo or Wistia with domain restrictions. Upload videos to these platforms, restrict playback to your domain, then embed them in Webflow pages that link from Memberful's member portal.

Build with Webflow and Memberful APIs

Webflow API integration enables dynamic content personalization, automated member management, and real-time data synchronization. This approach is best for teams that need custom authentication flows, CMS-driven access control, or integration with existing business systems.

The Memberful GraphQL API provides comprehensive member data access, while Webflow's API enables programmatic content management. Key integration patterns include webhook-driven updates, OAuth authentication, and automated content gating.

Implement OAuth authentication

Build custom login experiences using Memberful's OAuth 2.0 flow:

1. Register an OAuth app under Memberful Dashboard > Developer > OAuth Apps, set your Webflow page URLs as redirect URIs, implement the authorization-code flow in your server or serverless functions, and inject the session script into Webflow pages for member-specific content.
2. Configure OAuth endpoints with your redirect URIs pointing to serverless functions
3. Exchange authorization codes for access tokens via POST https://YOUR-ACCOUNT.memberful.com/oauth/token
4. Query member data using the GraphQL endpoint with bearer token authentication

The currentMember query returns subscription status, enabling conditional content display in Webflow based on membership tiers.

Automate content synchronization

Use Memberful webhooks to sync membership events with Webflow CMS:

1. Create webhooks in Memberful Dashboard > Developer > Webhooks for events like member.signup and subscription.updated.
2. Verify webhook signatures using HMAC-SHA256 server-side to ensure payload authenticity
3. Update Webflow CMS via API calls to create member records or toggle access flags
4. Handle event types including order completion, subscription changes, and refunds

Webhook payloads contain member IDs but require subsequent API calls to fetch complete member data, ensuring fresh information for CMS updates.

Build dynamic pricing pages

Create personalized checkout experiences by combining APIs:

1. Fetch available plans via GraphQL query to plans { nodes { id name prices { amount } } }
2. Generate dynamic buttons in Webflow using plan IDs from the API response
3. Apply coupons programmatically through the applyCoupon mutation for promotional campaigns
4. Track conversions by injecting custom parameters into checkout URLs

This enables A/B testing of pricing strategies and member-specific offers based on subscription history.

What you can build

Integrating Memberful with Webflow opens possibilities for sophisticated membership experiences that combine beautiful design with robust subscription management.

• Premium content libraries: Design stunning content hubs in Webflow that showcase free samples, then gate full access behind Memberful subscriptions. Perfect for course creators offering video tutorials, downloadable resources, and exclusive webinars
• Subscription news sites: Build magazine-style layouts in Webflow with public articles, then use Memberful to manage paid subscribers who access in-depth reporting, ad-free reading, and member-only newsletters
• Digital product marketplaces: Showcase products beautifully in Webflow while Memberful handles secure delivery of downloads, license keys, and purchase history — ideal for selling templates, stock assets, or software
• Paid podcast networks: Create podcast landing pages in Webflow that integrate with Memberful's private RSS feeds, giving subscribers exclusive episodes through their favorite podcast apps