Throughout this guide, you’ll learn everything there is to know about building a custom invite code feature within Bubble.
The steps to creating a custom invite code feature in Bubble include:
- Structuring your database
- Generating a new invite code
- Deleting used invite codes
- Rejecting invalid invite codes
- Displaying invite codes to users
Full Transcript of Tutorial
An invite-only experience allows us to generate a unique invite code that can be sent to another user within your app. Once a user has access to an invite code, they’ll have the ability to register a new account.
Invite codes are a popular feature within applications like Clubhouse and Dribbble. In my opinion, they’re actually a great way to increase the growth of your application as they help create exclusivity around who can register an account.
Let’s open up a Bubble editor and I can start walking you through all the steps involved in bringing your own invite-only experience to life.
Over in our Bubble editor, the first feature I’d like to build is a basic registration page. On this page, it will include an input field that allows someone to paste in their invite code.
Before we build out the workflows to power this feature, I’d like to first explain how I’ve structured my database to facilitate our invite code experience.
1. Structuring your database
If I open the data tab within my Bubble editor, you’ll see that I have two data types currently within my application. One is a ‘user’, in which I’m storing some information about the user like their name and profile photo. Now, by all means, if you’re storing any additional information about users in your application, you’re more than likely going to have a myriad of additional data fields here.
Within my database, I also have a separate data type which is called the ‘invite code’.
Every time a user registers an account in our application, I’m going to create an invite code in my database.
By default, you’ll see here that this invite code will be linked to a creator. So this is the user who actually creates this code in our database.
Inside this data type, I’ve also added an additional data field called ‘code string’, which is just a text field type. This is where we’ll be storing the actual invite code itself. Whether that be numbers, text, or special characters, I’m just going to store this within my text field.
After reviewing our database, we can then open the registration page I’d previously shown you.
On this registration page, I have a series of input fields that will allow us to register a user’s name, email, and password. I’ve also added an additional field that will store a user’s invite code. Below this field, I’ve even added an alert message to display an error if a user adds an invalid invite code.
2. Generating a new invite code
When it comes to creating an invite code, the first thing we’ll need to do is build out a workflow that registers a new user account in our database. Throughout this process, we’ll add be able to restrict this workflow to only those users with valid code.
To create this workflow, I’ll select the ‘register’ button on my current page, then choose to ‘start/edit a workflow’.
Now before I create the steps within this workflow, I’m actually going to add a condition to the workflow trigger. This trigger will determine if a user has input a valid input code.
The way I can determine if the code is valid is by referencing the existing invite codes within our database. To do this, I can perform a search on my workflow trigger, then search fro all of the codes in my app. If this search then retrieves a valid code, the rest of this workflow will run smoothly, and the user will able to register a new account.
In a moment, we’ll also create a separate workflow that identifies if the invite code isn’t valid, in which case, I’ll instead choose to display an error message on my page.
The way we can add this condition is by performing a search through our database for all of the invite codes where the ‘code string’ field – so this is the characters of the invite code – equals the same value as the ‘input invite code’ on my page.
If an invite code stored in our database matches the same value as the invite code in our input form, I’d like to of course allow this workflow to run. To do this, I’ll need to perform a count of how many of these matched instances are within our database. After I’ve performed a search for the valid invite code, I’d like to perform a count on this on this expression.
If Bubble has in fact identified that there is an invite code in our database that matches the same value as the input field, I’m going to need to recognize if there are more than zero instances of that occurring. This just essentially means, as I’d mentioned before, that there is, in fact, a valid invite code in our database that matches the same value as that input field.
And so from here, what we’re going to need to do is build out the workflow that will power the user registration feature. Within this workflow, the first step I’d like to select is from the ‘account’ tab. I’ll choose the ‘sign the user up’ action.
From here, this workflow will follow any user registration experience you’ve created in the past. You’ll be required to match the input fields on your page with the relevant fields in your database.
3. Deleting a used invite code
After registering a user’s account within the database, I’d like to add an additional step to this workflow. Within this step, I want to delete the invite code that has just been used, because once a code has been used, I don’t want anyone else to make use of it again.
In our workflow, I’ll select from the ‘data’ tab, then choose the ‘delete a thing’ action. The thing I’d like to delete will be an invite code. To delete the exact invite code that was just used, we’ll once again perform a search in our database. This time, we’ll be searching for the invite code where the ‘code string’ field equals the same value as the code stored in our input field on the page.
From here, I’ll delete the very first and only item in our database.
After deleting this invite code and registering a new user account, I’ll need to then generate a new invite code that this user can pass on to someone else. To create this feature, we’ll select the workflow action to ‘create a new thing’, The type of thing I’d like to create is, of course, an invite code.
When it comes to the ‘code string’ I’ll be storing for this new invite code, I’d like to generate a completely random string of text. Within this workflow step, you’ll see an option for Bubble to ‘calculate a formula’. The formula I’d like to calculate will be the option to ‘generate a random string of numbers’.
For the random string of numbers, you’ll need to select how many characters long this should be. In my example today, I’ll select that this should be 20 characters.
When I’m generating this random string of text, I’ll also have the ability to select what type of characters I’d like to include. This can be numbers, symbols, as well as both lowercase and uppercase letters.
At this point, we would have successfully generated a unique invite code for a newly registered user, but there’s still one last step we’ll need to add to our workflow.
In our workflow, we’ll select from the ‘navigation’ event and choose the ‘go to page’ action. I’ll set the destination page to be a settings page within my app.
And just like that, that’s everything we’ll need to include within this workflow. Finally, I’ll update the event color of this workflow to green, so that way I can easily interpret that this is the workflow that successfully registers a new user account.
4. Rejecting invalid invite codes
As I’d previously mentioned, we’re also going to need to create a separate workflow that’s triggered whenever a user tries to use an invite code that isn’t valid. In this case, instead of registering a new account for this user, I’d like to just display a temporary error message.
Thankfully, the process of creating this separate workflow is relatively straightforward.
If I open my workflow tab, I’m going to start by making a copy of the previous workflow I’d just created.
When I paste in a duplicate version of this workflow, the first thing I’ll need to do is update the workflow color. If I set this to red, I’ll easily be able to differentiate between my two workflow triggers.
From here, I can now update the trigger on this new workflow. Based on the existing trigger, we’re performing a search through our database for an invite code that matches the same value as the relevant input field on our page. If this search was to now return a count of zero, what”d like to do is display the alert message on my page.
Within this workflow, I’ll also need to delete all of the steps that we’ve created in the original workflow we duplicated. Instead of using these existing workflow steps, I’m just going to add one action which will display our error alert message.
5. Displaying invite codes to users
After building the workflows to create and delete our invite codes, I’d like to now create a feature that allows us to display a user’s unique invite code on their settings page.
If I was to open the settings page within my app, you’ll see that I’ve added yet another series of input fields to reference and display a user’s account information. Below these fields, I’d like to add a group element on my page. The purpose of this group is to store and display a user’s invite code.
When adding this group to my page, I’ll choose to hide this by default. The reason I’m doing this is because I’d only like it to be visible whenever a user actually has access to an invite code.
To make this group visible on our page, I’ll need to create a condition. Within this condition, I’ll perform a search through my database for all of my invite codes where the creator of this code equals the same value as the current user. If this search returns a value that’s greater than zero – meaning there is in fact an active invite code – this group should then be displayed.
And that’s how we can create a feature to display a user’s personal invite code. Of course, they’ll be able to share this with anyone they’d like, however, once it’s been used, the group element it sits within will no longer be visible.
Now, I’d like to run a preview of my user registration page to see how this whole experience functions.
Over on my registration page, I’m going to start by adding some new account details into the relevant fields. When it comes to my invite code, I’m just going to paste in an active code I’ve already generated in my database.
While I’m running a preview of this experience, what I’d also like to show you is how we can process an invalid invite code. If I was to delete one character from this invite code and choose to register this account, you’ll see that my error message has been displayed because that was an invalid code.
If I was to then add that character back in and once again, select to register this account, what you’ll see is that the workflow will now run, and an account will be created in my database.
After registering a new account, we’ll then be redirected to our dedicated settings page where we’ll be able to see our unique invite code that we can share with our own network.
And just like that, this is how you create your own custom invite code experience, all without having to write a single line of code using Bubble.