Intro
Almost any popular app has some sort of referral / affiliate program to incentivize users to recommend the service to others. In exchange, they give credits, discounts, or other perks.
Such referral / affiliate programs are often implemented with third-party solutions. But they are not free and require sometimes too complex integration.
In this guide, I’ll show you how to implement your own referral / affiliate program inside your own Bubble app in under an hour, without any third-party service. Plus, you’ll have full control over what types of rewards to give to your users, and won’t need to send your data to any external database (cos privacy matters). So let’s go!
If you’d prefer a video guide, check it out below. If you prefer text format, just continue reading.
Use these links to try creating referral code in demo mode:
- The Demo app link: https://referralaffiliate-demo.bubbleapps.io/ (username / password: “test” / “test”)
- Bubble Editor app code: https://bubble.io/page?id=referralaffiliate-demo
What is referral code and how it works
What a referral code is
A referral code is a unique identifier in the realm of referral marketing, acting as a specialized ID to track the origin of a customer referral. It is instrumental in ensuring that the correct rewards are distributed to both the referrer and referee.
Creating or generating a referral code, often a blend of alphanumeric characters, is the initial step in establishing a referral program. Companies pondering how to create or make a referral code have various approaches at their disposal. They can either manually create them or utilize referral program software to automate and streamline the process.
The essence of a referral code lies in its ability to foster brand awareness, cultivate stronger customer relationships, and facilitate cost-effective customer acquisition strategies. When customers share their unique codes within their networks, it amplifies a brand’s visibility and credibility, leveraging the power of word-of-mouth. Thus, understanding what a referral code is and how to generate or create one is pivotal for businesses aiming to harness the full potential of referral marketing strategies.
Difference between a referral code and a referral link
A referral code and a referral link serve similar purposes in promoting a business but operate slightly differently. A referral code is a unique combination of letters and numbers used to identify the person who referred a new customer. Businesses often ponder how to create or generate a referral code, aiming to make it simple yet unique for tracking purposes.
On the other hand, a referral link is a URL that includes the referral code, directing potential customers to a business’s website. It’s a clickable link that automates the referral process, making it user-friendly.
The main difference lies in their usage. A referral code needs to be manually entered during a transaction, while a referral link is clicked on, directing the user to a webpage where the code is automatically applied. Understanding this distinction is crucial for businesses exploring referral marketing strategies, ensuring they know how to make and create effective referral codes and links to optimize their customer acquisition processes.
Why create referral codes
Referral codes are a powerful tool in a company’s marketing arsenal, serving as a bridge connecting current customers with potential new ones. Knowing how to create or generate a referral code is essential for businesses aiming to leverage their existing customer base for growth. A referral code, a unique identifier, facilitates the tracking of referrals, ensuring that customers are rewarded for bringing new business.
Utilizing referral codes offers a multitude of benefits. Firstly, they enhance brand awareness and reputation through word-of-mouth, a trusted form of marketing. Customers sharing their unique codes act as brand ambassadors, spreading the word and enhancing the company’s credibility.
Moreover, referral codes foster stronger relationships with customers. By offering rewards or discounts, companies show appreciation, encouraging loyalty and repeated business. Understanding what a referral code is and how to make one is pivotal for businesses aiming to maximize these benefits, ensuring a well-structured and effective referral program. In essence, referral codes are not just about acquiring new customers but also about valuing and retaining the existing ones, making them an invaluable asset in marketing strategies.
Referral program logic
We’ll implement the following logic for the affiliate program:
- Generate for the user A a unique “referral_code”
- Give user A a referral link to share (that will include the code).
- When user B clicks on the link — save the referral code to cookies.
- When user B creates account, check cookies, and if the referral code is there — save it to user B in the “referred_by_code” field.
- When user B completes the purchase, give user A a bonus, credit, commission (or anything else you decide).
Why do we need 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.
How to make a referral codes in Bubble
Step 1: Generate unique “referral_code”
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.
Step 2: Create a referral link 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.
Step 3: Save the referral code to 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” — https://bubble.io/plugin/tiny-cookies-1697557606346x504428348398108700
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”.
Step 4: Save the referral code from cookies for new users
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.
💡 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.
Step 5: Give credits/bonuses to users
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:
Conclusion
That’s it on how to implement a quick and easy referral / affiliate program in your Bubble app.
In the realm of digital marketing, referral programs stand as a powerful tool, bridging the gap between loyal customers and potential new users. This guide has navigated through the pathways of creating and implementing a referral code system within a Bubble app, elucidating the process with clarity and precision.
The methodology outlined allows for a nuanced control over the referral process, ensuring privacy, flexibility, and a tailored user experience.
It’s free, you have full control, and don’t give away your data. Hope it helps your users share even more of the awesome apps you build on Bubble.
Links to explore:
- The Demo app link: https://referralaffiliate-demo.bubbleapps.io/ (username / password: “test” / “test”)
- Bubble Editor app code: https://bubble.io/page?id=referralaffiliate-demo
- “Tiny Cookies” free plugin: here by the link.
Check out more of Sommo plugins and templates here. If you need help bringing your own app to life — don’t hesitate to contact us.
