This article covers all things related to pre-built modals, those popup windows that you can use as an alternative to custom Webflow components. I'll show you Memberstack's modal options plus customization features, like how to reorder input fields, hide inputs, and tweak the design.
BTW I recommend using the custom Webflow components over modals if you need to:
- maximize design control of your UI
- translate your UI out of English
- display different fields in signup vs profile
- use field types other than plain text (e.g. checkbox, radio, select, etc.).
Modal Options
Memberstack offers four modal options.
Reset modal
Also known as the Forgot Password modal, this one helps customers change their account password. The customer enters their email address into the field and then copies and pastes a six-digit code which Memberstack automatically sends to their email account.
Signup modal
This modal helps customers create a new account. Customers enter email and password credentials or signup with an auth provider.
Login modal
The customer logs in to an existing account by entering their email and password here.
Profile modal
Available when a customer is logged in, this modal lets users update account information (e.g. email address and password).
Adding Custom Attributes
If you decide to use modals (instead of custom Memberstack components), then you'll need to add custom attributes to your Webflow buttons.
- Log in to your Webflow account and open a project.
- Open a page and select a button.
- Click the gear icon at the top of the page to open the Button settings.
- Expand the Custom attributes folder and then enter the correct values. (see below)
- Click Publish to save.
Values
Enter these custom attributes to enable a Memberstack modal.
- Sign up -
data-ms-modal="signup"
- Login -
data-ms-modal="login"
- Profile -
data-ms-modal="profile"
- Forgot Password -
data-ms-modal="forgot-password"
Pairing attributes
It's possible to combine two custom attributes on a single button. You can, for instance, pair data-ms-price:update="PRICE_ID"
with the modal attribute.
Once a visitor signs up for a new account, Memberstack automatically sends them to the Stripe checkout where they can pay for the plan.
Actions
Instead of custom attributes, you can add action triggers to a button.
- Stripe customer portal -
data-ms-action="customer-portal"
This action doesn't open a modal. Instead, the button redirects the user to their Stripe customer portal.
- Log out -
data-ms-action="logout"
Reorder Inputs
Change the order of fields on two pre-built modals: Profile and Signup.
- Log in to your Memberstack account and click Members on the side menu.
- Go to the top of the page and click Custom Fields.
- Go to the bottom of the panel and click Pre-built UI Settings.
- Click any six-dot icon and drag the field to change its order.
- Memberstack auto-saves the changes to both modals.
Hide Inputs
Hide fields on two pre-built modals: Profile and Signup.
- Log in to your Memberstack account and click Members on the side menu.
- Go to the top of the page and click Custom Fields.
- Go to the bottom of the panel and click Pre-built UI Settings.
- Click the eye icon to hide a field.
- Click the eye icon again to make the field visible on the modals.
Logo And Button Color
Customize the logo and button color on all pre-built modals.
- Log in to your Memberstack account and click Settings on the side menu.
- Click Design.
To change the logo, click Replace Image, locate a file (JPG or PNG) on your device, and then upload the image.
To change the button color, click the Primary Color button, select a color (HEX), and then click Save. Memberstack automatically updates the modal design.
That's it.
Now you know how everything about Memberstack's pre-built modals.
Comments
2 comments
Hi there! Is it possible to add custom/new sections to the Profile Modal? Something relating to my company? Or maybe even a link to the Stripe Customer Portal they can access from inside the Profile Modal?
Thanks for your time and energy on this question!
- Doc Waller
LYFE At Home, Founder & Creative Director
Hi Doc Waller 👋 It's not possible to add a new section to pre-built profile modal, but you can build your profile modal like this. https://www.memberstack.com/webflow/profile-modal
Also some good news, the Pre-build modal does include a link to Stripe Customer Portal 🎉 It only appears if a member has a customer in Stripe.Â
Please sign in to leave a comment.