Tracking, counting & limiting user actions when using Bubble with ChatGPT or OpenAI

Tracking User Actions in Bubble

In this Bubble tutorial video, I'm going to demonstrate something we've been asked several times in relation to OpenAI: how can you keep track and therefore limit the number of times a user takes an action in your app? We're going to do this really simply. If you want to dig into how to use OpenAI text generation, you need to check out our other videos for that because right now we're just focusing on counting and limiting a user's actions.

Setting Up the Button Click Counter

I've got this button on a page and I want to keep count of how often the user clicks the button. One way of doing that would be to keep count on the current user. I'm going to say make changes to the current user and create a field called button clicks. This is going to be a number, and I want to be able to add one to it every single time this workflow runs. So I just go current user button clicks add one.

Displaying the Click Count

To make it easy to demonstrate, I will add a text field to the page and say "This user has clicked this button" and then add in the dynamic data current user button clicks space types. Let's preview that. If I click it, I get one.

Setting a Default Value

If you wanted it to show zero initially, you would do that by going into data types user and saying that button clicks default is zero. This way, when a user creates their account, it is zero rather than empty. Bubble still understands what's going on because it knew that it was empty, and plus one on empty is still one.

Adding a Clear Button

I'm going to add in another button to help me demonstrate this. I'll call this "clear" and this is going to make changes to current user button clicks, setting it to zero. This allows us to reset the count.

Limiting User Actions

What if I want to say they can only click the button five times? I'm going to cover two areas here to be very comprehensive on the topic. One of the first things you can do is to make the button unclickable. We can set this condition to when current user button clicks is equal to or greater than five.

Visual Feedback for Unclickable Button

In your button styles, whether on the button itself or in your style for it, you can apply a style for when the button isn't clickable. We can use the opacity field here and take it down to 30%. Let's preview that. After five clicks, it becomes unclickable and fades out.

Enhancing Security

This visual feedback is good, but it's not the most secure option. Using browser dev tools, there may be a way for the user to toggle the HTML elements to be clickable. So, this isn't a hard and fast way to ensure that the user doesn't take an action if they had malicious intent.

Double-Layered Protection

Nowadays, I find myself doubling up here. As well as having it on the button for nice visual feedback, I would also add that condition onto the workflow. Now the workflow definitely won't run if that condition is true. In fact, we want to invert that because to make it unclickable we're looking at over, but to run the workflow we're actually looking at under. So it will be less than five, allowing it to go up to five clicks.

Conclusion

There you have it. That's a really quick way of tracking and limiting a user's interaction, which can be particularly useful if you're using third-party APIs such as OpenAI. I've got an idea as I was recording this - I'm going to record a second follow-up video about how to allow your user to engage with a button or a workflow a set number of times a month, week, or day using dates.