Skip to main content

Starts at 0:03, after the intro.

Lesson 3 of 6 · 1:39 · Intermediate

Show content to one plan

Show an element to members on a plan and remove it from the page for everyone else.

Where this fits

So far you’ve gated pages and set defaults. Now you’ll go finer and show one element to members on a specific plan.

By the end of this lesson you can

  • Add MemberScript 188 to one page or your whole site
  • Tag each element with the plan ID that should see it
  • Stop content flashing with the skeleton loader from MemberScript 23

Heads up: This is a MemberScript you paste in. The code is linked from the video description.

Lesson notes

How it works

Showing content by plan without a gated content group

data-ms-content with a content ID needs a gated content group for every plan. MemberScript 188 skips that. You tag elements with a plan ID and the script decides who keeps them. Memberstack's own docs point to this script for exactly that case.

Paste the script into the page's custom code, or into your site-wide custom code if you'll use it on many pages. Then add the custom attribute data-ms-code to each element, with the plan ID as the value, for example data-ms-code="PLAN_ID". Two elements with two different plan IDs gives you one element for each plan.

  1. Add MemberScript 188 to the page or to your site's custom code.
  2. Select the element for your first plan and add data-ms-code with that plan's ID.
  3. Select the element for your second plan and add data-ms-code with its plan ID.
  4. Publish, then log in as a member on each plan to check which element stays.

What the script does on page load

When the page loads, the script waits for Memberstack, then gets the current member. If nobody is logged in, or the member has no plan, it removes every element that has data-ms-code. If the member has a plan, it reads the plan ID and price ID of their first plan connection and keeps only elements whose value matches one of them. Every other tagged element is removed from the page, not just hidden, so you can use either a plan ID or a price ID as the value.

This still runs in the browser, so treat it as a way to tidy the page for each plan, not as protection for anything valuable.

How to stop content flashing

Until the script runs, every tagged element is on the page, so visitors can see both items for a moment before one disappears. MemberScript 23 covers that gap with a skeleton loader. Add the script, then put the attribute ms-code-skeleton on the container that holds your plan items. The value is how long the loader shows, in milliseconds. The loader doesn't wait for MemberScript 188, it just covers the container for that time, so pick a value long enough for the plan check to finish. If the value isn't a number, it shows for 2000 milliseconds. The script page has a light and a dark version.

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 give visitors a few free articles a month before asking them to sign up.

Common questions

How do I show content to only one Memberstack plan?

Either create a gated content group for that plan and use its content ID in data-ms-content, or add MemberScript 188 and tag the element with data-ms-code="PLAN_ID". The script removes tagged elements that don't match the member's plan.

Does MemberScript 188 hide or remove content?

It removes non-matching elements from the page after it loads. For logged-out visitors and members without a plan, it removes every tagged element.

Keep going

Checked against the Memberstack docs

TranscriptAuto-generated captions
  1. 0:00

    Hey, M from Mestack here and welcome to members script 188. In this video, I’m going to show you how to show and hide content based on a user’s plan. So, if I refresh the page, what you’ll be able to see is that two items show up, but based on my plan, I’m only able to see one of them. All right, let me show you how to set that up inside of Webflow as well as how to control content flashing. So, in Webflow, what you’re going to do is grab members script 188 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

  2. 0:31

    you’re watching this on the members tech site, then you should have already seen the code. You can either add this sitewide or on a specific page depending on your use case. On the page itself, what you’re going to do is on the item that you’d like specific users on a specific plan to see, you’re going to add the the attribute of data MS code plan ID. And then on that another item you’re going to add the same um attribute of data time as code but a different plan ID. So users on teams will be able to see the item on the

  3. 1:03

    right. Users on premium will be able to see the item on the left. And in order to control content flushing, what I would suggest is on the layout content container, so the one right above all of your items, you would add members script 23 for skeleton loaders. So instead of a user seeing both items and then one disappearing, what they’ll now see is a content loader and a skeleton loader and then they’ll see their item immediately. All right, if you have any questions on

  4. 1:34

    this, feel free to reach out in the Slack 2.0 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.