Usage bar/meter that tracks "tokens" or "credits" from Airtable data

Custom Coding
1

Continuing the discussion from Building a credit based membership site (need help):

Here’s the code and instructions brought over from my original comment in the above thread…

<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!

2

@EnigmaXXIII Is it possible to apply this to other data from Airtable? For example, I have a list of courses, that have lessons for users to progress through. Can I drill down with this code to show progress for a particular course? Or do the two values of maxTokens and usedTokens need to be in the user table?

3

@shane_conrad You can absolutely pull more data from Airtable. You’ll just need to replace the second part in the square brackets to match the field name in Airtable. For example ["Total Tokens In Period"] would need to be ["Your Field Name"]. So you can set different variables to then reference later in the code/manipulate however you want. Something like: courseOneProgress = window['logged_in_user']['Course 1 Progress Field'];.

This assumes that the data is available in the user table. You can extract data from other tables, but you would need to have a Softr section on the page (then hide it) so that the data is accessible. An alternative is to create a rollup on Airtable with the data you want to pull into Softr, then use the above method to show the rollup data.

Hope that helps!

1 Like
4

Thanks @EnigmaXXIII !

I actually think I’m going to add this code in a field in my courses table, but I’m not sure how I need to adjust the code for an embed field type in a list details block. May not be possible, though.

5

Thank you for sharing! This is exactly what I need.
I wonder if it would be possible to add it to the bottom of a vertical header? Could you please share an sample code for that?

Thank so much!