Outseta

Webflow handles design, content, and hosting, but lacks built-in tools for recurring payments, user authentication, or plan-based content gating. Outseta fills that gap by combining membership payments, authentication, CRM, email, and help desk into a single platform that connects directly to Webflow, syncing member data to the Webflow CMS automatically with no middleware required.

This integration is built for membership site owners, course creators, SaaS founders, professional associations, and Webflow agencies who need to add subscription billing and access control to client sites—whether the goal is a paid community, a gated content library, or a full SaaS product, all without requiring a backend developer.

How to integrate Outseta with Webflow

What is Outseta? Outseta is an all-in-one membership management platform that bundles subscription payments, user authentication, CRM, email marketing, and help desk into a single service. It uses Stripe for payment processing and supports subscription plans, one-time products, free trials, team billing, per-user pricing, and usage-based models. Outseta is a Stripe Verified Partner and is named by Webflow as a preferred partner as Webflow sunsets User Accounts.

Teams use Outseta with Webflow when they need to charge members, control who can see specific pages or page elements, and manage subscriber data from one place. The combination replaces tool stacks that would otherwise include separate services for payments, auth, CRM, and transactional email.

The Outseta-Webflow integration supports 3 approaches:

• The Outseta app handles sign-up forms, login, content gating, CRM data display, and CMS sync directly in Webflow without writing code.
• Custom code embeds let you place Outseta widgets on specific pages and configure advanced authentication options using script tags and data attributes.
• The Webflow and Outseta APIs give you full control over member data sync, webhook-driven workflows, and custom authentication flows, but require server-side development.

Most implementations start with the Outseta app and add embed customization or API calls as the project grows in complexity.

Install the Outseta app

The Outseta Webflow app is the most direct way to add membership features to a Webflow site. It lets you configure sign-up forms, login triggers, content visibility rules, and CMS sync from within Webflow, without copying embed codes or writing scripts. The app is approved by Webflow and supports read/write access to CMS data, site forms, and site data.

Before installing, complete three prerequisite steps in the Outseta dashboard: connect Stripe at Billing > Settings, create at least one pricing plan at Billing > Plans, and configure sign-up settings at Auth > Sign Up and Login.

To set up the integration:

1. Find Outseta in the Webflow Apps Marketplace and click Install App.
2. Log in to Outseta if prompted, then click Authorize App.
3. Return to Webflow and refresh the page.
4. The Outseta app panel appears in Webflow. Click Launch.

Once installed, the app panel lets you:

• Add sign-up and login forms as pop-ups or on-page embeds
• Show or hide any element based on login state, plan, or add-on subscription
• Display live CRM data (member name, plan, renewal date) on any page
• Map native Webflow forms to Outseta lead capture forms, email lists, or support tickets
• Sync member data between Outseta and Webflow CMS collections automatically
• Publish account-specific pages when new members sign up

The app handles most membership site requirements without additional code. For scenarios that need deeper control over embed behavior, authentication callbacks, or element-level gating with custom attributes, the custom code approach below adds that flexibility.

Add Outseta embeds with custom code

Custom code embeds give you direct control over how Outseta's authentication, profile, and lead capture widgets appear on your site. This approach works well when you need dedicated sign-up or login pages, plan-specific gating with HTML data attributes, or fine-tuned JavaScript configuration. Two embed styles are available: pop-up links (the simplest option) and on-page widgets (for dedicated authentication pages).

Add the Outseta head script

Every embed method requires a base script in your site's <head> tag. This script loads Outseta's JavaScript modules and connects your site to your Outseta account.

To add the script:

1. In the Outseta dashboard, go to Auth > Embeds and copy the Quick Start head script.
2. In Webflow, open Site Settings > Custom Code and paste the script into the head code section.
3. Click Save.

The script accepts configuration options through the o_options object. The domain property (your Outseta subdomain) is required. The load property controls which modules initialize, with options including auth, nocode, profile, chat, emailList, leadCapture, and support. By default, the script loads nocode, auth, and profile.

Set up pop-up embeds

Pop-up embeds are the fastest way to add sign-up, login, profile, and logout actions. Each action is triggered by a URL assigned to a button or link.

To add pop-up embeds:

1. In the Outseta dashboard, go to Auth > Embeds and copy the sign-up link URL.
2. In Webflow, select the sign-up button or link, open Element Settings, and paste the URL into Link Settings.
3. Repeat for login, profile, and logout links (each has its own URL in the Auth > Embeds section).
4. Click Publish.

Outseta's pop-up links automatically show or hide based on context. Profile and logout links only appear to logged-in users. No additional configuration is needed.

Set up on-page embeds

On-page embeds render sign-up, login, or profile forms directly on a dedicated page instead of in a pop-up. This is useful when you want a standalone /sign-up or /login page.

To add an on-page embed:

1. In the Outseta dashboard, go to Auth > Embeds, select the widget you want, choose On a page, configure your plan options, and click Install Your Embed.
2. Copy the generated page script.
3. In Webflow, add a Code Embed element to your sign-up or login page.
4. Paste the script into the Code Embed element and save.
5. Repeat for each widget page and publish.

Code Embed elements require an active paid site plan in Webflow.

Control element visibility with data attributes

Outseta uses HTML data attributes to show or hide any Webflow element based on a visitor's authentication state or subscription plan. Add these attributes through the element settings panel (gear icon) in Webflow.

Available attributes include:

• data-o-authenticated="1" shows the element only to logged-in users
• data-o-anonymous="1" shows the element only to logged-out visitors
• data-o-plan-content="planUid1,planUid2" shows the element only to users on specific plans
• data-o-addon-content="addOnUid1,addOnUid2" shows the element only to users with specific add-on subscriptions

For full-page or folder-level protection, configure redirect rules at Auth > Protected Content in the Outseta dashboard. This approach redirects unauthorized visitors to an access-denied page rather than just hiding individual elements.

Element-level attributes control visibility through JavaScript. The underlying HTML is still present in the page source. For content that requires stricter access control, use page-level or folder-level protection through the Outseta dashboard, which redirects unauthorized users before the page loads. See the show or hide page elements guide for full details.

Display member data on pages

You can show personalized member information on any Webflow page using the data-o-member attribute system. No API calls are needed.

To display member data:

1. Add a text element (such as a <span>) in Webflow.
2. Add a custom attribute with the name data-o-member and a value like FirstName, Account.CurrentSubscription.Plan.Name, or Account.CurrentSubscription.BillingRenewalTerm.

Outseta replaces the element content with live data from the logged-in user's profile. Date fields support transformations like DaysSince and DaysUntil for displaying membership duration or renewal countdowns. See the display user data guide for the full attribute reference.

Build with the Webflow and Outseta APIs

The API integration path gives full control over member data sync, subscription management, webhook-driven workflows, and custom authentication. This approach requires server-side development and is suited for teams building custom dashboards, multi-platform SSO, or automated publishing systems that go beyond what the Outseta app and embed scripts provide.

Available APIs include:

• Outseta's REST API handles CRM records, subscription management, billing, and person data at https://your-subdomain.outseta.com/api/v1/
• Webflow's Data API handles CMS collections and form submissions
• Webflow webhooks trigger real-time events like form_submission, collection_item_created, and site_publish
• Outseta webhooks fire on events like Account Created, Person Created, and Sign Up Callback

Admin API keys for Outseta must never be used in client-side code (including Webflow custom code sections). Route all server-side API calls through a backend service, serverless function, or automation platform like Make or Zapier.

Sync new members to Webflow CMS items

When a new member signs up in Outseta, a webhook can trigger automatic creation of a corresponding CMS item in Webflow. This is how teams build member directories, profile pages, or account-specific dashboards.

To implement this:

1. In the Outseta dashboard, go to Settings > Notifications and configure an "Account Created" webhook pointing to your server endpoint.
2. On your server, parse the incoming webhook payload (which includes Account, Person, and Subscription data) and map fields to your Webflow CMS collection schema.
3. Call the Webflow API at POST /v2/collections/:collection_id/items/live with the mapped data to create a published CMS item.

Outseta secures webhooks with HMAC-SHA256 signatures via the x-hub-signature-256 header. Configure a 32-byte hex-encoded signing key at Settings > Notifications in the Outseta dashboard. See the webhook security guide for verification implementation details.

Verify membership with JWT tokens

For custom access control logic beyond what the embed script provides, you can verify a user's membership status by decoding their JWT token server-side.

To implement this:

1. Fetch Outseta's public keys from GET https://your-subdomain.outseta.com/.well-known/jwks.
2. Verify the incoming JWT signature against the public keys.
3. Read the token claims, including outseta:planUid for plan-based access and outseta:addOnUids for add-on-based feature gating.

The JWT payload includes the person UID (sub), email, account UID, subscription UID, and plan UID. See the JWT access token reference for the complete field list.

What can you build with the Outseta Webflow integration?

Integrating Outseta with Webflow lets you run a complete membership business from a single Webflow site without maintaining separate tools for billing, auth, email, and CRM.

• Paid membership community: Build a site like Queer Design Club or The Futur where members sign up, choose a plan, and access gated resources. Use page-level protection to restrict entire sections and data-o-plan-content attributes to show tier-specific content on shared pages.
• Online course platform: Create a video course site using Outseta's LMS template for Webflow, which includes automatic lesson completion detection, teaser content for non-members, and personalized dashboards that link students to their next lesson on login.
• SaaS product with authentication: Launch a SaaS product where Webflow handles the marketing site and authenticated dashboard UI, while Outseta manages sign-up, login, subscription billing, and team-based accounts. Sites like BankingOn and aiCarousels use this pattern.
• Gated publication or content library: Publish free and premium articles in the Webflow CMS, then use Outseta's content gating to restrict premium posts to paying subscribers. Outseta's CMS sync creates member profile pages automatically when new subscribers sign up.

If you need more control over webhook-driven publishing, custom access logic, or multi-platform data sync, the API integration path covers those cases with full flexibility.