How to Ensure Memberstack Content Is Visible Only to Intended User Plans Answered

• 

  Chukwudi Onyekwere

  • February 12, 2024 05:40

  Hi Manuel,
  These are the right attributes to use:

  data-ms-content="paid-plans"
  Only visible to all logged-in members who have a paid plan.

  data-ms-content="!paid-plans"
  Only visible to all logged-in members who do not have a paid plan.

  0
• 

  Manuel Ogomigo

  • February 12, 2024 05:41

  The thing is I'm not using stripe paid plans.

  I have 2 free plans, and one is tagged as paid 😢

  0
• 

  Chukwudi Onyekwere

  • February 12, 2024 05:42

  Oh in that case, you would have to resort to Javascript. Give me some minutes to come up with something.

  0
• 

  Manuel Ogomigo

  • February 12, 2024 05:42

  Oh okay thanks.
  Would try here as well and see if it works.

  0
• 

  Chukwudi Onyekwere

  • February 12, 2024 05:43

  <script>
  window.$memberstackDom.getCurrentMember().then((member) => {
  if (member.data) {
  const buttonA = document.querySelector('#buttonA');
  const buttonB = document.querySelector('#buttonB');// Hide buttons initially
  buttonA.style.display = 'none';
  buttonB.style.display = 'none';const planConnections = member.data["planConnections"];
  if (planConnections && planConnections.length > 0) {
  const planA = "pln_IDForFreePlanA"; // Replace with the Plan ID of Plan A
  const planB = "pln_IDForFreePlanB"; // Replace with the Plan ID of Plan B
  const planIds = planConnections.map(connection => connection.planId);if (planIds.includes(planA) ||planIds.includes(planB)) {
  if (planIds.includes(planA)) {
  buttonA.style.display = 'block';
  }
  if (planIds.includes(planB)) {
  buttonB.style.display = 'block';
  }
  }  else {
  console.log('no active plan');
  }
  } 
  })
  </script>

  Do not forget to replace #buttonA in this part of the code document.querySelector('#buttonA') and #buttonB in this part document.querySelector('#buttonB') with the respective button IDs on your website.

  Also, replace "pln_IDForFreePlanA" and "pln_IDForFreePlanA" with their plan ID's on your Memberstack dashboard.

  0
• 

  Manuel Ogomigo

  • February 12, 2024 05:44

  Yeah tried it, and not working.
  It's showing both of the items

  and for users not signed up/login

  It shows an error on console Unauthorize

  website URL: flowscriipt.webflow.io
  here's the link where the code is https://flowscriipt.webflow.io/app/dashboard

  

  I tried this and it kinda worked, it checked if it could get the current user, and if not, set the element to display none. (though it still shows that console error. :)

  <script>
  window.$memberstackDom.getCurrentMember().then((member) => {
      if (member.data) {
          console.log('Current Member Data:', member.data);
      } else {
          console.log('No member data found or unauthorized access');
          document.querySelector('#button').style.display = 'none';
      }
  }).catch((error) => {
      console.error('Error retrieving member data:', error.message);
      // Additional error handling (e.g., displaying a message to the user) can be added here
  });
  </script>

  0
• 

  Chukwudi Onyekwere

  • February 12, 2024 05:49

  Upon checking, I discovered you added the plan B ID in the plan A, that's why it didn't work.I also recommend you place this style in your HTML head block so it hides the buttons by default when the DOM loads.

  <style>
  #button1, #button2 {
  display: none;
  }
  </style>

  Then you can replace the script I sent you initially with this:

  <script>
    window.$memberstackDom.getCurrentMember().then((member) => {
      if (member.data) {
        const buttonA = document.querySelector('#button1');
        const buttonB = document.querySelector('#button2');
        const planConnections = member.data["planConnections"];
        
        if (planConnections && planConnections.length > 0) {
          const planA = "pln_free-plan-7tl30dac"; // Replace with the Plan ID of Plan A
          const planB = "pln_flowscript-pro-611040xi4"; // Replace with the Plan ID of Plan B
          const planIds = planConnections.map(connection => connection.planId);
          
          if (planIds.includes(planA) || planIds.includes(planB)) {
            if (planIds.includes(planA)) {
              buttonA.style.display = 'block';
              buttonB.style.display = 'none';
            }
            if (planIds.includes(planB)) {
              buttonB.style.display = 'block';
              buttonA.style.display = 'none';
            } else {
              console.log('no active plan');
            }
          }
        }
      }
    });
  </script>

  0
• 

  Evgenii Tilipman

  • October 31, 2024 15:22

  Hi everyone!

  I have a peculiar situation where users on the basic plan are getting access to the content on the business plan, even if the attribute is used to gate the content from everyone, but the business members.

  Question is if there is a way to block those users from getting access to that content besides the data-ms-content attributes?

  0
• 

  Raquel Lopez

  • October 31, 2024 15:22

  Yes. Using the Dom front end library you could create a client-side validation to forcefully hide specific content with any condition that you want.

  0
• 

  Evgenii Tilipman

  • October 31, 2024 15:23

  Is there a link to any type of documentation that I can read to learn more? 🤔

  0
• 

  Raquel Lopez

  • October 31, 2024 15:24

  Yeah, that's how Memberstack work behind the scenes. It exposes the library so you can create your custom logic. All the methods are available in the Webflow package as well
  https://developers.memberstack.com/docs/dom-front-end-package

  I think you can ask MS bot to help you out with the scripting. i think there should be some snippets shared in this community or n the forums to help you with that. Here's one that you can use as an example https://memberstack.slack.com/archives/C033F0SLTLK/p1716914124678459?thread_ts=1716894256.902639&cid=C033F0SLTLK

  If you have any particular question with your snippet you can paste it here to give you feedback

  0
• 

  Evgenii Tilipman

  • October 31, 2024 15:25

  Thank you very much!

  I'll go through it in the morning! Appreciate you

  0

Please sign in to leave a comment.