Memberstack is basically a back-end for your Webflow front-end. This article will show you ALL of the attributes you can use from the Webflow Package API.
Data Attributes
Auth
- data-ms-auth-provider
- Must be used inside
data-ms-form="signup"
anddata-ms-form="login"
forms. - Must be configured and enabled in Memberstack global settings.
- Options available: google, facebook, microsoft, github, linkedin, spotify, and dribble
- Example:
<a data-ms-auth-provider="google" href="#"> Continue with Google </a>
- Read More: https://docs.memberstack.com/hc/en-us/search?utf8=✓&query=data-ms-auth-provider
- Must be used inside
- data-ms-auth=”manage-providers”
- Used as a container element to allow members to connect and disconnect auth providers.
- Must be used on its own and not inside a profile, login, or signup forms.
- Example:
<div data-ms-auth="manage-providers"> <a data-ms-auth-provider="google" href="#"> Continue with Google </a> </div>
- Read More: https://docs.memberstack.com/hc/en-us/articles/9188250184603-Social-Auth-Buttons-in-Profile-Forms
- data-ms-auth-connected-text
- Used to change the innerHtml of the element if the member has connected the auth provider.
- Must be used as a child of
data-ms-auth="manage-providers"
- Example:
<div data-ms-auth-connected-text="Disconnect Google"> Continue with Google </div>
- Read More: https://docs.memberstack.com/hc/en-us/articles/9188250184603-Social-Auth-Buttons-in-Profile-Forms
- data-ms-auth-disconnect
- Used within a
data-ms-auth-provider
element to show an additional element if the auth provider is connected. - Must be used as a child of
data-ms-auth="manage-providers"
- Could be used to display an x or trash icon inside an auth provider element.
- Example:
<div data-ms-auth-disconnect> <img src="YOUR_IMAGE_URL"> </div>
- Read More: https://docs.memberstack.com/hc/en-us/articles/9188250184603-Social-Auth-Buttons-in-Profile-Forms
- Used within a
Plans
- data-ms-plan:add="PLAN_ID"
- Used to add a free plan to a member.
- Can be added to a signup form or a button/link to a signup page.
- Can include multiple plan ids by separating them with a comma.
- Could be used with data-ms-content=”members” as a button that is shown only to members.
- Example:
or<form data-ms-form="signup" data-ms-plan:add="PLAN_ID"> <input type="text" data-ms-member="email"> <input type="text" data-ms-member="password"> </form>
<a data-ms-plan:add="PLAN_ID" href="/signup-form"> Signup Now </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7385162869147-Creating-Free-Plans-in-Memberstack
- data-ms-plan:remove="PLAN_ID"
- Used to remove a free plan or a one-time plan from a member.
- Cannot be used to remove a paid subscription from a member
- Could be used with data-ms-content="CUSTOM_FIELD_ID" to only show a cancel button if the member is part of Gated Content Group.
- Example:
<a data-ms-plan:remove="PLAN_ID" href="#"> Cancel Free Plan </a>
- Read More: Coming soon
Prices
- data-ms-price:add="PRICE_ID"
- Used to add a paid plan to a member.
- Can be added to a signup form or a button/link to a signup page.
- Could be used with data-ms-content="members" as a button that is shown only to members.
- Example:
or<form data-ms-form="signup" data-ms-price:add="PRICE_ID"> <input type="text" data-ms-member="email"> <input type="text" data-ms-member="password"> </form>
<a data-ms-price:add="PRICE_ID" href="/signup-form"> Signup Now </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7403200877211-Guide-to-Understanding-Paid-Plans-Prices-in-2-0
- data-ms-price:update="PRICE_ID"
- Used to update/replace a paid plan.
- Could be used so members only have 1 active paid plan at a time.
- Example:
or<form data-ms-form="signup" data-ms-price:update="PRICE_ID"> <input type="text" data-ms-member="email"> <input type="text" data-ms-member="password"> </form>
<a data-ms-price:update="PRICE_ID" href="/signup-form"> Signup Now </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7403200877211-Guide-to-Understanding-Paid-Plans-Prices-in-2-0
- data-ms-price:remove="all"
- Used to clear out any previously selected plans.
- Handy for when you have a pricing table with free and paid options.
- Example:
<a data-ms-price:remove="all" href="#"> Remove all </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7406222866459-Creating-a-Pricing-Table-in-Webflow
Actions
- data-ms-action="resend-verification-email"
- Used to send an additional verification email to the member.
- Only works if you have verification email enabled in Global Settings → Emails.
- Example:
<a data-ms-action="resend-verification-email" href="#"> Resend verification email </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/8437630733083-Email-Verification
- data-ms-action="customer-portal"
- Used to let members manage their paid plans.
- Memberstack relies on Stripe’s Billing Portal for paid plans.
- Automatically hides element for members with no paid plans.
- Example:
<a data-ms-action="customer-portal" href="#"> Open Customer Portal </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7782712032539-Stripe-Customer-Portal
- data-ms-action="logout"
- Used to log out the current member.
- Use this on buttons or links to log out the current member.
- Automatically hides the element if the member is logged out.
- Example:
<a data-ms-action="logout" href="#"> Logout </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7389990064283-Create-a-Logout-Link-or-Button-in-Webflow
- data-ms-action="login-redirect"
- Used to redirect the member to their Login Redirect Url.
- Only visible to logged-in members.
- If no member login URL is available it uses the plan redirect if specified, or the default login redirect.
- Example:
<a data-ms-action="login-redirect" href="#"> Your Content </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/9780287236507-Login-Redirect-Buttons
Modals
- data-ms-modal="login"
- Used to show Memberstack’s Pre-Built Login Modal.
- Can be used on links or buttons.
- Example:
<a data-ms-modal="login" href="#"> Login </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7785629397659-Create-a-Login-Form-in-Webflow
- data-ms-modal="signup"
- Used to show Memberstack’s Pre-Built Signup Modal
- Signs up a member with no plan unless a data-ms-price (paid) or data-ms-plan (free) data attribute is added to it.
- Can be used on links or buttons.
- Example:
<a data-ms-modal="signup" data-ms-plan:add="PLAN_ID" href="#"> Signup </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7424129003547-Create-a-Signup-Form-in-Webflow
- data-ms-modal="profile"
- Used to show Memberstack’s Pre-Built Profile Modal
- Allows a member to change their plans, email, passwords, and log out.
- Only visible to logged-in members.
- Example:
<a data-ms-modal="profile" href="#"> Profile </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7785751124379-Create-Profile-Forms-in-Webflow
- data-ms-modal="forgot-password"
- Used to let a member change their password if they cannot remember it.
- Sends an email to the member that includes a token they need to add to the modal before being able to change their password.
- Example:
<a data-ms-modal="forgot-password" href="#"> Forgot Password </a>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7787009388315-Create-a-Forgot-Password-Form-for-logged-out-users-
Forms
- data-ms-form="signup"
- Signs up a member with no plan unless a data-ms-price (paid) or data-ms-plan (free) data attribute is added to it.
- Will only work if added to a form element.
- Adding a redirect to the form element will override redirects saved in Memberstack.
- Required child element data attributes:
- data-ms-member=”email”
- data-ms-member=”password”
- Example:
<form data-ms-form="signup" data-ms-plan="PLAN_ID"> <input type="text" data-ms-member="email"> <input type="text" data-ms-member="password"> </form>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7424129003547-Create-a-Signup-Form-in-Webflow
- data-ms-form="login"
- Logs in a member.
- Required child element data attributes:
- data-ms-member=”email”
- data-ms-member=”password”
- Adding a redirect to the form element will override redirects saved in Memberstack.
- Example:
<form data-ms-form="login"> <input type="text" data-ms-member="email"> <input type="text" data-ms-member="password"> </form>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7785629397659-Create-a-Login-Form-in-Webflow
- data-ms-form="profile"
- Allows a member to update their member data.
- Only work on custom fields added to Memebrstack.
- Does not work on email or passwords.
- Required child element data attributes:
- data-ms-content=”CUSTOM_FIELD_ID”
- Example:
<form data-ms-form="profile"> <input type="text" data-ms-content="CUSTOM_FIELD_ID"> </form>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7785751124379-Create-Profile-Forms-in-Webflow
- data-ms-form="email"
- Allows a member to update their email address.
- Example:
<form data-ms-form="email"> <input type="text" data-ms-member="email"> </form>
- Read More:
- data-ms-form="password"
- Allows a member to update their password.
- Required child element data attributes:
- data-ms-member=”current-password”
- data-ms-member=”new-password”
- Example:
<form data-ms-form="password"> <input type="text" data-ms-member="current-password"> <input type="text" data-ms-member="new-password"> </form>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7787009388315-Create-a-Forgot-Password-Form-for-logged-out-users-
- data-ms-form="forgot-password"
- Used to let a member change their password if they cannot remember it.
- Sends an email to the member that includes a token they need to add to a reset password form before being able to change their password.
- Required child element data attributes:
- data-ms-member=”email”
- Example:
<form data-ms-form="forgot-password"> <input type="text" data-ms-member="email"> </form>
- Read More:
- data-ms-form="reset-password"
- Used to allow members to reset their password with a token.
- Requires a token from a forgot password form.
- Required child element data attributes:
- data-ms-member="token"
- data-ms-member="password"
- Example:
<form data-ms-form="reset-password"> <input type="text" data-ms-member="token"> <input type="text" data-ms-member="password"> </form>
- Read More: https://docs.memberstack.com/hc/en-us/articles/7787009388315-Create-a-Forgot-Password-Form-for-logged-out-users-
Content
- data-ms-content="members"
- Only visible to all logged-in members.
- data-ms-content="!members"
- Only visible to logged-out members.
- data-ms-content="verified"
- Only visible to all logged-in members who are verified.
- data-ms-content="!verified"
- Only visible to all logged-in members who are not verified.
- data-ms-content="is-trialing"
- Only visible to all logged-in members who are in a trial.
- data-ms-content="!is-trialing"
- Only visible to all logged-in members who are not in a trial.
- data-ms-content="free-plans"
- Only visible to all logged-in members who have a free plan.
- data-ms-content="!free-plans"
- Only visible to all logged-in members who do not have a free plan.
- data-ms-content="paid-plans"
- Only visible to all logged-in members who have a paid plan.
- data-ms-content="!paid-plans"
- Only visible to all logged-in members who do not have a paid plan.
- data-ms-content="no-plans"
- Only visible to all logged-in members who do not have any plans.
- data-ms-content="!no-plans"
- Only visible to all logged-in members who do have a plan.
- data-ms-content="has-password"
- Only visible to all logged-in members who have an email password.
- data-ms-content="!has-password"
- Only visible to all logged-in members who do not have an email password.
- data-ms-content="GATED_CONTENT_GROUP_ID"
- Only visible to all logged-in members who have access to the Content Group.
- data-ms-content="!GATED_CONTENT_GROUP_ID"
- Only visible to all logged-in members who do not have access to the Content Group.
Members
- data-ms-member="signup-date"
- Used to display the current member’s signup date.
- Only visible to logged-in members.
- Can be used on div, p, span, and heading elements.
- Read More: Coming soon
- data-ms-member="CUSTOM_FIELD_ID"
- Used to display the current member’s custom field data.
- Can be used on div, p, span, and heading elements.
- Read More: https://docs.memberstack.com/hc/en-us/articles/7842471590811-Pre-populate-Forms-with-Member-Data-plus-Hidden-Fields-
- data-ms-member="email"
- Used to display the current member’s email.
- Can be used on input, div, p, span, and heading elements.
- Read More: https://docs.memberstack.com/hc/en-us/articles/7842471590811-Pre-populate-Forms-with-Member-Data-plus-Hidden-Fields-
- data-ms-member="password"
- Used as an input to submit passwords.
- Only used on input elements.
- Only used as a child element in a form.
- Read More: https://docs.memberstack.com/hc/en-us/articles/7787009388315-Create-a-Forgot-Password-Form-for-logged-out-users-
- data-ms-member="token"
- Used as an input for the reset password form.
- Read More: https://docs.memberstack.com/hc/en-us/articles/7787009388315-Create-a-Forgot-Password-Form-for-logged-out-users-
- data-ms-member="current-password"
- Used as an input for the password form.
- Read More: https://docs.memberstack.com/hc/en-us/articles/7785751124379-Create-Profile-Forms-in-Webflow
- data-ms-member="new-password"
- Used as an input for the password form.
- Read More: https://docs.memberstack.com/hc/en-us/articles/7785751124379-Create-Profile-Forms-in-Webflow
Custom Loader
- data-ms-loader
- Replaces the default loader that is shown before displaying Memberstack modals with content that has this data attribute.
- Make sure you hide the loader on the page by setting display none.
- Example:
<div data-ms-loader style="width:100%; display:none"> <div style="height:0;padding-bottom:75%;position:relative;width:100%"> <iframe allowfullscreen="" frameBorder="0" height="100%" src="[<https://giphy.com/embed/uhYPkjP03h9RvVdazZ/video>](<https://giphy.com/embed/uhYPkjP03h9RvVdazZ/video>)" style="left:0;position:absolute;top:0" width="100%"></iframe> </div> </div>
- Read More: Coming soon
Examples:
Signup form for no plan:
<form data-ms-form="signup">
<input type="text" data-ms-member="email">
<input type="text" data-ms-member="password">
</form>
Signup form for a free plan:
<form data-ms-form="signup" data-ms-plan="PLAN_ID">
<input type="text" data-ms-member="email">
<input type="text" data-ms-member="password">
</form>
Signup form for a paid plan:
<form data-ms-form="signup" data-ms-price="PRICE_ID">
<input type="text" data-ms-member="email">
<input type="text" data-ms-member="password">
</form>
Signup form with custom fields:
<form data-ms-form="signup">
<input type="text" data-ms-member="CUSTOM_FIELD_ID">
<input type="text" data-ms-member="email">
<input type="text" data-ms-member="password">
</form>
Login form:
<form data-ms-form="login">
<input type="text" data-ms-member="email">
<input type="text" data-ms-member="password">
</form>
Profile form:
<form data-ms-form="profile">
<input type="text" data-ms-member="CUSTOM_FIELD_ID">
</form>
Update email form for logged-in members:
<form data-ms-form="email">
<input type="text" data-ms-member="email">
</form>
Forgot password form:
<form data-ms-form="forgot-password">
<input type="text" data-ms-member="email">
</form>
Reset password form (excepts the token from the email sent from forgot password form):
<form data-ms-form="reset-password">
<input type="text" data-ms-member="token">
<input type="text" data-ms-member="password">
</form>
Show an element only to logged In members:
<div data-ms-content="members">
Members Only
</div>
Hide an element from logged-in members -or- Show an element only to logged-out members.
<div data-ms-content="!members">
Logged Out Users Only
</div>
Replace the Memberstack loader for Pre-Built Modals:
<div data-ms-loader style="width:100%">
<div style="height:0;padding-bottom:75%;position:relative;width:100%">
<iframe allowfullscreen="" frameBorder="0" height="100%" src="[<https://giphy.com/embed/uhYPkjP03h9RvVdazZ/video>](<https://giphy.com/embed/uhYPkjP03h9RvVdazZ/video>)" style="left:0;position:absolute;top:0" width="100%"> </iframe>
</div>
</div>
Comments
0 comments
Please sign in to leave a comment.