You can create a Referral system in your Bubble.io app natively. Without using any third-party service. And it takes only 15 min to setup.
There are three broad steps to achieving such a system.
- Generating a referral code
- Sharing the referral code
- Validating the referral code upon signup
Generating a referral code
To generate a referral code, there are native Bubble features that we can use. The random string generator will generate us a random string of alphabets and numbers. This will make it unique to a large extent, but we can personalize it further by prefixing the first 3 characters of the current user’s name.
The way to generate a random string in Bubble is by a function called Calculate formula. You can use this function anywhere you can use dynamic data.
I’ve used an input element to generate a unique code and a new code is generated every time the page is refreshed. You should probably save it directly to the database upon signup or wherever appropriate.
You can change the length of the code and choose whether your referral code should have letters, numbers or special characters. Make sure to tick at least one of these checkboxes for it to work.
To save it to the database, simply create or update an entry as you would do normally. You can also have a Valid field of type Yes/No which you can use to cancel the validity of the code.
Now that the code is saved to the database, we need to share this code!
Sharing the referral code
To share the workflow, we can send an email with this code inside the email. The workflow is basic and you just have to pull the referral code from the database. A useful tip is to store the code in User data type itself. As a user at any given point of time would be having just 1 referral code, we can store it there.
However, if you intend to have multiple referral codes per user and/or change the validity of codes, it makes sense to create a separate Data type for referral codes.
Referral code validity check
Now comes the fun part. Checking the validity of the referral codes.
You would be needing an input element and a button for this. When the button is clicked, we will search the database to find if such a code exists or not. In Bubble terminology, we will Do a Search for Referral Codes and find the first item where Bubble finds a code which matches the input element’s value.
If the first item is NOT empty, the code is valid.
If the first item is empty, then no such code exists and the code is invalid.
It is important that you define the search constraints properly. I had created a Valid field of Yes/No type so I wanted the Valid =”yes” for a code to be acceptable.
You can then create further actions based upon which condition is true and update your user records.
It is a simple, clean and free method to integrate a referral system in your Bubble app.
You can use the workflows shown above anywhere you need to check if the database contains a particular entry or not. This is not just limited to referral codes.
The beauty of Bubble is that once you understand how Bubble works, you can configure it to do whatever you want.