Pre-built Modals

Article author
Duncan Hamra

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.

a-4.png

Signup modal

This modal helps customers create a new account. Customers enter email and password credentials or signup with an auth provider. 

a-4-1.png

Login modal

The customer logs in to an existing account by entering their email and password here.

a-1.png

Profile modal

Available when a customer is logged in, this modal lets users update account information (e.g. email address and password).

d-3.png

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.

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

d-4.png

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.

d-7.png

  • Log out - data-ms-action="logout"

Reorder Inputs

Change the order of fields on two pre-built modals: Profile and Signup.

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

d-9.png

Hide Inputs

Hide fields on two pre-built modals: Profile and Signup.

  1. Log in to your Memberstack account and click Members on the side menu.
  2. Go to the top of the page and click Custom Fields.
  3. Go to the bottom of the panel and click 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

Customize the logo and button color on all pre-built modals.

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

To change the logo, click Replace Image, locate a file (JPG or PNG) on your device, and then upload the image.

e-1.png

To change the button color, click the Primary Color button, select a color (HEX), and then click Save. Memberstack automatically updates the modal design.

e-2.png

 

That's it.

Now you know how everything about Memberstack's pre-built modals.

Was this article helpful?

Comments

2 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

Please sign in to leave a comment.