Attributes

Where to find a Content ID

This element will be visible to members with the correct plans/permissions

Logged in content

data-ms-content="members"

Logged out content

data-ms-content="!members"

Failed payment UI

data-ms-content="has-failed-payment"

Thank you! Your submission has been received!

Trialing content

data-ms-content="is-trialing"

Thank you! Your submission has been received!

Email verification content

data-ms-content="!is-verified"

Thank you! Your submission has been received!

Has password content

data-ms-content="!has-password"

Thank you! Your submission has been received!

Show old/extra designs

Default state for Member data attributes.

This is a dropdown with search. Allows user to filter options and make a selection.

Member Data

Display a member's data here.

data-ms-member="ID"

Display the "field ID" input when they select custom field

Where to find a Field ID

Display a member's data here. Create new custom field in Memberstack.

data-ms-member="email"

Display a member's email here.

data-ms-member="id"

Display a member's ID here.

data-ms-member="signup-date"

Display a member's signup-date here.

data-ms-member="signup-date"

Display a member's profile image here.

Default state for Member data attributes.

This is a dropdown with search. Allows user to filter options and make a selection.

Pre-fill this input with member data.

data-ms-member="ID"

Display the "field ID" input when they select custom field

Where to find a Field ID

Display a member's data here. Create new custom field in Memberstack.

data-ms-member="id"

Display a member's ID here.

data-ms-member="email"

Display a member's email here.

data-ms-member="signup-date"

Display a member's signup-date here.

data-ms-member="signup-date"

Display a member's profile image here.

Allow member's to confirm their current password.

Works inside of password update and password reset forms.

Allow member's to create a new password.

Works inside of password update and password reset forms.

Allow members to enter the 6-digit token they receive when resetting their password or logging in without a password.

Default state for form attributes.

This is a dropdown with search. Allows user to filter options and make a selection.

Forms

Turn this form into a Memberstack form.

data-ms-form=login

Forms dot

Allow Members to login here.

Signup form

Forms dot

Allow Members to signup here.

It's the same for all the other forms.

Forms dot

Allow Members to signup here.

This is the default state for the plans & pricing section.

This following section is only visible if a /link is not set.

Be sure to also include a link to your signup page, or an attribute to launch the signup modal if you want this button to launch your sign up flow.

Plans & Pricing

Type

Action

Where to find a Plan ID

When clicked, this element will allow member's to join a free plan before or after signup.

Be sure to also include a link to your signup page, or an attribute to launch the signup modal if you want this button to launch your sign up flow.

Clear previously selected:

What should happen to previously selected plans when a member clicks on this element?

Where to find a Plan ID

When clicked, this element will allow member's remove a free plan. This element is only visible if the member has the free plan.

Method

Where to find a Price ID

When clicked, this element will allow members to purchase a paid plan. If they have an existing plan it will be replaced with this new plan.

Be sure to also include a link to your signup page, or an attribute to launch the signup modal if you want this button to launch your sign up flow.

Where to find a Price ID

When clicked, this element will allow members to purchase a paid plan. Other prices are not effected.

Be sure to also include a link to your signup page, or an attribute to launch the signup modal if you want this button to launch your sign up flow.

Default state for modals

Modals

Launch a pre-built Memberstack modal.

Modals dot

Launch the Memberstack signup modal.

Modals dot

Launch the Memberstack login modal.

Modals dot

Launch the Memberstack ______ modal.

Default state

Links / Actions

Use this element to trigger an action.

End the current session. Only visible if logged-in.

Populate a link with the member's login-redirect. Only visible if a redirect is present.

Launch the Stripe Billing Portal.

Launch the browsers file picker UI. The selected image will automatically update the profile picture.

Allow members to resend the verification email.

Default state

Let's get the list of properties from the website below.

You could update any CSS property (like color, height, opacity, etc.) using the appropriate Style Object Property.

Inline CSS

This feature lets you add styling to an element on your published site. Learn more →

Inline CSS

This styling will be applied to your published site.

Default state

Error & Success Messages

Select a Type to get started.

Hidden by default. When there is an error, the element is set to display block for 7-seconds.

Hidden by default. When needed, the element is set to display block for 3-seconds.

Memberstack will populate this element with text based on the situation.