Skip to main content

Starts at 0:04, after the intro.

Lesson 4 of 6 · 5:48 · Intermediate · Webflow

Metered paywall for articles

Give visitors a few free articles a month, then show a paywall that asks them to sign up or upgrade.

Where this fits

You’ve shown content to one plan. Now you’ll let anyone read a few articles free each month, then show a paywall that asks them to sign up or upgrade.

By the end of this lesson you can

  • Add MemberScript 228 to your blog post template page
  • Set a monthly limit for logged-out visitors and a different limit for each plan
  • Build the paywall with the articles read, the limit and the reset date
  • Strip the article from the page once the limit is reached

Heads up: Visitors who aren't logged in are counted in their browser, so clearing site data resets their count. Treat it as a nudge to sign up, not as protection for content you sell.

Lesson notes

How it works

How a metered paywall works

A metered paywall lets people read a set number of articles each month for free. Once they reach the limit, the next new article is blocked and a paywall asks them to log in or subscribe. MemberScript 228 does this on a Webflow blog. By default the limit is three articles and the count resets at the start of each calendar month.

The script keeps a list of article IDs the reader has opened this month. Opening an article that's already on the list doesn't count again, so readers can go back to articles they've already read. For visitors who aren't logged in, the list lives in the browser's local storage. For members, it's saved in their member JSON under article_meter, with the period, the article IDs and the count. If a visitor logs in partway through the month, the articles they read logged out are merged into their member JSON.

Setting limits for visitors and for each plan

Add the script to your blog post template page rather than site-wide, so it only runs on articles. Then put the attributes on the wrapper around your rich text element.

ms-paywall-limit sets the monthly limit for visitors who aren't logged in. ms-paywall-plan-limits sets limits for members by plan ID, written as pairs like pln_basic:3,pln_premium:6,pln_teams:unlimited. If a member has more than one matching plan, they get the most generous limit. If you don't set plan limits, members with an active paid plan skip the paywall entirely.

  1. Add MemberScript 228 to your blog post template page.
  2. Add a field to your blog collection, paste each item's CMS ID into it, and bind it to ms-paywall-article-id on the article wrapper.
  3. Add data-ms-paywall="article" and ms-paywall-limit="3" to the same wrapper.
  4. Add ms-paywall-plan-limits with your own plan IDs and limits.
  5. Add ms-paywall-strip-content="true", ms-paywall-tamper-proof="true", ms-paywall-hide="false" and ms-paywall-blur="false".

Building the paywall itself

Give the paywall's outer div data-ms-paywall="wrapper" and set it to display none. The script shows it when the limit is reached. Inside it, the script fills in any element with data-ms-paywall="read" (articles read), data-ms-paywall="limit" and data-ms-paywall="reset-date". Add a subscribe button, either linked to your pricing page or with data-ms-price:add="PRICE_ID", and a login button linked to your login page.

With strip content on, the script empties the article from the page instead of blurring it. ms-paywall-teaser-selector=".paywall-teaser" keeps any element with that class as a preview. Tamper proof puts the paywall back if someone deletes it in the browser's developer tools. These run after the page loads, so the article is still in the page source, and clearing local storage resets a logged-out visitor's count. Keep gated content or hosted content for anything you sell.

Before you move on

0 of 5

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

Up next: You've now seen several ways to gate content. Next you'll compare them all and pick the right one for each job.

Common questions

How do I limit free articles per month on a Webflow blog?

Add MemberScript 228 to your blog post template page and set ms-paywall-limit on the article wrapper. After that many new articles in a calendar month, the script blocks the next one and shows your paywall.

Can different Memberstack plans get different article limits?

Yes. Use ms-paywall-plan-limits with plan IDs and limits, for example pln_basic:3,pln_premium:6,pln_teams:unlimited. A member on several matching plans gets the most generous one.

Where does the metered paywall store how many articles someone has read?

For logged-out visitors, in the browser's local storage. For members, in their member JSON under article_meter. Logged-out reads are merged into member JSON when the visitor logs in.

Keep going

Checked against the Memberstack docs

TranscriptAuto-generated captions
  1. 0:00

    My name is Memberstack, here, and welcome to MemberScript 228. In this video, we are going to build a paywall wrapper or paywall modal that will show up when a user has exceeded their monthly limit when it comes to reading some of your blog articles. So, what they’ll see is this wrapper, and they can either subscribe or, if they’re not logged in, they can log into their accounts. Okay, all of that information will be saved in a user’s member JSON. So, currently I am on a basic plan, and if I read a few articles,

  2. 0:31

    and the limit for the basic plan, if I’m not mistaken, is three. So, and then I’ll read my fourth article, and now I’ve hit my monthly limit, so I see the banner, and that article has been removed from DOM. So, a user will not be able to inspect your site, and then try to retrieve that article by just removing this wrapper. If I were to try and remove the card, all of that just bounces back again, and I will not

  3. 1:02

    be able to see the blog article under that. So, users on a basic plan have access to three articles, users on a premium plan have access to six, and then users on another plan have access to unlimited articles in a month. All of that information is stored in a user’s member JSON like this. So, I’ve read three articles, and you can see the limit, and then the period, and then if it’s next month, then this will reset. All right.

  4. 1:32

    So, in Webflow, what you’re going to need to do to set this up is to add MemberScript 228, and it should look like this. If you’re watching this on YouTube, the link to that code should be in the description below, and if you’re watching this on the Memberstack site, then you should have already seen the code. You can either add this site-wide, but I recommend adding it to your CMS collection template page. Like I’ve added it to the blog post template page over here. So on the page itself, you are now going

  5. 2:03

    to add a few attributes in order to make this work. Firstly, the entire wrapper that holds your rich text element for a specific blog is going to have a few attributes. You’re going to have the attribute of data ms-paywall-set-article. And then ms-paywall-article-id is going to be set to your CMS ID inside of Webflow. You are just going to create a field for your collections inside of Webflow, and then copy the CMS ID into that field.

  6. 2:36

    And then we have another attribute of ms-paywall-limit set to three. And this attribute will work for users that are not logged in to your website. They will have a limit of three articles a month. And this will be tracked in the local storage. Once they they hit that limit, they have to either log in to your account or log in to the accounts or subscribe to a plan. Users that are logged in to your into their accounts will will define their limits using this

  7. 3:08

    attribute. So ms-paywall-plan-limits. From here you are going to add all of your price or your plan IDs. So I have a basic plan, which will have the limit of three articles a month. And then I have a premium plan over here, which will have the limit of six articles a month. And then my teams plan, like this, which will have unlimited views or unlimited blog posts per month. All right. So when you are using this

  8. 3:41

    script, please feel free to swap out all of these attributes with your own attributes. Okay, so the next attributes are so that users do not bypass your modal by editing the JavaScript on your website. So, that attribute is MSP will strip content set to true. So, all of these attributes you can add them as is and you do not have to edit these. And then we have MSP will teaser selector set to dot paywall teaser. And then MSP will tamper proof set to

  9. 4:15

    true. MSP will hide set to false. MSP will blur set to false. So, once you’ve added all those attributes on the blog article wrapper, you can now create your blog your paywall wrapper modal. Okay, so the entire div is going to have the attribute of data MSP will wrapper or paywall set to wrapper. And then inside of that, you are going to have a few more attributes. Your you’ve read um zero articles or

  10. 4:48

    three articles a month is going to be set to data MSP will read. And then the limit is going to be set to data MSP will limit. And then the date that all of this will reset is going to be set to data MSP will reset date. For your buttons, these are uh buttons that you can customize. So, in my case, I’ve added data MSP price add, but you can redirect them to the pricing page.

  11. 5:18

    >> >> And then for your logged in button or your login button, you just redirect them to the login page. Okay, so by default, this modal should be set to display none and the script will handle all of the visibility of the modal. Okay, if you have any questions on this, please feel free to reach out in the Slack to my name channel. Bye.

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.