All Webflow Package Data Attributes

Article author
Josh Lopez

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.

    • data-ms-modal="signup": Opens Memberstack's pre-built signup modal.

    • 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"
      • Read More: Create Profile Forms in Webflow
    • data-ms-modal="forgot-password": Opens Memberstack's pre-built forgot password modal.

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.

  • 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".

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

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.

Prices

  • data-ms-price:add="[PRICE_ID]": Adds a paid plan. Use on signup forms or buttons linking to signup.

  • data-ms-price:update="[PRICE_ID]": Updates/replaces a paid plan. Useful for switching to a higher tier plan.

  • data-ms-price:remove="all": Clears previously selected plans, useful for pricing tables with free and paid options.

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.

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

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>

  • data-ms-form="profile": Creates a profile update form for custom fields. Requires data-ms-member="CUSTOM_FIELD_ID" for each custom field input.

  • data-ms-form="email": Creates a form for updating email addresses. Requires data-ms-member="email" input.

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

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

  • data-ms-bind:class="[className]": Adds a class to elements based on member state.

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

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.

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

  • Comment author
    William de Broucker

    Hello ! 

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

    Thanks !

    2
  • Comment author
    Duncan from Memberstack

    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
  • Comment author
    William de Broucker

    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
  • Comment author
    Duncan from Memberstack

    William de Broucker Would you mind sharing the script you're using to extract the StripeCustomerID?

    0
  • Comment author
    William de Broucker

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

Please sign in to leave a comment.