MemberStack.io

Show / hide content based on Webflow CMS field

I know this one should be easy (and I have a semi-solution to it), but I just wanted to confirm what best practice should be. I’m using Memberstack with Webflow.

I have 2 CMS collections. One is ‘podcasts’, the other is ‘categories’. Within the podcasts category, there is a ‘Pro’ switch (yes/no).

I only want ‘Pro’ content to be accessible to members.

I have a page with tabs - ‘all’, ‘free’, ‘pro’.

I would like to add an overlay, and adjust the opacity of the CMS items on ‘pro’ if a user is not a member (also see this post).

This will mean that users can’t click through to the individual CMS pages (with the content) unless they are a member.

However, I would also like to restrict access to pages based on whether a user is a member or not, and this wouldn’t be based on a URL. e.g. mysite. com/content1 could be accessed by a non-member but mysite. com/content2 would require membership.

I’m semi achieving this by not having these pages linked to from anywhere, but what would the best way to achieve this within memberstack be?

I’ve found the article about excluding pages from a hidden folder here but I’m wondering whether there is a better solution.

Thanks in advance.

2 Likes

Here’s a prototype you could clone :smiley:

https://premium-blog.webflow.io/ I haven’t released it yet, but I think it’s doing everything you need.

3 Likes

Hi Duncan. Yes please, that would be great :slight_smile:

Watching the video, I actually understood how to solve my problem. Just add all the content on every CMS page in a wrapper with the ms-hide attribute, while also creating a sort of ‘members only’ wrapper that prompts people to register, and give that an ms-hide-element attribute.

The ‘Hide Elements’ button confused me - I hadn’t realised that the ‘hide content from all logged-in members’ and ‘not pro content’ text below were clickable, and thus hasn’t realised there was a simple way to do this. I thought they were just explaining (strangely) the same thing.

1 Like

Noted! I’ll add some little dropdown icons to the “buttons” so they look more clickable :smiley: Thanks man!

I found your email, but it looks like your account is full. If you delete or move one of those projects I can send over a copy :+1:

Hi @DuncanHamra this is exactly what I was also after. the other thing im trying to do is allow site visitors who come from specific IP addresses to be able to access the premium content without having an account.

I can already show/hide webflow elements based on a location being true/false, and I can also redirect, but im wondering whether this will work in combination with what you have done here.

Ideally - webflow site detects via my custom code that user is from a whitelisted IP address, this when removes any barriers to the premium content - what do you think?

ps I messaged you on chat about trying to get this template also :slight_smile:

1 Like

Thanks for the template! Based on your template I have come up with a solution.

For the template that shows part of the article and hides the other part, I duplicate the dynamic content of the article, remove the values “paid”, and then add my own classes that are defined in my IP based query.

This provides the whitelisting of content. The scenario being that users within a certain location have to pay / create an account to view everything. However, if a user is in one of those white listed locations, then the content automatically reveals itself.

1 Like

Awesome!! I’m really glad it worked out :partying_face: Thank you for the update!

Hi Duncan,

I have a slightly different situation, my memberships free and pro can both have access to the same page displaying one CMS collection but since they both have access I can’t really hide a single CMS item with an attribute. Should I change the slug of specific CMS items for pro users only for this to work? I can’t really put them in a sub-folder since its all in one collection and if I change the slug would that affect SEO?

thanks in advance!

1 Like

I did a work around for this, I created two hidden content one for both free and pro(to exclude any non-members) and one for only pro users to hide the links with the pro switch on. this does work but If any one tries to type the link of the hidden content they will be able to access it so it isn’t a great solution.

1 Like

Hi @DuncanHamra, It looks really good. Can I also get access to the template? Thank you in advance!

1 Like

Hi @DuncanHamra, this is exactly what we’ve been looking for. By any chance, would it be possible to integrate a similar paywall system on a Squarespace website instead of Webflow?

1 Like

Hi Camille :wave:

I’m not sure thb :thinking: I’ve never tried building something like this in SS, but I’m assuming it would be difficult to replicate exactly… it’s the data attributes that makes it tough. :confused:

Do you just need 100% free posts and 100% paid posts, or do you need some freemium posts as well?

Thanks for your quick answer Duncan!

Ideally, we wanted to create something that would look like that for non-member to let them read a bit and incentivize them to become a paid subscriber: https://www.foodhack.ch/articles/2020/2/18/does-the-future-of-protein-lie-in-our-oceans-and-ponds

Right now, it’s just a visual patch-up and we send the content via email to paid member, but it’s not ideal obviously :sweat_smile:

1 Like

You can do it with jquery addclass and you add the class named above :slight_smile:

2 Likes