Building a credit based membership site (need help)

Ask the community
1

I want to create a credit-based member ship for my site. Is this possible using Softr?

2

Hi @ThomasGrainger :wave:
In general it’s possible to create a membership website in Softr, here is a help doc on how to do it. Though could please share some details on the use-case so I could guide you better regarding the “credit-based” part?

3

I had the same question, I believe.

A credit based site meaning that the user doesn’t get unlimited access / month, but instead purchases a certain amount of actions that are tracked via a credit model.

In airtable I can easily track the number of actions vs. number available, but ideally I would want that to be visible to the founder at any time. If I was building from scratch, I would put it up to the right of the “profile” circle, but I understand there might be some limitations to the UX

4

Definitely possible. We do something similar - we track user credits in Airtable and compare against their allowance. In Softr we have various access conditions for available / expired credit conditions. We also dynamically show the users their quota in the navigation.

Screenshot 2023-07-06 at 10.11.00
Screenshot 2023-07-06 at 10.11.00360Ă—1195 13.2 KB

5

Amazing, that’s just custom code? Can you share the script?

6

I loved it!! How is done???

7

I originally wrote this post with my 1st implementation and noted that I didn’t have time to rebuild in a better way, but actually, it was easier than I expected, so here’s the final code to achieve this kind of meter bar:

<html>
<div class="meter-container">

  <div class="heading-container">
    <div class="quota-available">Remaining Credits:</div>
    <div class="quota-expired" style="display: none;">You've run out of credits</div>
  </div>
  <div class="meter">
    <div class="meter-bar"></div>
  </div>
  <div class="meter-label"></div>
</div>

</html>

<style>
  html,
  body {
    background-color: transparent;
    margin: 0;
    padding: 0;
  }

  .meter-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
    background-color: transparent !important;
  }

  .labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 500px;
    font-size: 8px;
    color: #333;
    margin-bottom: 5px;
  }

  .meter {
    width: 100%;
    max-width: 500px;
    height: 20px;
    background-color: rgba(128, 128, 128, 0.2);
    position: relative;
    border-radius: 0px;
    overflow: hidden;
    margin-bottom: 5px;
  }

  .meter-bar {
    height: 100%;
    background-image: linear-gradient(45deg, #f1a161, #f1a161);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 0px;
  }

  .meter-label {
    font-size: 10px;
    color: #333;
  }

  .heading-container {
    margin-bottom: 10px;
    font-size: 14px;
  }
</style>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const meterBar = document.querySelector(".meter-bar");
    const meterLabel = document.querySelector(".meter-label");
    const quotaAvailable = document.querySelector(".quota-available");
    const quotaExpired = document.querySelector(".quota-expired");

    let maxTokens, usedTokens;
    
    if(window['logged_in_user'] && window['logged_in_user']['airtable_record_id']) {
        maxTokens = window['logged_in_user']['Credit Allowance in Period'];
        usedTokens = window['logged_in_user']['Total Tokens In Period'][0]; 
    }

    function updateMeter() {
      if (maxTokens && usedTokens) {
        const percentage = (usedTokens / maxTokens) * 100;
        meterBar.style.width = `${percentage}%`;
        meterLabel.textContent = `Used: ${usedTokens.toLocaleString()} credits / ${maxTokens.toLocaleString()} credits (${percentage.toFixed(2)}%)`;

        // Change gradient to red when percentage reaches 100%
        if (percentage >= 100) {
          meterBar.style.backgroundImage = 'linear-gradient(45deg, #ff0000, #ff7f7f)';
          quotaAvailable.style.display = 'none';
          quotaExpired.style.display = 'block';
        } else {
          meterBar.style.backgroundImage = 'linear-gradient(45deg, #f1a161, #f1a161)';
          quotaAvailable.style.display = 'block';
        }
      }
    }

    updateMeter();
  });

</script>

The only things you’ll need to update to get this working are:

  • The “Credit Allowance in Period” and “Total Tokens In Period” field names in Airtable. These are my field names and denote the total number of credits their allowed within the period, and the number of credits a user has consumed within their current billing period, respectively.
  • You’ll also want to go and update the CSS styles to design / colour the bar however you want. This is super flexible and can adapt to your needs.

Things to note:

  • The bar will auto-calculate the % used and adjust the progression of the bar (and include a % figure).
  • If the % > 100% then the bar will turn red and display an out of credits warning.
  • This is fully dynamic and will update each time the page reloads to include the newest data in Airtable.
  • You can use this code in any custom code block anywhere on your Softr site, though I recommend only including it on pages/blocks that only logged in users can see (otherwise it’ll be zeroed as no data).

Let me know if any questions!

1 Like