Launching Your First Memberstack Project: The Easy Way

Article author
Josh Lopez
  • Updated

Welcome to Memberstack! This guide will help you get started with membership features on your Webflow site quickly and easily.

Why Choose Memberstack?

Memberstack simplifies adding powerful membership features to your Webflow website. You can create member-only areas, manage user accounts, process payments, and more - all without any coding!

Adding the Memberstack Install Script to Webflow

To begin using Memberstack with your Webflow project, you need to add the Memberstack install script. Here’s how:

  1. Access the Install Code Page:

    • Go to the Install Code page in Memberstack.
    • Click the "Copy code" button to copy your personalized header script to your clipboard. It will look like this:
      <!-- Memberstack webflow package -->
      <script data-memberstack-app="YOUR_APP_ID" src="https://static.memberstack.com/scripts/v1/memberstack.js" type="text/javascript"></script>
      
  2. Implement the Script into Webflow:

    • In the Webflow designer view, click on the top left menu (the "w" or hamburger menu).
    • Select "Site settings" from the dropdown menu.
    • Click on the "Custom code" tab.
    • Paste the Memberstack install script into the Head code section. Ensure it is placed at the very top if you have other code.
    • Click "Save Changes" and then "Publish" to finalize the installation of your header script.

Now that the install script is added, you’re ready to start building with Memberstack!

Get Started: Three Simple Options

  1. Start with a Memberstack Template:

    • Browse Our Templates: Check out our templates to find a pre-built Webflow template that fits your project.
    • Create a Memberstack Account: When you purchase a template, you’ll be prompted to create a free Memberstack account.
    • Import Template Settings: During account creation, paste the Template ID (found on the template page) into the designated field to automatically import membership settings like plans, gated content, and custom fields.
    • Connect to Stripe (Optional): If your template includes paid plans, link your Memberstack account to Stripe to start accepting payments.
    • Customize and Publish: Replace placeholder content, customize the design, and publish your new membership website!
  2. Use Pre-built Components:

    • Explore Our Components: Discover hundreds of pre-designed Webflow components for signup forms, login forms, profile pages, pricing tables, and more at our components page.
    • Copy and Paste: Simply copy the desired component and paste it into your Webflow project. All necessary Memberstack data attributes are already included.
    • Connect Memberstack: Follow the instructions in the component description to connect it to your Memberstack settings.
    • Customize and Publish: Personalize the component’s design, connect it to your website’s logic, and publish your changes.
  3. Utilize Pre-built Modals:

    • Add Buttons/Links: Add buttons or links to your Webflow site for signup, login, profile, and forgot password functionality.
    • Apply Data Attributes:
      • For signup: Use the attribute data-ms-modal="signup"
      • For login: Use the attribute data-ms-modal="login"
      • For profile: Use the attribute data-ms-modal="profile"
      • For forgot password: Use the attribute data-ms-modal="forgot-password"
    • Publish Your Changes: Memberstack’s pre-built modals will automatically appear when users click these buttons or links.

Test Mode: Build & Experiment Risk-Free

Every new Memberstack project starts in Test Mode. This free sandbox environment lets you:

  • Experiment Freely: Test all of Memberstack’s features without worrying about real transactions or affecting your live site.
  • Use Test Credit Cards: Simulate payments and checkout processes using Stripe’s test card numbers (found here).
  • Debug with the Test Mode Inspector: Click the "Test Mode" badge on your site to open the Inspector, which helps you identify and fix errors, view data attributes, and ensure everything works as expected. (more here)

Going Live: Ready to Launch?

After testing your setup and being ready to launch, follow these steps:

  1. Upgrade to a Paid Plan: Choose a Memberstack plan that suits your needs at our pricing page.
  2. Configure Live Mode Domains: In your Memberstack dashboard, go to Settings > Application and specify your live website domain to remove the "Test Mode" badge and enable real transactions.
  3. Replace API Keys (Optional): If using custom code or integrations (like Zapier), replace your test mode API keys with live mode API keys.

Congratulations! You’ve successfully launched your Memberstack project on your Webflow site. Start building your membership community now!

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.