Create a referral system in Bubble.io without any plugins

Have you ever thought about a referral system you can use repeatedly? And also fast and easy to set up, even for a beginner?

You can create a referral system in your Bubble.io app. Without using any third-party service or plugin. And it takes only 15 min to setup.

In this Bubble tutorial, we'll learn how to create a referral system in our app.

There are three steps to building a referral system in your Bubble app

Step 1: Generating a referral code
Step 2: Sharing the referral code
Step 3: Validating the referral code upon signup

Generating a referral code in Bubble

There are native Bubble features that we can use to generate a referral code.

The random string generator will generate an arbitrary string of alphabets and numbers. This string will make it unique to a large extent, but we can personalize it further by prefixing the first three characters of the current user's name.

The way to generate a random string in Bubble is by a Calculate formula function. 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 loaded.

It is best to 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. Check at least one of these boxes for it to work.

To save it to the database, you must create or update an entry as you would normally. You can also choose to 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!

We can use this code to send an email to share the code. The workflow is simple, and you have to pull the referral code from the Bubble database.

Referral code validity check

Now the real work begins. Make sure the referral codes are working.

You would need an input element and a button for this. When you click the button, we'll search the database to see if that code exists or not.

Bubble will try to find a Referral Code that matches the input element's value and is still valid.

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 essential that you define the search constraints properly. I wanted the code to be valid only if the 'Valid' field is 'Yes'.

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 into 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.

Preview - https://nocodeassistant-tutorials.bubbleapps.io/version-test/referral_system

Editor - https://bubble.io/page?type=page&name=referral_system&id=nocodeassistant-tutorials&tab=tabs-1

If you need some help with your Bubble app or if you need a team of Bubble developers to build a Bubble app for you, reach out to me at [email protected]. You can also follow me on Twitter