In this example, the form submissions are tracked and there is a limit of ten form submissions on the free plan - the same thing could be done for different levels of plans too.
Also, I havent tried this yet, but maybe some sort of automation can reset the memberJSON every 30 days?
oh yeah, metadata is easier especially with make/zapier - that template i showed up there ^^ has the code that will update the json based on form submissions so you can at least build off that instead of starting from scratch 😃
Use a database tool like Airtable to track the use of credit and balance of credit
You could use something like Whalesync to keep Memberstack and Airtable in sync
Whenever someone uses a credit, run a workflow via make or zapier to adjust the credit balance in airtable (which then automatically syncs to memberstack)
Create a way for people to top up their credit, but storing stripe payments in airtable and linking that to a member.
When a payment is received, run a workflow for adjusting the balance in airtable/memberstack
You can then use custom attributes to hide/show certain features depending on the number of credits stored for the member
Tools you will need: Memberstack 2.0, an automation tool like Make.com or Zapier to store automate the purchases and using of credits, Whalesync for keeping your database tool (Airtable, Xano or Google Sheets) in sync with Memberstack.
It’s a pretty advanced thing to build because you will need to set up some complex workflows and use custom code to hide/show elements based on meta data, but all the info is available in the memberstack documentation and various places on youtube.
But how to update the credit if some task is performed by user
I am not sure what your use case is but let’s say you use credit by filling out a form.
The automation would be: Webflow form submitted (submit with hidden memberstack fields) -> Look up member in Airtable (by memberstack id) -> Update “Credit Balance” field for member in Airtable by writing a calculation like (Current Balance - 1).
Happy Tuesday! I just finished up a tutorial on how to do it 🥳
In the tutorial, I walk through the creation of a credit or token system using Make, Webflow, and Memberstack. You'll learn how to set up a system where users can purchase, view, and redeem credits.
I have a script that allows a purchase if user has enough or more credits than required. Now I need to have it pull “Credits” custom field number and use that inside the script. How would I do that?
Memberstack’s AI bot’s answer - “To pull the "Credits" custom field number and use it in your script, you can utilize the Memberstack JavaScript DOM Package. Here's how you can do it:
First, make sure you have the Memberstack JavaScript DOM Package installed on your website. You can find the installation instructions in the Memberstack documentation.
Once the package is installed, you can access the "Credits" custom field value using the memberstack.onReady function. Here's an example code snippet:
memberstack.onReady.then(function(member) { var credits = member["custom"]["Credits"]; // Use the 'credits' variable in your script // For example, you can compare it with the required credits for a purchase });
In the above code, the memberstack.onReady function is triggered when Memberstack has finished loading. It returns a member object that contains the custom field values. You can access the "Credits" custom field value using member["custom"]["Credits"].
You can then use the credits variable in your script to compare it with the required credits for a purchase or perform any other necessary operations.
Remember to replace "Credits" with the exact name of your custom field. If you're not sure about the custom field name, you can find it by navigating to the Members page in your Memberstack app, clicking "Custom Fields", and then the "✏️" icon next to the field. The field ID will be displayed, which you can use as the key in the member object.
I hope this helps! Let me know if you have any further questions.”
There's a little correction I need to make on the code as the bot started off with the code for calling Memberstack 1.0.
This is the right code Marko Guzvic
<script> document.addEventListener("DOMContentLoaded", async function() { window.$memberstackDom.getCurrentMember().then((member) => { if (member.data) { var credits= member.data["customFields"]["credits"]; // Use the 'credits' variable in your script } }); }); </script>
I have 30+ CMS items I want to gate individually. So I have a credits system and when user spends credits on that item I want some content on that CMS page to appear(that was gated before they bought it). Question is, do I need to have a separate plan for each cms item or can I do it differently?
To gate individual CMS items and reveal content after a user spends credits on that item, you do not necessarily need to create a separate plan for each CMS item. Instead, you can use Memberstack's Gated Content feature in combination with custom attributes and a bit of JavaScript to control access based on user actions, such as spending credits.
Here's a high-level overview of how you can set this up:
Use Memberstack's Gated Content Feature:
Create a gated content group in Memberstack for each CMS item you want to gate.
Use the "Grant access to" dropdown to select members on a specific plan or create a custom attribute to track credit spending.
Custom Attributes for Tracking Credits:
In your Memberstack dashboard, create a custom field to track the number of credits each user has.
When a user spends credits on an item, update this custom field accordingly.
Dynamic Gated Content Attributes:
In Webflow, use CMS data in custom attributes to dynamically set gated content attributes on each CMS page. This will require custom code to check if the user has spent credits on that specific item.
You can use JavaScript to modify the DOM based on the user's credit spending. For example, if a user has access to a specific CMS item, you can reveal the gated content by changing the display property of the content from none to block.
JavaScript to Control Content Visibility:
Write JavaScript that interacts with the Memberstack front-end API to check the user's credits and determine which content should be visible.
This script should run on each CMS page load to ensure the correct content is shown to the user.
Comments
19 comments
What kind of credit system do you have in mind? While it isn't natively supported yet, there are some ways to make certain use cases happen
Like monthly credits let's say number of times form submitted or something like that
Would something like this work?
https://webflow.com/made-in-webflow/website/chatgpt-copywriter-template
In this example, the form submissions are tracked and there is a limit of ten form submissions on the free plan - the same thing could be done for different levels of plans too.
Also, I havent tried this yet, but maybe some sort of automation can reset the memberJSON every 30 days?
Thanks let me check Julian Galluzzo
yes! You can store credits as meta data and then set up rules to display/hide premium content or features based on the data in that meta field
you can link a payment via stripe to an ms account to adjust the credit levels
advanced but definitely doable
But how to update the credit if some task is performed by user
I would probably go with JSON for that > metadata just because of the higher limit
yeah, whatever you wanna use
sometimes sending json with automation tools is a bit of a pain, but agree julian that json makes more sense
oh yeah, metadata is easier especially with make/zapier - that template i showed up there ^^ has the code that will update the json based on form submissions so you can at least build off that instead of starting from scratch 😃
ayush kumar Here is how I would approach it:
Tools you will need: Memberstack 2.0, an automation tool like Make.com or Zapier to store automate the purchases and using of credits, Whalesync for keeping your database tool (Airtable, Xano or Google Sheets) in sync with Memberstack.
It’s a pretty advanced thing to build because you will need to set up some complex workflows and use custom code to hide/show elements based on meta data, but all the info is available in the memberstack documentation and various places on youtube.
Thanks a lot Connor Finlayson really appreciate your help
I am not sure what your use case is but let’s say you use credit by filling out a form.
The automation would be:
Webflow form submitted (submit with hidden memberstack fields) -> Look up member in Airtable (by memberstack id) -> Update “Credit Balance” field for member in Airtable by writing a calculation like (Current Balance - 1).
Happy Tuesday! I just finished up a tutorial on how to do it 🥳
In the tutorial, I walk through the creation of a credit or token system using Make, Webflow, and Memberstack. You'll learn how to set up a system where users can purchase, view, and redeem credits.
I have a script that allows a purchase if user has enough or more credits than required. Now I need to have it pull “Credits” custom field number and use that inside the script. How would I do that?
Memberstack’s AI bot’s answer - “To pull the "Credits" custom field number and use it in your script, you can utilize the Memberstack JavaScript DOM Package. Here's how you can do it:
First, make sure you have the Memberstack JavaScript DOM Package installed on your website. You can find the installation instructions in the Memberstack documentation.
Once the package is installed, you can access the "Credits" custom field value using the memberstack.onReady function. Here's an example code snippet:
memberstack.onReady.then(function(member) {var credits = member["custom"]["Credits"];
// Use the 'credits' variable in your script
// For example, you can compare it with the required credits for a purchase
});
In the above code, the memberstack.onReady function is triggered when Memberstack has finished loading. It returns a member object that contains the custom field values. You can access the "Credits" custom field value using member["custom"]["Credits"].
You can then use the credits variable in your script to compare it with the required credits for a purchase or perform any other necessary operations.
Remember to replace "Credits" with the exact name of your custom field. If you're not sure about the custom field name, you can find it by navigating to the Members page in your Memberstack app, clicking "Custom Fields", and then the "✏️" icon next to the field. The field ID will be displayed, which you can use as the key in the member object.
I hope this helps! Let me know if you have any further questions.”
Great job, Shadi null
There's a little correction I need to make on the code as the bot started off with the code for calling Memberstack 1.0.
This is the right code Marko Guzvic
Works !! Thank you guys!
I have 30+ CMS items I want to gate individually. So I have a credits system and when user spends credits on that item I want some content on that CMS page to appear(that was gated before they bought it). Question is, do I need to have a separate plan for each cms item or can I do it differently?
Hi Marko,
To gate individual CMS items and reveal content after a user spends credits on that item, you do not necessarily need to create a separate plan for each CMS item. Instead, you can use Memberstack's Gated Content feature in combination with custom attributes and a bit of JavaScript to control access based on user actions, such as spending credits.
Here's a high-level overview of how you can set this up:
Please sign in to leave a comment.