Skip to main content

Lesson 1 of 10 · 1:51 · Beginner · Webflow

Create a free plan

Create a free plan in the dashboard and add it to your site.

Where this journey starts

In Journey 1 you built signup, login, redirects and a profile page. Now you’ll give members a plan, starting with a free one.

By the end of this lesson you can

  • Create a free plan in the Memberstack dashboard
  • Add the plan to a button with the Webflow app
  • Open a signup modal from the same button
  • Check in the Members tab that the free plan was added

Lesson notes

How it works

What a free plan is in Memberstack

A plan is a group a member belongs to. It decides what they can see, where they land after signup or login, and which permissions they get. A free plan is a plan with no price attached, so joining it never opens a checkout.

Free plans only have a Plan ID, which starts with pln_. Paid plans are sold through Price IDs that start with prc_. You will use the Plan ID on your site to put members on the plan.

How to create a free plan in the dashboard

The plan takes seconds to make. The description is optional and only for internal use.

  1. Open your Memberstack dashboard and click Plans in the side menu.
  2. Click Add plan, choose Free plan and click Next.
  3. Give it a name, for example Free, and click Create Plan.
  4. Back on the Plans page, open the plan's installation panel and copy the Plan ID.

How a button adds the plan

Memberstack reads data attributes on your page. A button or link with data-ms-plan:add="pln_your-plan-id" adds that free plan to the member who clicks it. In Webflow you can add it by hand under Custom attributes, or let the Memberstack Webflow app add it for you from its plans and pricing panel.

If a logged-out visitor clicks the button, Memberstack remembers the plan they picked and adds it once they sign up. To make that one click, give the same button data-ms-modal="signup" so it also opens the pre-built signup modal. You can also put data-ms-plan:add straight on a signup form.

How to check it worked

Publish the site, click the button and sign up with a test email. After signup the member goes to your default signup redirect, because the plan has no redirect of its own yet. Then open Members in the dashboard, find the new member and confirm the free plan shows as active.

Before you move on

0 of 4

Tick these off on your own site. Done with all of them? You’re ready for the next lesson.

Up next: Next, you’ll see the different places a free plan button can go: before, during or after signup.

Common questions

What attribute adds a free plan in Memberstack?

Use data-ms-plan:add="PLAN_ID" with the free plan's ID, which starts with pln_. Put it on a signup form or on a button that opens or links to signup.

Do I need Stripe for a free plan?

No. Free plans have no price, so no checkout opens and no Stripe connection is needed. Stripe only comes in when you add a paid price.

Can I use a Price ID on a free plan button?

No. Free plans only have Plan IDs. Memberstack's docs say a prc_ ID inside data-ms-plan:add leaves the member signed up with no plan.

Checked against the Memberstack docs

TranscriptAuto-generated captions
  1. 0:00

    Now that we’ve got signups and redirects working let’s talk about plans so all I’ve done here is created some buttons that do absolutely nothing on this page with free sign up and paid sign up so I’m going to teach you right now how to create and add a free plan to a member and then after that I’m going to show you paid here we are and let’s go back over here into Memberstack and go to plans so as you can see we do not have any plans let’s make one and let’s just call this free don’t need to add a description and

  2. 0:32

    that is it the plan is created now we need to apply it to our button so over here we’ve got name plan ad and we’ve got this plan ID let’s go ahead and copy that so there we go should work to click this button but just to be sure here we are and let’s again launch Our Memberstack app like just to make our life a little bit easier so let’s click plans and pricing and then do free add right there and and save so now what we need to do is if if they click this and then

  3. 1:04

    go ahead and sign up then it’ll work but let’s just make our lives a little bit easier here and go to modals and launch a sign up modal so now if I publish this let’s take a look at what is going to happen all right now let’s open it and see how it looks there we are let’s hit free sign up and just enter in some stuff and let’s hit sign up now as we can see it is redirecting us here we haven’t overridden the redirect on the

  4. 1:35

    plan level but we can tell that it has worked because if I go over here to members we can see that this free plan is active that is it for making free plans work next we’re going to talk about paid plans which overall are the same but we’re going to need to connect Stripe so let’s do that now

This is v1 of Memberstack University, built from the tutorials we’ve put so much work into over the years. We’d like to make a more organized series.