How to gate content based on member data

Memberscripts needed: 

1. #10 - Display/Remove Element based on Custom Field - How to make members complete their profile 

Tutorials: (embed)

Cloneable: 

Why/Use Cases

- Hide premium content (e.g., articles, videos, images) for users who have not completed a payment or subscription.

- Display a preview or partial version of the content while hiding the rest for users who haven’t paid.

Gating content based on user data

If you’ve got paid content on your site that you only want visible to paying customers, you need a way to hide it from non-paying users.

One way to do that would be to simply hide elements of a page until certain custom fields on users’ profiles are filled in – it could be a simple 0 for non-paying and 1 for paid based on whether they made a purchase on your site or not. This guide will show you exactly how to achieve that.

To gate content based on a custom field on your Webflow site, we’re going to use MemberScript #10 – Display/Remove Element based on Custom Field. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting it up

If this is relevant to your needs, begin by building the field that users need to fill in to reveal the gated content and add the following attribute to it:

· data-ms-member=”FIELD”

Next, build the actual element that houses the gated content and add this attribute to it:

· ms-code-customfield=”FIELD”

You’ll notice the two attributes have the same value and that’s only to link them together, so you can use whatever you want as the values for the attributes as long as they match.

If the custom field is populated some other way on the back end of things, you’ll only need to add the attribute to the gated content and it will then reveal itself when that custom field is filled with the appropriate input by whatever means you’ve implemented on your site.

Making it work

Now that you’ve built everything, getting it to work is simple: all you need to do is copy the custom code from MemberScript #10 to your page, before the closing body tag.

Conclusion

That’s everything, you can now go ahead and test the gated content on your live site.

If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.

Our demo can help you gate content from certain users based on whether a custom field on their profiles is filled in with the appropriate input or not.

Take me to Cloneable!