How to display the total number of people assigned to a specific plan in Memberstack on Webflow?

Post author
Chethan KVS

Is there a way to show the total of number of people are assigned a specific plan in Memberstack on my Webflow Website? I tried the Rey AI, but does not seem to be helpul.

Comments

5 comments

  • Comment author
    A J

    Hey Chethan KVS,

    It seems this is currently in wishlist. You can leave an upvote there or explain your use-case there to receive notification in case there are any updates on this in the future.

    For the time being, if you have any automation via Make / Zapier related to plan added / removed, you can additionally have a counter in say Data Tables where you store number of members for each plan and display it accordingly. Here's a developer docs on Data Tables.

    Hope this gives you some idea.

    0
  • Comment author
    Chethan KVS

    A J I don’t really have any coding experince. Would you be able to guide me through it or make a super quick video recording if possible?

    0
  • Comment author
    A J

    Hey Chethan KVS,

    I was testing your use-case in a dummy site and here's what I did to set this up.

    • Created a data table in Memberstack dashboard with the relevant fields like 'Plan ID', 'No. of members' etc.
    • Created a text block in Webflow where I want to show the number of members count for each plan.
    1. Added a custom attribute to this text block data-ms-member-count="REPLACE-WITH-YOUR-PLAN-ID". You can place any unique value as the attribute's value, for my testing purpose I have used Plan ID of the plan (for which I want to fetch the count from data table) - this plan ID is also stored in the data table for each plan.
    • Have the following script on the page where you want to show this member count, for example the custom code section of the page under 'Before </body> tag'. This is usually where you install other memberscripts in general.
    <script>
    window.$memberstackDom.getCurrentMember().then(async () => {  
      try {
        const response = await window.$memberstackDom.queryDataRecords({
          table: 'REPLACE-WITH-TABLE-KEY',
          query: { orderBy: { createdAt: 'desc' } }
        });
    
        const records = response.data.records || [];
    
        const displayElements = document.querySelectorAll('[data-ms-member-count]');
    
        displayElements.forEach(element => {
          const targetPlanId = element.getAttribute('data-ms-member-count');
          
          const planRecord = records.find(record => {        
          	return record.data && record.data.plan_id === targetPlanId; 
          });      
    
          if (planRecord) {
            element.innerText = planRecord.data.no_of_members || 0;
          } else {
            element.innerText = "0";
          }
        });
    
      } catch (error) {
        console.error("Error fetching member counts:", error);
      }
    });
    </script>

    Make sure to replace the text "REPLACE-WITH-TABLE-KEY" in the code with the actual table key that you can find in the settings of the newly created data table for this purpose in Memberstack dashboard.

    This should be able to show you the value on the page that you have stored in the 'No. of members' field in the data table in Memberstack.

    Here's a memberscript tutorial which is not related to your use-case but should give you a visual idea of setting up the data table in general.

    The steps shared above are relevant for the phase 2 implementation of your specific use-case.Phase 1 is not via code, so you can have an automation via Make / Zapier where you update the records in the data table every time a plan is added / cancelled for a user.

    Feel free to customize it further as per your requirements.

    Hope this gives you some idea.

    0
  • Comment author
    Chethan KVS

    A J Thanks.

    0
  • Comment author
    A J

    For future readers,

    While the custom code solution I shared earlier would work as well, but here's an official memberscript from Memberstack team to display the member count for each plan.

    Hope this helps.

    0

Please sign in to leave a comment.