All Webflow Package Data Attributes

Updated June 05, 2024 18:09
5 comments

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.

Modals

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
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
data-ms-modal="profile": Opens Memberstack's pre-built profile modal for logged-in users.
- Example: <a data-ms-modal="profile" href="#">Profile</a>
- Read More: Create Profile Forms in Webflow
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

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
data-ms-auth-connected-text="[text]": Changes the element's text if the provider is connected. Must be a child of data-ms-auth="manage-providers".
- Example: <div data-ms-auth-connected-text="Disconnect Google">Connect Google</div>
- Read More: Social Auth Buttons in Profile Forms
data-ms-auth-disconnect: Shows a child element (e.g., an X icon) if the provider is connected. Must be a child of data-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

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
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

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
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
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

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
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
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
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

Forms

data-ms-form="signup": Creates a signup form. Requires data-ms-member="email" and data-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
data-ms-form="login": Creates a login form. Requires data-ms-member="email" and data-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. Requires data-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
data-ms-form="email": Creates a form for updating email addresses. Requires data-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
data-ms-form="password": Creates a form for updating passwords. Requires data-ms-member="current-password" and data-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
data-ms-form="forgot-password": Creates a forgot password form. Requires data-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
data-ms-form="reset-password": Creates a reset password form that uses a token from the forgot password email. Requires data-ms-member="token" and data-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

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
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
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

Members

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

Custom Loader

data-ms-loader: Replaces the default Memberstack loader with custom content when opening modals. Ensure the element is initially hidden with display: none.
- Example: <div data-ms-loader style="display: none"> <img src="loader.gif"> </div>
- Read More: Creating a Custom Loader

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.

Was this article helpful?

Comments

5 comments

William de Broucker
- July 25, 2023 07:32
Hello !

Could we please have a the attribute data-ms-member=stripe-id please ?

Thanks !

2
William de Broucker
- July 26, 2023 08:07
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

1

William de Broucker

July 28, 2023 08:22

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

<script>
const memberstack = window.$memberstackDom
memberstack.getCurrentMember().then(({ data: member }) => {
    // Find the hidden input field and set its value to the stripeCustomerId
    document.getElementById('stripeCustomerId').value = member.stripeCustomerId;
})

$(document).ready(function() {
    $('#wf-form-Cancelation-Form').submit(function(e) {
        e.preventDefault();

        var formData = $(this).serialize();
        console.log('Form data:', formData);  // check the serialized form data
        var actionUrl = $(this).attr('action');

        $.post(actionUrl, formData)
            .done(function() {
                window.location.href = "/membership/offre-annulation";
            })
            .fail(function() {
                alert('There was a problem with the submission. Please try again.');
            });
    });
});
</script>

Duncan from Memberstack
- July 25, 2023 18:15
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?

0
Duncan from Memberstack
- July 27, 2023 20:28
William de Broucker Would you mind sharing the script you're using to extract the StripeCustomerID?

0

Please sign in to leave a comment.