Getting Started Checklist (Webflow)

Article author
Duncan Hamra
  • Updated

Below is everything you need to create your first Memberstack project. This article assumes you already took some time to create a Memberstack account.

Also! This article assumes you are using Webflow. See our developer documentation if you're using a framework like React. 

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. 

install_code.gif

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".

header_code.gif

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 

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.

Screen Shot 2023-08-23 at 10.45.49 AM.jpg

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 attribute data-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

profile1.gif

  1. Then you’ll need to create the equivalent custom fields in Memberstack. Here’s an article to get your started… Create Custom Fields.
  2. And then add the appropriate data-ms-member="fieldID" attributes to you input elements.

Form Two → Update Email

profile-email.gif

Form Three → Update Password

profile_password.gif

Additional Profile Features

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.

Screen Shot 2023-08-23 at 2.12.38 PM.jpg

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.

Screen Shot 2023-08-23 at 2.12.46 PM.jpg

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. 

Click here for a complete and searchable list of features

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.