[GUIDE] Implementing a Referral/Affiliate Program in Bubble🚀

Hey fellow Bubblers,
Andrii Bas from Sommo here.

We all recognize the power of a solid referral/affiliate program. It’s not just about giving out credits or discounts; it’s about building a community around your product. And with Bubble, this becomes even more exciting!

Over the years, I’ve observed numerous apps relying on third-party solutions to implement such programs. While they might be great, they aren’t always free and can sometimes be challenging to integrate.

So, I decided to pen down a guide that demonstrates how you can set up your own referral program right inside your Bubble app, and the best part? You won’t need any third-party service! :tada:

Here’s a brief rundown of what’s covered:

:thought_balloon: Why Use Cookies?

Cookies are not technically required, but you need some way to save the referral code for attribution. And cookies are a great way for it.

Moreover, you can define how long this cookie will be stored (in our case — 30 days). It will be your “attribution window”. This means that if user B clicks on the link, does not sign up immediately, and leaves, but comes back in a few days and completes the sign-up process, you will still assign the referral correctly to user A.

With having the code only in the URL you won’t be able to assign the referral if the user closes the session. And with local storage you’ll find it harder to manage the code’s expiry after some time.

That’s why cookies are an excellent solution for temporarily storing the referral code.

:eyes: Steps to Implement:

1. Generating unique “referral_code” for users.

Add a field “referral_code” to the user.

When the user signs up, set the value of it to a random string. You can do it with the “Calculate formula → Generate random string” action.

A good place to add this action can be in the Database Trigger Backend workflow. Add a trigger with the condition “User before change is empty”, so that it runs only once for new users.

2. Crafting referral links for users to share.

Create a page for logged-in users, and give them an option to copy their referral link. In our case it’s “Website home URL?r=Current user’s referral code” (meaning we just add a query parameter “r” to the website home URL, with the value of the current user’s referral code.

3. Saving referral codes using cookies. (Shoutout to our free plugin “Tiny Cookies”!)

When user clicks the referral link, check if the code is present, and if the user is logged out, save it to cookies. You can do it easily with the free plugin “Tiny Cookies”.

Note that I’m saving it only for 30 days and only for users who are not logged in. The logic of our referral program is to give incentives only for bringing new users. If you have other plans for your program, or want to change the attribution window — feel free to do so.

You can check saved cookies in the Dev Console, under “Application → Cookies settings”.

4. Assigning referral codes from cookies for new sign-ups.

When the user creates an account, check cookies, and if the referral code is present there, save it to the Current user. You can do that by calling “Get a Cookie” with your cookie name:

And then receive the value in the “Cookie A Value Updated” event:

Note that it’s important to check if the value is not empty, and if user’s “referred_by_code” value is empty, so that we don’t override it accidentally.


:bulb: Also, don’t try to read the value of the “Cookie” element immediately after calling “Get cookie”. Bubble updates element states asynchronously, and most likely, this value won’t be there yet. Instead — listen for the updated value in the “Cookie A Value Updated” event.


5. Rewarding users based on your app’s logic.

Depending on the logic of your app, when user B makes a purchase, and if his/her “referred_by_code” is not empty, give a reward to the user A who invited them. You’re fully flexible here about what kind of reward to give to your powerful influencers!

At least display to them the number (or maybe even names) of the users whom they referred:

Want to delve deeper?

Both a detailed article and a video guide are available to make this process crystal clear for you.

:link: Read the Article & Watch the Guide: Implementing a Referral Program in Bubble

I genuinely believe that this method can help many of you, especially those who are keen on keeping everything in-house. Would love to know your thoughts and feedback on the approach. Let’s keep the no-code movement robust and innovative!

Best,
Andrii Bas

9 Likes

Brilliant @andriy.bas, and so clearly explained.

Cheer, MV Pete

1 Like

Great job. I strongly prefer GTM for cookies esp since you get great analytics as well

1 Like

@andriy.bas Thank you for sharing this guide.

I am having issues with step 3. I have followed the steps to create a referral link. When I copy paste the referral link in an incognito window, I dont see cookie for __app-referrer in the dev console.

Any suggestions on things I could try to debug this?