Skip to main content
  1. Memberstack 2.0
  2. Getting Started
  3. Webflow Guide

Getting Started Checklist (Webflow)

Duncan from Memberstack
Duncan from Memberstack
  • Updated

The Ultimate Memberstack Getting Started Guide (Webflow)

⏱️ TL;DR
Welcome to Memberstack! This guide will take you from a brand-new account to a fully working, launch-ready membership site.

  • Phase 1 (Steps 1-6): Get a working signup and login system running in Sandbox / Test Mode in under 10 minutes.
  • Phase 2 (Steps 7-9): Build out your core membership experience (redirects, dynamic navbars, and profile forms).
  • Phase 3 (Step 10): Connect your live domain, swap to Stripe Live mode, and launch!

 

Phase 1: The 10-Minute Quickstart (Sandbox / Test Mode)

Step 1: Create Your App

When you first log into your Memberstack account, you will be prompted to create an "App." Think of an App as a secure container that holds all of your members, plans, settings, and integrations.  If you are using a website builder or framework other than Webflow, please see our developer documentation.

  1. Give your app a clear name (like your company or project name).
  2. By default, all new apps start in Sandbox / Test Mode. This is a completely free testing environment where you can register up to 50 test members without entering a credit card.

Step 2: Add Your Domains

Memberstack needs to know which websites are allowed to communicate with your app to prevent unauthorized sites from accessing your member data.

  1. In your Memberstack Dashboard, go to Settings > Application.
  2. Important for testing: Add your Webflow staging domain (e.g., my-site.webflow.io).
  3. Add your production domain (e.g., mywebsite.com).
  4. Select 'Test Mode' for the domains you want to test the setup with. 

Step 3: Install the Memberstack Script

To connect your website to Memberstack, you must copy and paste a single line of JavaScript into your website's global header.

  1. Go to the Settings > Install page in your dashboard and copy your unique Header Script.
  2. Paste this script into your website's header:
    • In Webflow: Go to Site Settings > Custom Code and paste the script into the Head Code box. Click Save and Publish.
    • In HTML/Vanilla JS: Paste the script inside the <head> tag of every page on your site.

install_code.gif

Step 4: Create Your First Plan & Gate Content

A Member Plan controls what content your members can access and how much they are charged.

  1. Go to Plans in your dashboard and click Add Plan.
  2. Select Free (best for your first test) or Paid. Name your plan (e.g., Basic Membership) and click Create Plan.
  3. Next, navigate to Gated Content in the left-hand menu, click + Add, and define which pages or folders on your site should be locked in the 'Restricted URLs' section (e.g., /dashboard).
  4. Select your new plan to grant access, and click Save.

Step 5: Add a Signup Form (Using Pre-Built Modals)

The fastest way to let users register on your site is to use Memberstack's secure, pre-built overlay modals or use our default signup modal which doesn't require any design work or maintenance. You don't need to build any forms, just add data-ms-modal="signup" to a button/link on your site. 

Select any button or link on your page and apply the following custom attributes:

  • Signup Button:
    • Name: data-ms-modal
    • Value: signup
  • Login Button:
    • Name: data-ms-modal
    • Value: login

Publish your website. When a visitor clicks these elements, Memberstack will instantly open a beautiful, secure modal over your page.

Optional Signup Features:

Step 6: Test in Sandbox / Test Mode

Now it's time to run your first test to make sure your core connection is working perfectly.

  1. Go to your published Webflow staging site (.webflow.io).
  2. Click your "Sign Up" button to launch the modal and fill out the form.
  3. If it is a paid plan: Use Stripe's universal test card: 4242 4242 4242 4242 with any future expiration date and any CVC.
  4. Complete the signup.
  5. Return to your Memberstack Dashboard and click on Members. You will see your test account sitting in the list, complete with their email, signup date, and active plan!

Phase 2: Building the Member Experience

Once your basic connection is working, you need to configure how members navigate your site.

Step 7: Configure Default Redirects

To prevent members from getting stuck on the homepage after signing up or logging in, you must configure your redirects. Click this link to set the Default Redirects for your project.

Screenshot 2024-11-19 at 9.06.59 AM.jpg

Or you may...

  1. Go to your Memberstack Dashboard and navigate to Plans in order to setup the 'Default Settings.
  2. Set up the following three core redirects:
    • On Signup: Where should new members go immediately after registering? (e.g., /onboarding or /dashboard).
    • On Login: Where should returning members go? (e.g., /dashboard).
    • On Logout: Where should members be sent when they log out? (e.g., /home or /login).

Step 8: Set Up Dynamic Navbars (Public vs. Private)

You don't want logged-in members to see "Login" and "Sign Up" buttons, nor do you want logged-out visitors to see "Logout" or "My Profile" links. You can show or hide elements dynamically using custom attributes. Here's a link to copy/paste a standard navbar with all of the required data attributes. For more navbar components →

Select any element (nav links, buttons, or entire div blocks) in Webflow and apply these attributes:

  • To ONLY show an element to logged-out visitors:
    • Name: data-ms-content
    • Value: !members
  • To ONLY show an element to logged-in members:
    • Name: data-ms-content
    • Value: members
  • To turn a link into a functional Logout button:
    • Name: data-ms-action
    • Value: logout

Step 9: Custom Forms & Profile Management

While pre-built modals are fast, you may eventually want to design custom forms directly inside Webflow to match your brand perfectly. 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. 

Custom Signup & Login Forms

  1. Drag a standard Webflow Form Block onto your page.
  2. Select the Form element and add the attribute:
    • Name: data-ms-form
    • Value: signup (or login for login forms).
  3. Select the Email Input field and add:
    • Name: data-ms-member
    • Value: email
  4. Select the Password Input field and add:
    • Name: data-ms-member
    • Value: password

Optional Login Features

Member Profile Portal & Forms

To let members update their email, password, or custom fields, you can either:

  • Use the Pre-built Profile Modal: Add data-ms-modal="profile" to any button.
  • Build a Custom Profile Form: Create a form element with the attribute data-ms-form="profile", and map inputs using data-ms-member="email", or custom field IDs.

Additional Profile Features

Phase 3: Going Live

Step 10: Transition to Live Mode & Launch

When you are done testing in Sandbox /Test mode and are ready to accept real members and real payments:

  1. Connect Stripe Live: In your Memberstack Dashboard, toggle your environment from Sandbox / Test Mode to Live Mode in order to view Live Mode data in the dashboard. If you want to create paid plans, follow the prompts shown while creating a price for the paid plan to connect your Stripe account to Memberstack.  
  2. Configure Live Domains: Ensure your official production domain (e.g., mywebsite.com) is added and is set as a Live Mode domain. You can configure your domains on the Settings Page.
  3. Upgrade your Memberstack Tier: Choose a paid Memberstack subscription tier (Basic, Professional, Business, or Established) based on your estimated member volume. Checkout the calculator on the pricing page to figure out which plan is best for you. 
  4. Publish Live: Publish your Webflow site to your custom domain. Your site is now live and ready to accept real payments!
  5. You may need to update/change 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.

Step 11: Next Steps & Integrations

You made it! Congrats on making so much progress in your project! Below are a few other popular but optional features you can use in your project. 

Click here for a complete and searchable list of features. 

❓ Frequently Asked Questions (FAQ)

Q: What is the limit of Sandbox / Test mode?
Sandbox / Test mode is 100% free and allows you to register up to 50 test members. When you are ready to launch to real, paying customers, you must upgrade your app to a live, paid Memberstack subscription tier.

Q: Can I use social login (Google, Facebook, etc.)?
Yes! You can enable SSO/OAuth providers directly in your Memberstack Dashboard under Settings > Authentication, then link them to your Webflow buttons using simple data attributes.

 

Was this article helpful?

Didn’t find your answer?

Get an instant answer from Rey, or reach a human. Either way, we’re happy to help.

Ask Rey AI Ask the community Contact support

Comments

No comments yet. Start the conversation below.

Please sign in to leave a comment.

Sitemap
Ask the AINew Ask the Community Message Support
Slack Channel Product Wishlist Report a Bug
Twitter - @Memberstack System Status
Terms & Privacy Policies