Platfio Blog
Fundamentals

Counters

Lesson 15• May 6, 2024

[Intro] In this Lesson, we’ll be learning how to use Counters inside your app. Let’s get started.

[What Are Counters?]

Counters let you keep track of points, credits, or any number that increases or decreases based on what a user does. You can use them for things like badges, leaderboards, class passes, and much more.

[Setting up Status Counters] Let’s start with using Status Counters. These are great for creating levels or giving badges based on how active someone is — like a reward system.

To get started:

Go to the Editor, click on Tools, then click Counters.

Click the plus button to make a new collection.

Then click Add Blank.

Let’s call this collection “Loyalty”. Then click Save.

Now click the plus button, and the add blank button again to create a new Counter inside that collection.

Name it “Loyalty”.

Since we're tracking rewards, set the unit to “Point” and “Points”, then click Add.

[Create a Product That Gives Points] Next, we’ll make a product that gives users points.

Go to the Products, and click the Add button, then Add Blank to create a new collection. Let's call it "Yoga Merch". Then click Save.

Then click Add again, choose Add Blank, and name the product “Yoga Socks”.

Set the price to 20 dollars, click add, and then click Save.

Add this product to the left-hand menu so users can easily access it.

For more info on setting up products, check out our lesson on Products.

[Set Up How to Earn Points] Now let’s set it up so users can earn points.

Go back to the Counter you just made, then go to the Adders tab.

Click Add. This will open a pop-up where you choose how users earn points.

We’re going to choose “Product”, then pick the Yoga Socks.

Enter 1 in the Earns section so users get 1 point when they buy it.

Click add, then save.

Now, every time someone buys that product, they’ll earn one point.

[Set Up Badges] Now let’s set up Badges.

Go to the Settings tab of your Counter.

Click the Badges section, toggle it on, then click Add.

You can manually enter each badge by filling out the details.

Let’s set up our Loyalty tiers.

Let’s name this first one Bronze.

Let’s add a description and change the icon for this badge to a “medal”.

Next, let’s set the lower limit to 15 and the upper limit to 30.

Let’s change our badge colour to bronze. Then click Add.

Next, also add Silver and Gold, spacing their point limits 15 points apart.

Then click on Save once done.

Now, add the Counter to the left-hand menu so users can access it easily.

/////“Earn at least 15 points to become a bronze member and get exciting discounts!”/////

[Testing] Let’s test this from the user’s point of view using the emulator.

If we open the left-hand menu.

We'll see that “Loyalty” has been added — click on it.

Right now, you’ll see zero points.

You’ll also see the badges we set up, and just below that, the rules that explain how to earn points.

Let’s test it by buying the product listed in the rules — in this case, Yoga Socks.

Once the purchase goes through, go back to “Loyalty”.

You’ll see that we’ve earned 1 point. The user will also display badges based on how many points they have.

[Setting Up Counters for Levels]

Now let’s try using Counters to set up Levels. Levels can be a great motivator when doing workouts, it keeps track of points earned each time a session has been completed.

Go to the Platfio Editor, click Tools, then Counters. Press add to create a new collection, and name it "Levels". Then press save.

Inside the Levels collection, press add to create a new counter. Name it Levels, set the unit to point and points, then press add and save.

[Set Up Bookable for Levels]

Next, we’ll create a Bookable to earn points. Go to Bookables, press add to create a new collection, name it Classes, and save. Then, press add to create a Bookable. Let’s say we're going to be having a Pilates class, and name this “Pilates”.

Go to the Rules tab to set it up as a recurring class—for example, Pilates 10 at 8 a.m. on Monday, Wednesday, and Friday—then press add and save.

[Set up Adder for levels]

Now, go back to Tools, then Counters, and select the Levels counter. Under Adders, press add, select Bookable, then choose the Pilates Bookable. For how the points are earned, select "Add on Redeem".

This ensures that points are only added when staff confirm a class was attended. This prevents users from earning points for no-shows or cancellations. Press save.

Next, go to the Settings tab in the Level counter and click the toggle to enable Levels. Then, click on Levels and toggle on Autogenerate.

For the name, enter Level “space” “pound sign” index, this will substitute the name and description for the lower and upper limit of the levels that will be auto generated.

Set the lower limit to 0 and the upper limit to your desired maximum, for example 150. Press Autogenerate. This will create levels based on your point structure. For example, with a range of 0 to 150, in steps of 15, the system creates 10 levels. Click on add then save.

Let’s then add it to the Left-Hand side menu.

[Demo the autogenerate feature]

Now to check it through the user’s perspective in the app. Go to the left-hand side menu and click on Levels, you can see the level you currently are in with the points that you have earned through attending sessions.

[Demo how points affect levels]

Once levels are generated, press save. Now, to test this setup, go to the Manager and select a user. Go to Counters, choose Levels, and manually adjust the point value. As points increase, the associated level changes automatically.

For example, at 75 points, the user is placed in the correct level according to the thresholds. You can repeat this for different values to demonstrate the system in action.

This level system can also work alongside badges if set up. You can show how points impact both levels and badges, and demonstrate how statuses change as points are earned.

[Setting Up Counter Credits] Now, let's look at another way to use Counters — for credits.

This is perfect for things like class passes, where users can pay once and use credits to book sessions.

To set it up:

Go to the Platfio Editor, click Tools, then Counters.

Click the plus button to make a new collection called “Passes”.

Then create a new Counter and name it “Passes” as well.

Set the unit to “Credit” and “Credits”, then click Add.

Let’s add this to the left-hand menu for easy access.

[Create a Product That Gives Credits] Next, let's set up a product that gives users credits.

Let's go to the Product Editor, and create a new collection called “Passes”.

Click the add button and name the product “5 Class Pass”.

Set the price to 50 dollars, then click Save.

Let's also add this product to the left-hand menu so users can easily access it.

[Set Up How to Earn Credits] Now let’s set up how users can earn credits.

Go back to the Passes Counter, and go to the Adders tab.

Click Add, choose Product, and select the 5 Class Pass.

In the Earn section, set it to give 5 credits, then click Save.

Now, when someone buys the pass, they’ll get five credits added to their account.

[Create a Bookable to Spend Credits On] Now let’s create a bookable class that users can spend credits on.

Go to the "Bookables Editor" and create a new collection called “Classes”. Then click Save.

Click "Add", and then add blank. Set the Type to "Class" and name it “Reformer”.

In the "Rules" tab, click Add to create a time slot.

Name it “Reformer” as well.

Set the price to 30 dollars, set the time to 9 AM, set duration to 60 mins. and choose days like Monday, Wednesday, and Friday. Then click Add, and then click Save.

Add this class to the left-hand menu for easy access as well.

[Set Up How to Spend Credits] Now let’s set up how users can spend credits.

Go back to the Passes Counter.

Go to the Subtracters tab.

Click Add, choose Bookable, and select the Reformer class.

Set the claim cost to 1 credit, and the discount to 100%.

Click Save.

Now users can use these credits to book this class for free.

[Testing] Let’s test how this works from the user’s perspective using the emulator.

First, buy the 5 Class Pass.

Then go to Passes — you should now see 5 credits.

Now go to Reformer and book a session.

You’ll see that it gives a 100% discount, and you can book the class for free.

Go back to Passes and you’ll see that you now have 4 credits remaining.

[Wrap-Up] Counters can also be connected to other actions in your app.

[Manually adjusting Counters]

If something happens, and you need to manually adjust a user’s counters, you can do that from the Manager.

First, go to the Manager, then click on Users, and find the person whose counters you want to update.

Next, go to their Counters, and click on the counter you want to adjust.

A pop-up will appear, and from there, you can either add points, subtract points, or set the counter to a specific number.

You can also click on View Logs to see the full history of any manual adjustments made to that user’s counter.

[Setting Expiry for Credit counters] Go to the Platfio Editor, click on Automations which will then bring you to the Automation Editor. Click on Add, then click on Add Blank to create a new collection, let’s name this “Pass Expiry”. Next click on the Trigger tab and set the type to “Order”.

In the Process tab there will be three sections that will describe the process that you will have done on the automation.

In the “What” section, set the type to “Counter”, then in Counter select Passes. In Counter Operation you can choose Increment to add value, Decrement to subtract value, or Set to have it reset. Let’s then set the Counter Value to zero.

In the “When” section, set the time when the automation will be triggered. Let’s click on Weeks and set it to one week, or seven days after the order is received.

In the “Who” section, let’s set the type to “Triggering User”. Then click on Add.

Automation will then automatically set the Passes Counter to zero after seven days of the purchase.

[Using Counters for Credit-based Subscribables]

Next, let’s take a look at how we can use counters to set up credit-based subscribables.

For example, let’s create a “Full Self-Care Package” that gives users some credits for particular services.

[Setting up the counter (emphasize toggling on the set toggle)]

Go to Tools, then select Counters. Click on the Plus button and then click add blank. Let’s name this collection “Spa Treatment”, then click Save.

Click on add to create a Counter. Let’s name it “Full Body Massage”, and set the unit to “Credit” and “Credits”, then click Add and then Save.

Let’s add three more counters for Facial, Manicure, and Pedicure. Then also set the units to “Credit” and “Credits”, click Add and then Save when done.

[Setting up a Subscribable]

Next, let’s set up our “Full Self-Care Package” subscribable. Go back to the Editor, then go to Subscribables, click add, then click add blank to create a new collection. Let’s name this “Spa Memberships”. Then click Save.

Click add and then add blank again to create a Subscribable. Let’s name this “Full Self-Care Package”.

In the Description section let’s put “full body massage credits, 2 facial credits, 1 manicure credit, 1 pedicure credit.”

Set the amount to 100 and then choose monthly in the Interval section. Then click add.

Then let’s add the Full Self-Care Package to the Left-Hand Side Menu.

[Setting up how to earn credits]

Let’s go back to our “Spa Treatment” Counter and in the Adders tab, click add then choose Subscribable then select the Full Self-Care Package that we created earlier. Then, set the “Adds” to 2, then let’s set the Toggle to On so that it resets the amount automatically after a successful monthly payment. Click add and then Save. Let’s also do the same thing for Facial.

For Manicure and Pedicure set the “Adds” to 1, then let’s set the Toggle to On so that it also resets the amount automatically. Click add and then Save.

[Creating the Bookables] Now let’s create a Bookable appointment that users can spend credits on.

Go to the "Bookables Collections Editor" and create a new collection called “Spa Treatments”. Then click Save.

Click "Add", and click add blank, then set the Type to "Calendar" and name it “Spa Treatments”.

Let’s set Interval to 30 minutes.

In the Appointments tab, click add then let’s name it “Full Body Massage”.

Set the price to 40 dollars, set the Length to 60 minutes. Then click on add.

Add another for Facial for 25 dollars, and set length for 60 minutes.

One more for Manicure for 20 dollars, and set length for 30 minutes.

And lastly, add Pedicure for 20 dollars, and set length for 30 minutes. Click on Add and then Save.

Now go back to the Details tab and then add “Spa Treatments” to the left-hand menu as well.

[Setting up how to spend credits]

Now, let’s go back to our Counter and in the Subtracters tab, click on Add then choose Bookable, select Spa Treatments and then select Full Body Massage. Set the “Subtracts” to 1 and set the Discount to 100% then click add and then Save.

Let’s then do the same thing for all services we added in Spa Treatments.

Go back to the collection and then let’s add “Spa Treatment" to the left-hand menu for easy access.

[Testing] Let’s walk through the process from the user’s perspective using the emulator.

First, open the left-hand menu.

Navigate to Spa Treatment. As you can see, all treatment counters are currently set to zero.

Now, let’s subscribe to a package. Click on Full Self-Care Package, then click on Subscribe.

Once subscribed, return to the Spa Treatment section.

You’ll now see that the counters have been updated according to the number of credits included in the package.

Next, let’s book an appointment. Select Full Body Massage, then click Proceed.

Here, you can choose your preferred appointment time—for example, Friday, June 6th at 9 AM.

A checkout window will appear, displaying the selected treatment and its price. Go ahead and click Checkout.

Once the checkout is complete, head back to the Spa Treatment in the Left-Hand Side Menu.

You’ll notice that one Full Body Massage session has been deducted from your available credits.

[Wrap up] Thank you for watching this lesson on Counters.

Ready to build your app?

Put what you've learned into practice with Platfio.

More Lessons