Tracking, counting & limiting user actions when using Bubble with ChatGPT or OpenAI
In this Bubble tutorial we demonstrate how to track how many times a user runs a workflow and then how to limit the number of times a user can run that workflow each month. This will be very useful to anyone building an app using a costly third party API such as OpenAI & ChatGPT.
Limit user actions: Learn how to track and restrict workflow runs in your Bubble app!
OpenAI integration made easy: Discover how to count and limit API calls for third-party services like OpenAI.
Master Bubble workflows: Create a button click counter and learn to set usage limits in minutes!
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.