Skip to main content

Lesson 2 of 10 · 2:41 · Beginner

Where free plan buttons go

Add a free plan before, during or after signup, and the attribute for each.

Where this fits

You’ve added a free plan to one button. This lesson shows where else that button can live and when you might not need a free plan at all.

By the end of this lesson you can

  • Decide whether members pick a free plan before, during or after signup
  • Add the plan attribute to a button so clicking it adds the plan
  • Know that a plan picked before signup is added once they sign up
  • Use your default settings as a fallback free plan

Lesson notes

How it works

Before, during or after signup: where a free plan button can go

There are three places to hand out a free plan. Before signup, usually on a pricing table or an onboarding step on your marketing site. During signup, by putting the attribute on the signup form itself. After signup, by sending new members to a page where they choose their account type, for example Agency or Freelancer.

Each one uses the same attribute: data-ms-plan:add="pln_your-plan-id". What changes is when the member sees it. Memberstack's own guide for free-only sites recommends the after-signup route: everyone joins with no plan, then picks a type on a welcome page.

What happens when someone clicks the button

If the member is logged in, clicking adds the plan straight away. If they are logged out, Memberstack remembers what they clicked and adds that plan as soon as they create an account. That is why a pricing table before signup still works.

Give each choice its own button with its own Plan ID, and send it where that member type should go next. Each plan can have its own redirects, or several plans can share one dashboard page.

To take a free plan away, use data-ms-plan:remove="pln_your-plan-id". It removes free and one-time plans, not paid subscriptions.

When you don't need a free plan at all

Members can sign up without any plan. Your Default Settings (Plans, then Default Settings under the plans list) control where those members are redirected and what gated content they can see. If you only have one free tier and everything else is paid, treat Default Settings as that free tier.

Default Settings is also the fallback. If a paid plan is cancelled or a payment fails, the paid plan stops being active and the member is back on your defaults, so they can still reach pages like their profile.

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: Free plans are set. Next, you’ll connect Stripe and create your first paid plan.

Chapters

Common questions

Can a visitor choose a free plan before they have an account?

Yes. If a logged-out visitor clicks a data-ms-plan:add button, Memberstack remembers the choice and adds the plan once they sign up.

How do I remove a free plan from a member?

Give a button data-ms-plan:remove="PLAN_ID". It removes free and one-time plans. Paid subscriptions are cancelled in the Stripe customer portal instead.

Do I need a free plan if I only have one free tier?

Usually not. Members can sign up with no plan, and your Default Settings decide their redirects and access. Memberstack's freemium guide recommends this.

Attributes used in this video

  • data-ms-plan:add="PLAN_ID"

Checked against the Memberstack docs

TranscriptAuto-generated captions
  1. 0:00

    Hello in this video I’ll show you how to work with free plans on your site now there’s a few different ways you can add them to your project you can either add them prior to sign up usually this happens in the form of a pricing table or some kind of onboarding flow you can also add them during sign up or you can do it after sign up and segment users into particular plans after they have an account there are pros and cons to each method here but it really depends on what your use case is and what your goal

  2. 0:30

    are for the rest of this video I’ll show you how to create this UI here and we’re going to segment users into two different plans agency or freelancer so I’ll copy this component come over here to my site and paste this in and then here uh we have two different links which we can set up redirects to the dashboard page this is where I want my users to go uh once they have a plan and you could make these two different unique dashboards for each user type or in this case I’ll just one shared page

  3. 1:02

    and then we need to add our custom attributes if we go back over to Memberstack we will see right here we have the ability to add the plan whenever a member clicks on a button or a page element I’m going to copy this attribute and paste it right down there that is our plan ID and it’s what gets added to the member when they click on the button now if I were to save and publish this site and click on this button it would Auto automatically add the plan to my member now a few other things to note

  4. 1:33

    here that if I were to go with let’s say this kind of interface where I want people to select from free plans prior to creating an account what would happen is it would remember what they clicked on and then once they sign up it would add that free plan if you ever need to remove a free plan from a member a button with this attribute will remove the plan from the member the last thing I’m going to add here is that if you are creating an interface let’s say something like this where you have one

  5. 2:05

    type of free plan and then everything else is paid what I recommend doing is instead of creating a free plan you can get by with just using the default settings because members and Memberstack are able to sign up without a plan you can really treat those default settings as sort of your Baseline free plan or your fallback plan if somebody has a paid plan which becomes cancelled they will fall back back to the default settings if you have any questions while you’re getting set up with free plans

  6. 2:35

    please leave a comment in this video we’re happy to help and that’s it thanks for watching have a great day

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.