In this Bubble tutorial video, I'm going to demonstrate something we've been asked several times in relation to OpenAI. And that is that if you're using a third party service like OpenAI, how can you keep track and therefore limit the number of times a user takes an action in your app?
And we're going to just 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.
Counting button clicks
So I've got this button on the page and I want to keep count of how often the user clicks the button. And one way of doing that would be to keep count on the current user. So I'm going to say make changes to current user, and I'm going to create a field called button clicks, and this is going to be a number. And so 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. And so that it's easy to demonstrate, I will add a text field to the page, and I'll say current user, button clicks.
In fact, let's give this a bit more of a label. Let's say this user has clicked this button, and then I add in the dynamic data, current user, button clicks, space times. Let's preview that. Okay, so it's not giving me anything there. And so if I click it, I get zero. Sorry, I get one. Now, what if I wanted it to be zero? Just this little bit of a tangent. But I would do that by going into data types, user, and saying that button clicks default is zero. So when a user creates their account, it is zero rather than empty. But Bubble understands what's going on because it knew that it was empty and that plus one on empty is still one. But if you wanted it to show zero, that's how you do it. And so I can keep clicking the button and it will still keep counting. I'm just going to add in another button to help me demonstrate this. So I'm going to call this Clear. And this is going to go, current user, make changes to current user. Button clicks is zero. Because the next step is to say, well, how do I stop a user taking action after a certain number of times?
Making a button unclickable
So I can clear it down to zero, and now we're counting back up and I can clear it. Right. What do I want to say? They can only click the button five times. So I'm going to cover two areas here just to be very comprehensive on the topic. One of the first things you can do is to make the button unclickable. And so this is when current user button clicks is... Well, we can say is five in this instance, but you could do greater than or equals two. So in fact, we would want to say is equal to or greater than five. Yeah. so let's see what happens. Click, click, click, click, click. And then nothing happens. And something that I'm going off in another tangent here that you want to do is in your button styles, whether on the button itself or in your style for it, is that you can apply a style for when the button is unclickable. So we can say when this button isn't clickable, and we can use the opacity field here, and we can say take it down to 30. And let's preview that. So 1, 2, 3, 4, 5, and there we go.
It becomes unclickable. Now, there is an additional step you might want to take here, which is that this is not the most secure option. It's quite visually good. It shows that the button isn't clickable. The user gets immediate feedback. But using the browser spec tools, there may be a way for the user to actually toggle the HTML element to be clickable. And so this isn't a hard and fast way to ensure that the user doesn't take an action if they have that malicious intent. So I find myself nowadays doubling up here. So instead, as well as having it on the button so that I get the nice faded out, this button isn't clickable, the visual feedback, I would also add that onto the workflow so that now the workflow definitely won't run if that condition is true. In fact, I think I have... What have I done now? Yes, in fact, I want to invert that because to make it unclickable, I'm looking at over, but to run the workflow, I'm actually looking at under. So less than five, so it will go up to five. Okay, so there you have it. That's a really quick way of tracking and limiting a user's interaction.
And that can be particularly useful if you're using third party APIs such as OpenAI. I am now, I've got an idea, as I was recording this, I'm going to record a second follow up video because what if you want to allow your user to engage with a button or a workflow a set number of times a month or even a week or a day. We're going to do it with dates and I'm going to record that video right now.