How to implement daily click limits and DOM removal for buttons in Webflow with Memberstack? Answered

• 

  Chukwudi

  • May 24, 2025 17:59

  Hi Mubassir,You can achieve this using custom code.The code below listens for the DOMContentLoaded event to ensure the script runs after the page is fully loaded. It then checks if the user is logged in via Memberstack and retrieves the click-count field (you would need to create a custom field in Memberstack called click-count) from the user's profile to track how many times the button has been clicked.When the button with the ID addCount is clicked (assuming your button ID is addCount), the clickCounter function is triggered. It increments the clickCount by 1 and updates the user's profile with the new count. If the clickCount reaches 50, the button is both disabled and hidden using button.disabled = true and button.style.display = 'none'. This prevents any further interaction with the button, even if the user manipulates the DOM.This setup ensures that the button can’t be clicked more than 50 times and remains hidden and non-functional after that limit is reached.I hope this helps.

  <script>
  document.addEventListener("DOMContentLoaded", async function() {
    // global variable that will be increased on click.
    var clickCount;
    const memberstack = window.$memberstackDom;
    
    memberstack.getCurrentMember().then(async ({ data: member }) => {
      if (member) {
        if (member.data && member.data["customFields"]) {
          // gets the click count field info from memberstack or starts with 0 if not found.
          clickCount = member.data["customFields"]["click-count"] || 0;
          console.log("memberstack count: " + clickCount);
          
          // adds event listener to button with the addCount id.
          document.getElementById("addCount").addEventListener("click", function () {
            clickCounter(member);
          });
        }
      }
    });
  
    async function clickCounter(memberstackMember) {
      // increments the clickCount number by 1.
      clickCount++;
      console.log("current count = " + clickCount);
      
      // updates the members profile if clickCount is equal to or less than 50.
      if (clickCount <= 50) {
        try {
          await memberstack.updateMember({
            customFields: {
              "click-count": clickCount
            }
          });
        } catch (error) {
          console.error('Error updating member data:', error);
        }
      }
      
      // Disable and hide the button after 50 clicks
      if (clickCount >= 50) {
        const button = document.getElementById("addCount");
        button.disabled = true;  // Disables the button so it can't be clicked
        button.style.display = 'none';  // Hides the button
        console.log("Button disabled and hidden after 50 clicks");
      }
    }
  });
  </script>
  

  0
• 

  Mubassir Shaikh

  • May 24, 2025 17:59

  Thankyou so much this will work

  0

Please sign in to leave a comment.