All Webflow Package Data Attributes

Article author
Duncan Hamra
  • Updated

Memberstack is basically a back-end for your Webflow front-end. This article will show you ALL of the attributes you can use to connect Webflow & Memberstack.  

Displaying Member Data

Add one of the following attributes to a <div>, <span>, <a>, <b>, or other text element on your site to display member data. 

  1. data-ms-member="id"
  2. data-ms-member="email"
  3. data-ms-member="signup-date"
  4. data-ms-member="FIELD ID"

Signup Forms

Step-by-step guide →

  1. data-ms-form="signup"
  2. data-ms-member="email"
  3. data-ms-member="password"
  4. Optional, data-ms-member="FIELD ID"

Logins Forms

Step-by-step guide →

  1. data-ms-form="login"
  2. data-ms-member="email"
  3. data-ms-member="password"

Forgot Password Forms

Step-by-step guide →

Step 1 - Forgot password

  1. data-ms-form="forgot-password"
  2. data-ms-member="email"
  3. Redirect to reset password page

Step 2 - Reset password

  1. data-ms-form="reset-password"
  2. data-ms-member="token"
  3. data-ms-member="password"
  4. Redirect to success page

Profile Forms

Step-by-step guide →

Custom Fields Form

  1. data-ms-form="profile"
  2. data-ms-member="FIELD ID"

Email Form

  1. data-ms-form="email"
  2. data-ms-member="email"

Password form

  1. data-ms-form="password"
  2. data-ms-member="current-password"
  3. data-ms-member="new-password"

Contact Forms

Step-by-step guide →  

  1. data-ms-member="FIELD ID"

Pre-build Components

  1. data-ms-modal="signup"
  2. data-ms-modal="login"
  3. data-ms-modal="profile"
  4. data-ms-modal="forgot-password"

Free Plans

Step-by-step guide →  

  1. data-ms-plan:add="PLAN ID"
  2. data-ms-plan:remove="PLAN ID"

Paid Plans

Step-by-step guide →  

  1. data-ms-price:add="PRICE ID"
  2. data-ms-price:update="PRICE ID"
  3. data-ms-price:remove="all" (guide →)

Dashboard Link (login redirect)

Once you've set your login redirects, you can use this attribute to securely link from public pages to your logged-in area. 

  1. data-ms-action="login-redirect"

Log out Links

Step-by-step guide →  

  1. data-ms-action="logout"

Showing and Hiding Elements

Step-by-step guide →  

  1. data-ms-content="CONTENT ID" (visible with access to gated content)
  2. data-ms-content="members" (visible to members)
  3. data-ms-content="!members" (visible to non-members)

Less commonly used 👇

  1. data-ms-content="!CONTENT ID" (visible without access to gated content)
  2. data-ms-content="no-plans" (visible if logged in without a plan)
  3. data-ms-content="!no-plans" (visible to anyone without a plan)
  4. data-ms-content="free-plans" (visible if logged in with free plans)
  5. data-ms-content="!free-plans" (visible to anyone without free plans)
  6. data-ms-content="paid-plans" (visible if logged in with paid plans)
  7. data-ms-content="!paid-plans" (visible to anyone without paid plans)

 

 

Was this article helpful?

Comments

0 comments

Article is closed for comments.