Pre-built Modals

Article author
Duncan Hamra

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.

a-4.png

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.

a-4-1.png

Login Modal: Accessing Existing Accounts

The Login Modal allows customers to log in to their existing accounts by entering their email and password.

a-1.png

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.

d-3.png

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:

  1. Log in to your Webflow account and open your project.
  2. Select a button on the desired page.
  3. Click the gear icon at the top of the page to open the Button settings.
  4. Expand the Custom attributes folder and enter the appropriate values (see below).
  5. Click Publish to save your changes.

d-4.png

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.

d-7.png

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:

  1. Log in to your Memberstack account and click on Members in the side menu.
  2. Go to the top of the page and click on Custom Fields.
  3. Scroll to the bottom of the panel and click on Pre-built UI Settings.
  4. Click and drag any field using the six-dot icon to change its order.
  • Memberstack will automatically save the changes to both modals.

d-9.png

Hide Inputs: Streamlining the Modals

You can also hide fields on the Profile and Signup modals to streamline the user experience. Here's how:

  1. Log in to your Memberstack account and click on Members in the side menu.
  2. Go to the top of the page and click on Custom Fields.
  3. Scroll to the bottom of the panel and click on Pre-built UI Settings.
  4. Click the eye icon to hide a field.
  • Click the eye icon again to make the field visible on the modals.

d-10.png

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:

  1. Log in to your Memberstack account and click on Settings in the side menu.
  2. Click on Design.

To change the logo, click on Replace Image, select a JPG or PNG file from your device, and upload the image.

e-1.png

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.

e-2.png

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!

Was this article helpful?

Comments

12 comments

  • Comment author
    Doc Waller

    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

    1
  • Comment author
    Duncan Hamra

    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. 

    0
  • Comment author
    Jose Rodriguez

    Hi, and to open an Upgrade modal?

    1
  • Comment author
    Duncan Hamra

    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. 

    0
  • Comment author
    Jasontopia

    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?

    1
  • Comment author
    Duncan Hamra

    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. 

    0
  • Comment author
    Antoine Terrade

    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

    4
  • Comment author
    Farid Hosseini

    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 

    1
  • Comment author
    Memberstack Team

    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.

    0
  • Comment author
    Jam Filho

    Hey Antoine Terrade did you have any lucky with that. Cause I've asked Memberstack as well and so far no answer

    1
  • Comment author
    Antoine Terrade

    Hi Jam Filho, 

    Indeed I did not get an answer either from memberstack and I ended up creating my own modal pop-up using the documentation of "Front-end package" to call the desired methods (login, logout, password forget, etc.) at the key moment of my own modal. 

    The modals offered in the React packages did not meet all my desires and needs. 

    After I am on a React application under Next 13 and I secure my application with a gateway api so that no sensitive key can circulate publicly.

    I hope I have answered your questions. Sorry for my poor English:D

    Happy holidays:)



    0
  • Comment author
    Duncan Hamra

    cc Dillon Raphael

    0

Please sign in to leave a comment.