The Webflow Package is a wrapper around the DOM Package, adding data attributes to access different Memberstack methods directly in your Webflow project. This guide provides a complete list of available data attributes, their functions, and usage examples. The Webflow Package is included in the Webflow install script.
You can also search & copy any of these attributes directly from our website.
Pre-built Modals
Pre-built modals are a quick way to test out and get your membership site working.
-
data-ms-modal="login"
: Opens Memberstack's pre-built login modal.-
Example:
<a data-ms-modal="login" href="#">Login</a>
- Read More: Create a Login Form in Webflow
-
Example:
-
data-ms-modal="signup"
: Opens Memberstack's pre-built signup modal.-
Example:
<a data-ms-modal="signup" href="#">Signup</a>
- Read More: Create a Signup Form in Webflow
-
Example:
-
data-ms-modal="profile"
: Opens Memberstack's pre-built profile modal for logged-in members.-
Example:
<a data-ms-modal="profile" href="#">Profile</a>
-
Show a Specific Profile Tab Only:
To open a profile modal and display a specific tab, use the following custom attributes:
-
Team tab:
data-ms-modal="profile"
+data-ms-modal-tab="team"
-
Member settings:
data-ms-modal="profile"
+data-ms-modal-tab="profile"
-
Security settings:
data-ms-modal="profile"
+data-ms-modal-tab="security"
-
Change password:
data-ms-modal="profile"
+data-ms-modal-tab="changePassword"
-
Plans:
data-ms-modal="profile"
+data-ms-modal-tab="plans"
-
Team tab:
- Read More: Create Profile Forms in Webflow
-
Example:
-
data-ms-modal="forgot-password"
: Opens Memberstack's pre-built forgot password modal.-
Example:
<a data-ms-modal="forgot-password" href="#">Forgot Password</a>
-
Read More: Create a Forgot Password Form
-
Example:
Authentication
-
data-ms-auth-provider="[provider]"
: Creates a social login button within signup and login forms. Requires configuration in Memberstack settings.- Provider Options: google, facebook, microsoft, github, linkedin, spotify, dribbble
-
Example:
<a data-ms-auth-provider="google" href="#">Continue with Google</a>
- Read More: Search for "data-ms-auth-provider" in our Help Center
-
data-ms-auth="manage-providers"
: Wraps social login buttons, enabling members to connect and disconnect providers. Use outside of standard forms.-
Example:
<div data-ms-auth="manage-providers"> <a data-ms-auth-provider="google" href="#">...</a> </div>
- Read More: Social Auth Buttons in Profile Forms
-
Example:
-
data-ms-auth-connected-text="[text]"
: Changes the element's text if the provider is connected. Must be a child ofdata-ms-auth="manage-providers"
.-
Example:
<div data-ms-auth-connected-text="Disconnect Google">Connect Google</div>
- Read More: Social Auth Buttons in Profile Forms
-
Example:
-
data-ms-auth-disconnect
: Shows a child element (e.g., an X icon) if the provider is connected. Must be a child ofdata-ms-auth-provider
.-
Example:
<div data-ms-auth-provider="google"><div data-ms-auth-disconnect><img src="x-icon.png"></div>Connect Google</div>
- Read More: Social Auth Buttons in Profile Forms
-
Example:
Plans
-
data-ms-plan:add="[PLAN_ID]"
: Adds a free plan to a member. Use on signup forms or buttons linking to signup. Multiple plan IDs can be comma-separated.-
Example:
<form data-ms-form="signup" data-ms-plan:add="PLAN_ID"><input ...></form>
or<a data-ms-plan:add="PLAN_ID" href="#">Signup Now</a>
- Read More: Creating Free Plans in Memberstack
-
Example:
-
data-ms-plan:remove="[PLAN_ID]"
: Removes a free or one-time plan. Cannot remove paid subscriptions.-
Example:
<a data-ms-plan:remove="PLAN_ID" href="#">Cancel Plan</a>
- Read More: Managing Member Plans with Data Attributes
-
Example:
Prices
-
data-ms-price:add="[PRICE_ID]"
: Adds a paid plan. Use on signup forms or buttons linking to signup.-
Example:
<form data-ms-form="signup" data-ms-price:add="PRICE_ID"><input ...></form>
or<a data-ms-price:add="PRICE_ID" href="#">Signup Now</a>
- Read More: Guide to Understanding Paid Plans & Prices
-
Example:
-
data-ms-price:update="[PRICE_ID]"
: Updates/replaces a paid plan. Useful for switching to a higher tier plan.-
Example:
<form data-ms-form="signup" data-ms-price:update="PRICE_ID"><input ...></form>
or<a data-ms-price:update="PRICE_ID" href="#">Upgrade Now</a>
- Read More: Guide to Understanding Paid Plans & Prices
-
Example:
-
data-ms-price:remove="all"
: Clears previously selected plans, useful for pricing tables with free and paid options.-
Example:
<a data-ms-price:remove="all" href="#">Remove all</a>
- Read More: Creating a Pricing Table in Webflow
-
Example:
Actions
-
data-ms-action="resend-verification-email"
: Resends the verification email. Requires email verification to be enabled.-
Example:
<a data-ms-action="resend-verification-email" href="#">Resend verification email</a>
- Read More: Email Verification
-
Example:
-
data-ms-action="customer-portal"
: Opens Stripe's billing portal for managing paid subscriptions. Hidden for members without paid plans.-
Example:
<a data-ms-action="customer-portal" href="#">Manage Subscription</a>
- Read More: Stripe Customer Portal
-
Example:
-
data-ms-action="logout"
: Logs out the current member. Hidden if the member is logged out.-
Example:
<a data-ms-action="logout" href="#">Logout</a>
- Read More: Create a Logout Link or Button in Webflow
-
Example:
-
data-ms-action="login-redirect"
: Redirects members to their Login Redirect URL. Only visible to logged-in members. Uses plan or default redirect if no specific URL is set.-
Example:
<a data-ms-action="login-redirect" href="#">Your Content</a>
- Read More: Login-Redirect Buttons
-
Example:
Forms
-
data-ms-form="signup"
: Creates a signup form. Requiresdata-ms-member="email"
anddata-ms-member="password"
for child inputs.-
Example:
<form data-ms-form="signup"> <input type="email" data-ms-member="email"> <input type="password" data-ms-member="password"> </form>
- Read More: Create a Signup Form in Webflow
-
Example:
-
data-ms-form="login"
: Creates a login form. Requiresdata-ms-member="email"
anddata-ms-member="password"
for child inputs.- Example: ` <input type="email
-
Example:
<form data-ms-form="login"> <input type="email" data-ms-member="email"> <input type="password" data-ms-member="password"> </form>
- Read More: Create a Login Form in Webflow
-
data-ms-form="profile"
: Creates a profile update form for custom fields. Requiresdata-ms-member="CUSTOM_FIELD_ID"
for each custom field input.-
Example:
<form data-ms-form="profile"> <input type="text" data-ms-member="CUSTOM_FIELD_ID"> </form>
- Read More: Create Profile Forms in Webflow
-
Example:
-
data-ms-form="email"
: Creates a form for updating email addresses. Requiresdata-ms-member="email"
input.-
Example:
<form data-ms-form="email"> <input type="email" data-ms-member="email"> </form>
- Read More: Create Profile Forms in Webflow
-
Example:
-
data-ms-form="password"
: Creates a form for updating passwords. Requiresdata-ms-member="current-password"
anddata-ms-member="new-password"
inputs.-
Example:
<form data-ms-form="password"> <input type="password" data-ms-member="current-password"> <input type="password" data-ms-member="new-password"> </form>
- Read More: Create Profile Forms in Webflow
-
Example:
-
data-ms-form="forgot-password"
: Creates a forgot password form. Requiresdata-ms-member="email"
input.-
Example:
<form data-ms-form="forgot-password"> <input type="email" data-ms-member="email"> </form>
- Read More: Create a Forgot Password Form
-
Example:
-
data-ms-form="reset-password"
: Creates a reset password form that uses a token from the forgot password email. Requiresdata-ms-member="token"
anddata-ms-member="password"
inputs.-
Example:
<form data-ms-form="reset-password"> <input type="text" data-ms-member="token"> <input type="password" data-ms-member="password"> </form>
- Read More: Create a Forgot Password Form
-
Example:
Content
-
data-ms-content="[state]"
: Controls the visibility of elements based on member state.-
State Options:
-
members
: Logged-in members -
!members
: Logged-out members -
verified
: Verified members -
!verified
: Unverified members -
is-trialing
: Members in a trial period -
!is-trialing
: Members not in a trial -
free-plans
: Members with a free plan -
!free-plans
: Members without a free plan -
paid-plans
: Members with a paid plan -
!paid-plans
: Members without a paid plan -
no-plans
: Members with no plans -
!no-plans
: Members who have a plan -
has-password
: Members with a password -
!has-password
: Members without a password -
CONTENT_GROUP_ID
: Members with access to a specific Content Group -
!CONTENT_GROUP_ID
: Members without access to a specific Content Group
-
-
Example:
<div data-ms-content="members">Members Only Content</div>
- Read More: Show/Hide Content with Data Attributes
-
State Options:
-
data-ms-bind:style="[cssProperty]:[value]"
: Sets inline styles on elements based on member state.-
Example:
<div data-ms-content="has-failed-payment" data-ms-bind:style="display:block">Please Update Payment</div>
- Read More: Show/Hide Content with Data Attributes
-
Example:
-
data-ms-bind:class="[className]"
: Adds a class to elements based on member state.-
Example:
<div data-ms-content="is-admin" data-ms-bind:class="admin-panel">Admin Panel</div>
- Read More: Show/Hide Content with Data Attributes
-
Example:
Member Data
-
data-ms-member="[data]"
: Displays or submits member data.-
Data Options:
-
email
: Member's email address -
password
: Input for submitting passwords -
signupDate
: Member's signup date -
CUSTOM_FIELD_ID
: Value of a specific custom field -
token
: Input for password reset tokens -
currentPassword
: Input for submitting the current password -
newPassword
: Input for setting a new password -
id
: Member's id
-
-
Example:
<div data-ms-member="email"></div>
- Read More: Displaying Member Data with Data Attributes
-
Data Options:
Custom Loader
-
data-ms-loader
: Replaces the default Memberstack loader with custom content when opening modals. Ensure the element is initially hidden withdisplay: none
.-
Example:
<div data-ms-loader style="display: none"> <img src="loader.gif"> </div>
- Read More: Creating a Custom Loader
-
Example:
Commenting
-
data-ms-channel="[id/name/posts/sort/form]"
: Defines the commenting section. Refer to the Commenting Attributes section for specific use cases. -
data-ms-post="[showThreads/edit/delete/content/isModerator/ownerProfileImage/hidden]"
: Manages individual post items. Refer to the Commenting Attributes section for specific use cases. -
data-ms-thread="[container/item/loadMore/content/sort]"
: Manages threads and replies. Refer to the Commenting Attributes section for specific use cases.
This guide provides a comprehensive overview of all Webflow Package Data Attributes, enabling you to harness the full potential of Memberstack's powerful membership platform within your Webflow projects.
Comments
5 comments
Hello !
Could we please have a the attribute data-ms-member=stripe-id please ?
Thanks !
William de Broucker great idea!
I have a few ideas, but I'm curious why you'd like this attribute? What would it help you to accomplish?
Hello !
I would like this attribute in order to use it in a cancelation form (in order to cancel the user via the Stripe API in Make).
Currently I'm using a script to extract the StripeCustomerId but that would be easier to have it in as an attribute
William de Broucker Would you mind sharing the script you're using to extract the StripeCustomerID?
Sure :)
Inside the form I hide then field stripeCustomerId which is empty at first
<input type="hidden" name="stripeCustomerId" id="stripeCustomerId">
and then I use this script (made using chatGPT) , then I collect the stripeCustomerId in a webhook in order to given the discount using the Stripe API
Please sign in to leave a comment.