Data attributes

Email + password sign-in form.

Create-account form. Optionally include a tierId input or arrive at this page with ?tier=<id> to pre-pick a tier.

Form that requests a reset email.

Form that sets a new password using the token from the email link.

Update first/last name, email, or password for the signed-in member.

Confirm-with-password form that deletes the member account.

Email input on login / signup / reset / profile forms.

Password input on login / signup / reset-password-confirm.

Optional on signup and profile.

Optional on signup and profile.

Required on profile (when changing password) and delete-account.

Required on profile when changing password and on reset-password-confirm.

Optional hidden input on signup to lock the new member to a specific tier. Honored only if the tier belongs to this site.

Any custom field you defined in Dashboard → Custom fields (e.g. company, linkedinUrl). Values are saved on the Member row.

On any element inside a form. Filled with the server's error message; cleared on next submit.

On any element inside a form. Shown when the action succeeds (e.g. reset email sent, profile saved).

On the <form> element. Overrides the default post-action redirect (Site Settings → Post-login redirect URL).

On a delete-account form. Native window.confirm() runs with this text before the request fires.

On the navbar's Profile link. The href is rewritten to the profile page set in Settings, so a pasted navbar keeps working when the profile page is not at the template's suggested slug.

On a button or link. Clears the member session and reloads.

Starts Google sign-in. On a signup page (or with google-signup / data-memberflow-intent="signup") this creates a member if none exists. On a login page the member must already exist. An email/password account with no social provider yet is linked. An email already used with GitHub or Facebook is rejected. Pair with data-memberflow-redirect for the return path.

Starts GitHub sign-in. Same login vs signup rules as google-login. An email/password account with no social provider yet is linked. An email already used with Google or Facebook is rejected.

Starts Facebook sign-in. Same login vs signup rules as google-login. An email/password account with no social provider yet is linked. An email already used with Google, GitHub, Apple, or X is rejected.

Starts Sign in with Apple. Same login vs signup rules as google-login. An email/password account with no social provider yet is linked. An email already used with another social provider is rejected. Later Apple visits may omit email; existing members are matched by Apple id.

Starts X sign-in. Same login vs signup rules as google-login. The X account must share an email. An email/password account with no social provider yet is linked. An email already used with another social provider is rejected.

Starts Discord sign-in. Same login vs signup rules as google-login. Later Discord visits may omit email; existing members are matched by Discord id. An email/password account with no social provider yet is linked. An email already used with another social provider is rejected.

Starts LinkedIn sign-in. Same login vs signup rules as google-login. The LinkedIn account must share an email. An email/password account with no social provider yet is linked. An email already used with another social provider is rejected.

Starts Microsoft sign-in. Same login vs signup rules as google-login. Later Microsoft visits may omit email; existing members are matched by Microsoft id. An email/password account with no social provider yet is linked. An email already used with another social provider is rejected.

Same as the matching *-login action, but always creates an account when none exists (even if the button is not on the signup page).

On a social button. Forces login-only or create-if-missing regardless of which page the button is on.

Opens the named popup on this page. Pair with data-memberflow-dialog="login" (or signup, profile, …). If that overlay is missing, the link's href is used instead (e.g. /login).

Closes the nearest (or named) membership dialog. Escape and a click on the overlay also close it.

Direct aliases of dialog-open targeting login, signup, or profile dialogs.

Direct aliases of dialog-close for login, signup, or profile dialogs.

Toggles a dropdown. Pair with data-memberflow-menu="<name>" and a panel marked data-memberflow-menu-panel="<name>".

Marks the overlay to open. Alias: data-mf-dialog. Hidden on load when a matching dialog-open control exists; otherwise left visible as a page embed.

On the menu-toggle control. Alias: data-mf-menu.

The dropdown panel that menu-toggle shows/hides. Alias: data-mf-menu-panel.

Shorthand for dialog-open / dialog-close on the dialog of that name — login-open is the same as dialog-open with dialog="login". Use whichever reads better in the Designer.

On a button or link, paired with data-memberflow-tier. Moves the member onto that paid tier, picking the right path automatically: an existing subscriber changes plan on their current subscription, anyone else goes through Stripe Checkout. Use checkout or switch directly when you want to force one of the two.

On a button or link, paired with data-memberflow-tier. Starts a Stripe Checkout subscription for the tier on your connected Stripe account and redirects the visitor to pay. Access is granted automatically once Stripe confirms payment.

On a button or link, paired with data-memberflow-tier. Moves an existing subscriber to a different paid tier on their current subscription (proration handled by Stripe). For members without a subscription yet, use checkout.

On a button or link. Cancels the member's subscription at the end of the current billing period — they keep access until then.

On a button or link. Undoes a pending cancellation so the subscription renews as normal.

On the Free plan's CTA. For a visitor or an already-free member it behaves like the ordinary signup link; for a paying member it cancels the subscription at the end of the period instead, which is otherwise a dead end on the plans page. Confirms first.

On a button or link, paired with data-memberflow-tier set to the member's CURRENT tier. Cancels a scheduled downgrade so billing carries on unchanged. Shown only on the current plan's card, and only while a change is pending.

On a button or link. Opens the Stripe Customer Portal where the member can update their card, view invoices, and cancel.

Required next to an upgrade, checkout, switch or undo-switch action. The numeric tier id from Dashboard → Tiers.

Wraps the "your current plan" block above the plans grid. Hidden until the visitor is a member holding a plan. Inside it, data-memberflow-field="tier" / "planPrice" / "currentPeriodEnd" / "cancelAtPeriodEnd" fill themselves in, and the last two are mutually exclusive so the block never contradicts itself.

A badge inside the plan summary. Shown when the member's subscription is running, or set to end at the period end. Ships hidden; only the one that applies is revealed.

The scheduled-change row inside the plan summary. Shown only when a plan change or cancellation is queued for the end of the current period. Put an undo-switch button (for a plan change) and a resume button (for a cancellation) inside it — the script reveals whichever applies and fills in the tier id.

On a button or link in the Plans page's billing switch. Clicking it filters the grid to the plans sold on that cadence — free tiers always stay visible — re-prices any tier that sells both, and changes which Stripe price a checkout uses. The selected one gets aria-pressed="true" and an is-active class to style against.

Wraps the billing switch. Hidden automatically unless the paid tiers on the page span more than one cadence — either one tier carrying both prices, or two tiers each sold on one. A switch that changes nothing implies a cheaper option you don't offer.

Shown only while that cadence is selected. For copy belonging to one option, like "2 months free".

Opens the page on the yearly cadence instead of monthly. Ignored when no tier offers a yearly price.

On a plan card, paired with data-memberflow-tier. Shown when that tier is the member's current plan, or the plan a scheduled change moves them to. Ships hidden; the script reveals whichever applies and hides the other.

On any of the actions above that changes or ends a subscription (switch, undo-switch, cancel, downgrade-free) or leaves a group. Replaces the confirmation text, or skips the dialog entirely with the literal value "off" when you've built your own confirmation step. Left off, each action uses wording that names the plan, the direction and the date the change takes effect.

Visible only when a member is signed in.

Takes the gate from that element's text instead of a fixed value, so a CMS field can set it per collection item — one blog template can hold a free post, a members-only post and a paid post without duplicating the block. Bind a hidden text element to the field, give it an id, and point this at the id. A static data-memberflow-content on the same element still applies as the default when the field is blank.

Inverts the mode that follows. "!level:2" is every visitor who cannot read level-2 content — logged out, or signed in below it — which is exactly the audience for a paywall prompt and previously needed one block per case. An unrecognised mode is never inverted.

Visible to a member whose PLAN reaches accessLevel n or above — the same ">=" rule page access uses. This is how you say "any paid plan" in one attribute instead of one copy per tier. Groups never count toward it, since a group's level is meaningless.

Same as tier:<name> but matched on the numeric tier id from Dashboard → Tiers. Prefer it for anything important: a name match breaks silently the moment the tier is renamed, and it breaks OPEN — the gated element becomes visible to everyone.

Visible only when NO member is signed in.

Visible only when the signed-in member's tier name matches (case-insensitive). E.g. tier:Studio Member or tier:vip.

Visible only when the signed-in member's status matches. Values: active, pending, suspended, cancelled, failed. E.g. status:pending for an 'awaiting approval' notice.

On any element. Renders the corresponding member field as text content. Use 'tier' for the tier name; 'status' for a friendly account status ('Active', 'Awaiting approval', …); 'signupProvider' for how they first signed up (Email, Google, GitHub, Facebook, Apple, X, Discord, LinkedIn, Microsoft); 'currentPeriodStart' for the activation date ('Member since ...'); 'currentPeriodEnd' for the renewal/expiry date; 'cancelAtPeriodEnd' for whether a cancel is scheduled. Elements that resolve to nothing are auto-hidden.

On an input that already carries data-memberflow-input. Auto-fills the input with the current member's value on page load.

On the card's primary CTA, paired with data-memberflow-tier. Joins the group for a signed-in member. Logged out, the link falls through to /signup?tier=<id> so signing up and joining are one step. Relabels itself Joined or Pending approval and disables once the member is in.

On a link or button in the same card, paired with the tier id. Shown only once the member has joined. Confirms before leaving; add data-memberflow-confirm to change the wording, or set it to "off" to skip.

Withdraws a pending join request on an approval-gated group. Shown only while a request is outstanding. Ship this alongside leave-group to style and word the two separately; a card with only leave-group keeps serving both states on that one control.

On a link in the card, paired with the tier id. Shown only to members of the group, with its href filled from the page rule that gates the group's page — so the link is never hand-written and a card added later still points at the right group. Stays hidden when no page rule names that tier, or when more than one does.

On any element in the card. Shown only while a join request is awaiting approval. Optional — the join control already reads Pending approval in that state.

On any element. Renders the group's active member count, e.g. "12 members". Pending requests are not counted.

On any element. Shown only when the group can be joined without approval. Keeps your own wording; fills in Public when left empty.

On any element. Shown only when joining the group needs the owner's approval. Keeps your own wording; fills in Private when left empty.

On any element. Renders the date the viewer joined that group, and hides itself for anyone who has not.

On the card wrapper. Identifies which tier the card belongs to, and is the template the CDN clones for a tier that has no card yet. Elements inside can omit their own tier id.

Alternative card marker. A card whose tier no longer exists is hidden rather than left showing stale copy.

On any element. Renders the tier's name from the dashboard.

On any element. Renders the tier's description, and hides itself when the tier has none. Edit the text in Dashboard → Tiers, not in the Designer — it is overwritten on every load.

On an empty-state block. Shown when the site has no visible tiers of that kind, and hidden again as soon as one exists.

On any element. Renders the tier's price formatted as currency (e.g. $15.00), or 'Free' for free tiers.

On any element. Renders the tier's billing interval (monthly / yearly).

On each panel. Sibling panels with these prefixes hide/show together. The current URL hash picks the visible one; tab links set the hash.

On an element you want used as the toast container, so messages inherit your styling and position instead of the default.

Role on the retention UI. Alias: data-mf-retain. cancel-trigger opens the modal for eligible paid members; accept fires an optional webhook; decline continues with cancel.

On the modal. Optional POST URL (Make.com, Zapier, …) to apply a Stripe coupon. Body includes email, memberId, siteId, coupon.

On the modal. Stripe coupon id sent in the webhook payload.

On the modal. Lifetime max times the offer is shown. Default 1.

On the modal. Days to wait after a decline before offering again. Default 30.

On the modal. Custom-field key used to persist offer history when that field exists in the dashboard. localStorage is always used as a fallback.