Welcome to the world of pre-built modals! In this article, we'll explore the various modals offered by Memberstack that can serve as alternatives to custom Webflow components. We'll cover Memberstack's modal options, customization features, and how to make the most out of them.
By the way, if you need maximum design control, multilingual support, different fields for signup and profile, or non-text field types (like checkboxes, radio buttons, and dropdowns), we recommend using custom Webflow components.
Modal Options: Exploring the Possibilities
Memberstack offers four modal options to enhance your user experience.
Reset Modal: Forgot Password
The Reset Modal, also known as the Forgot Password modal, allows customers to change their account password. Users simply enter their email address and copy-paste a six-digit code sent to their email by Memberstack.
Signup Modal: Creating a New Account
The Signup Modal enables customers to create a new account. Users can enter their email and password credentials or sign up using an authentication provider.
Login Modal: Accessing Existing Accounts
The Login Modal allows customers to log in to their existing accounts by entering their email and password.
Profile Modal: Updating Account Information
The Profile Modal is available to logged-in customers, providing them with the ability to update their account information, such as their email address and password.
Note: The Profile Modal also includes a link to Stripe's customer portal for members with a paid plan. Please keep in mind that you cannot add custom content to the modals besides custom fields.
Adding Custom Attributes: Tailoring Your Modals
If you choose to use modals instead of custom Memberstack components, you'll need to add custom attributes to your Webflow buttons. Here's how:
- Log in to your Webflow account and open your project.
- Select a button on the desired page.
- Click the gear icon at the top of the page to open the Button settings.
- Expand the Custom attributes folder and enter the appropriate values (see below).
- Click Publish to save your changes.
Custom Attribute Values
Use the following 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
You can combine two custom attributes on a single button. For example, you can pair data-ms-price:update="PRICE_ID" with the modal attribute. When a visitor signs up for a new account, Memberstack will automatically redirect them to the Stripe checkout page to complete the payment process.
Action Triggers
Instead of custom attributes, you can also add action triggers to your buttons. Here are a couple of examples:
- Stripe customer portal -
data-ms-action="customer-portal": This action triggers a redirect to the Stripe customer portal, bypassing the modal. - Log out -
data-ms-action="logout": This action triggers a log out event for the user.
Reorder Inputs: Customizing the Modals
You have the ability to change the order of fields on two pre-built modals: Profile and Signup. Here's how:
- Log in to your Memberstack account and click on Members in the side menu.
- Go to the top of the page and click on Custom Fields.
- Scroll to the bottom of the panel and click on Pre-built UI Settings.
- Click and drag any field using the six-dot icon to change its order.
- Memberstack will automatically save the changes to both modals.
Hide Inputs: Streamlining the Modals
You can also hide fields on the Profile and Signup modals to streamline the user experience. Here's how:
- Log in to your Memberstack account and click on Members in the side menu.
- Go to the top of the page and click on Custom Fields.
- Scroll to the bottom of the panel and click on 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: Personalizing the Modals
You can customize the logo and button color on all pre-built modals to match your brand. Here's how:
- Log in to your Memberstack account and click on Settings in the side menu.
- Click on Design.
To change the logo, click on Replace Image, select a JPG or PNG file from your device, and upload the image.
To change the button color, click on the Primary Color button, choose a color using HEX values, and click Save. Memberstack will automatically update the modal design with your chosen color.
That's it! Now you have a comprehensive understanding of Memberstack's pre-built modals and how to make the most out of them. Enjoy enhancing your user experience with these powerful tools!
Comments
9 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.Â
Hi, and to open an Upgrade modal?
Hi Jose Rodriguez 👋 You can use a data-ms-price:add or data-ms-price:update attribute to launch the checkout. If you want an upgrade modal that lists plans you'll need to create one or use one of our Webflow components instead.Â
Hi, Is it normal that after I log in through the modal, the returned page does not refresh automatically, and I need to manually refresh it to display the logged-in status? Or is there any setting that needs to be adjusted to enable automatic refresh?
Hi Jasontopia 👋
I'll check with the team on that one. I know you can fix that issue yourself right now by typing "?refresh" into the signup and login redirects. This will update the logged in status of the member.Â
Hello to all teams!Â
I use your services on an ambitious project with Next 13.
For now everything is fine, but only once.Â
I want to customize only the width style of my modal.
I use "useMemberstackModal".
 Do you have a lead or an idea that can help me?
Thank
Hello there
i have a website which is dreamdesign.co
i've integrated memberstack and made my pricing but here is the problem. when i click one of the buttons of my plans signup modal pops up and i want to change this modal to another components of memberstack
can you help me pleaseÂ
Hey Farid Hosseini 👋 You'll want to remove the data-ms-modal="signup" attribute from your pricing buttons. And instead, include a link to your signup page or a Webflow interaction to open your own modal.Â
If that does not work, please share your read-only link so we can help debug.
Please sign in to leave a comment.