Below is everything you need to create your first Memberstack project. This article assumes you have a Memberstack account and are using Webflow. If you are using another website builder or framework please see our developer documentation.
1. Install Header Code
To begin, go to the Install Code page in Memberstack. Click to copy your header script and then scroll down for next steps.
Paste the Memberstack Webflow Install script in the Head code section. Make sure it's at the very top, click "Save Changes", and then "Publish".
2. Create a Sign Form
Copy one of our 500+ free components, or use our default signup modal which doesn't require any design work or maintenance. Just add data-ms-modal="signup" to a button/link on your site.
Once your site is published, members can use this form to create a free account. Continue to section 3 to setup addition free plans or paid plans.
Optional Signup Features
- Collect member data using Custom Fields & Inputs →
- Send Welcome Emails →
- Create Create a Multi-step Onboarding Form →
- Enable Google or Facebook auth →
- Explore more Auth Providers →
- Switch to or add Passwordless Login →
- Require new members to Verify their Emails →
3. Redirects
When someone signs up, logs in, or logs out you get to decide what page they see next.
Click this link to set the Default Redirects for your project.
Signup Redirects → Use this to welcome new members, ask onboarding questions, track conversion events, redirect members who have not completed checkout, and more! This redirect is also used when a member successfully verifies their email address.
Login Redirects → Use to grant access to your members-only area. Usually a central "dashboard" page. If all of your plans are paid, we recommend creating a "complete" checkout page so folks who fail to checkout can do so the next time they visit.
Logout Redirects → Let the member know they have been logged out. Default = home.
You'll be able to set more specific plan-level redirects later, should you need them.
4. Plans & Pricing
Plans can be free or paid and usually grant access to some kind of gated content.
There are a ton of things you can do with plans, so be sure to select the use case below that best fits your situation. You'll find step-by-step instructions w/ videos to get set up in minutes.
Which Best Describes Your Site?
I'm building a site with...
5. Gate Content
In this section, we'll show you how to control access to your website's content. You can choose which pages, folders, and page elements are visible to your users, and decide who should have access to them and where they should go if they don't.
Checkout the Security Checklist to make it more unlikely that non-members will ever access your gated content.
Optional Gated Content Features
-
Show/hide individual elements - For example, you can use the attribute
data-ms-content="members"to make an element members only. Use the attributedata-ms-content="!members"to make an element not for members. - Hosted Content - Securely serve HTML or URLs only when a member has access.
6. Profile Page
You have the option to build your own custom profile UI, or use Memberstack's pre-built modals. data-ms-modal="profile". If you build your own, you'll need to add 3 different types (pictured below).
Form One → Update Custom Fields
- Then you’ll need to create the equivalent custom fields in Memberstack. Here’s an article to get your started… Create Custom Fields.
- And then add the appropriate
data-ms-member="fieldID"attributes to you input elements.
Form Two → Update Email
Form Three → Update Password
Additional Profile Features
- Launch the Stripe Billing Portal.
- Add Profile Images to your site.
- Configure Social Auth Buttons in Profile Forms.
7. Login Forms
Copy one of our 500+ free components, or use our default login modal which doesn't require any design work or maintenance. Just add data-ms-modal="login" to a button/link on your site.
Once your login form is in place, you can decide if you'd prefer to build your own forgot password forms or use the default forgot password modals. data-ms-modal="forgot-password".
Optional Login Features
8. Navbars
We recommend creating 2 different navbars for you site: one for members, and one for the public. Here's a link to copy/paste a standard navbar with all of the required data attributes. More navbar components →
Public Navbar
This nav bar should live on public-facing pages and only link to other public-facing pages.
Sign up - Link directly to your own custom signup forms, or use Memberstack's pre-built modals. data-ms-modal="signup".
Login - Link directly to your own custom logins forms, or use Memberstack's pre-built modals. data-ms-modal="login".
Member's only pages - Instead of linking directly to your gated content, you can use the data-ms-action="login-redirect" attribute to create a dynamic button. The button will be hidden when logged out and dynamically populate when logged-in. Login-Redirect Link →
Show/hide elements - Use the attribute data-ms-content="members" to make an element members only. Use the attribute data-ms-content="!members" to make an element not for members.
Private Navbar for Members
This nav bar lives on private pages.
Member's only pages - You can link directly to your gated content now.
Log out - Use the attribute data-ms-action="logout"to automatically end the session and trigger a logout redirect. Docs →
Billing - If your site has paid plans use the attribute data-ms-action="customer-portal" to open the Stripe Customer Portal.
Profile - You can link directly to your own custom profile page (next section) or you can use Memberstack's pre-built modals. data-ms-modal="profile".
9. Going live ✨
Every new Memberstack project is in Test Mode by default. Once you're ready to go live, you'll need to start paying for Memberstack. Checkout the calculator on the pricing page to figure out which plan is best for you.
Then, you'll need to to specify which domains should be used for testing and which are in production (a.k.a used by real members). You can configure your domains on the Settings Page.
When you "go live" your plans, gated content, permissions, custom fields, metadata fields, etc. all carry over.
You only thing you may need to update/change is your API keys. You’ll want to make sure you’re using your live-mode keys in your live project. You can continue using the test mode keys for testing.
Next Steps
You made it! Congrats on making so much progress in your project! Below are a few other popular and optional features you can use in your project.
- Make.com Integration (Formerly Integromat)
- Zapier Integration
- Understanding Member Data in Memberstack: Custom Fields, Metadata, and JSON
- Team Members, Admin, and Owners
- Personalize Text with Member Data
- Enable Cross-Domain Login with Memberstack
- Create a Forgot Password Form
- Import Members via CSV (Free & Paying)
Click here for a complete and searchable list of features.
Comments
0 comments
Please sign in to leave a comment.