Referral links serve as a valuable tool for businesses to encourage customers to refer new business to them. These unique URLs are given to existing customers, who can then share them with friends and family. When someone clicks on a referral link and makes a purchase, the referring customer receives incentives such as discounts or cashback.
Nevertheless, establishing robust referral links on Bubble.io can present challenges, particularly when users navigate between different pages or even leave and return later.
In this article, we will explore methods to create a robust affiliation system using referral links that function seamlessly across multiple platforms, such as a landing page on Webflow and Bubble. This system mirrors the approach we utilize at Flusk!
Challenges Associated with Referral Links
Before we delve into the construction of referral links, let’s address a few challenges:
- Firstly, as mentioned earlier, cross-platform compatibility is essential when utilizing different tools for your website or app. For instance, if your landing page is built on Webflow (your main domain), while your app is developed on Bubble (your .app domain), you must ensure a smooth transition for users across both domains. Furthermore, it is important to be able to retrieve a user’s referral code when they sign up, even if they initially landed on the main domain.
- The second challenge involves effectively saving the referral code. While it may seem simple to keep the referral code as a URL parameter and resend it whenever the user navigates to another page until they sign up, this approach is generally considered poor practice. It becomes difficult to maintain when adding new pages or “Go to page” workflow actions, as forgetting to pass the parameter once can disrupt the entire process. Moreover, this method fails to function if a user initially visits your website with a referral code and decides to return later to sign up.
- This leads us to the third aspect, which involves asking yourself important questions to ensure the functionality of your system in accordance with your rules:
→ Should the referral only apply during the user’s first visit (using the code in the URL), or should it be saved if the user returns later?
→ If not saved, should the referral code expire after a certain period, or should it remain valid indefinitely?
→ What should occur if a user returns with a second referral code? Should it override the initial one, or does the first code always take priority?
How to Build a Referral System in Bubble.io
To build an efficient referral system in Bubble that works across different platforms, we’ll have to use some… code 
But don’t worry, I’ll explain everything, and as always with code, you can just copy-paste things and it’ll work, right?
Here are the steps we’ll cover in order to setup everything:
- Detecting and saving any referral code in the URL on every domain
- Retrieving any saved referral code during signup
Detecting And Saving Referral Codes
The goal here is to detect whenever a user lands on our website/app using a referral code in the URL (something like referral=SH23SD).
Once this is done, we’ll have to save this referral code, so we’re sure that the user can keep navigating through the website without the risk of loosing his referral, we’ll use the browser cookies for this.
The code we will write can (and should) be then used across all your domains and platforms, because in the end, the referral code will be stored within the main domain cookies, ready to be retrieved during signup.
// 1. OPTIONS TO DEFINE
let domain = "flusk.eu" // The top-level domain
let lenghtsDays = 365 // The duration of the cookie
let override = false
let parameterName = "invite" // The URL parameter name
let cookieName = "invite_ref_code" // The name of the cookie
// 2. FUNCTION TO GET COOKIE BY NAME
function getCookie(cookieName) {
let cookie = {};
document.cookie.split(';').forEach(function(el) {
let [key,value] = el.split('=');
cookie[key.trim()] = value;
})
return cookie[cookieName];
}
// 3. GET CURRENT INVITE IN URL
var url_string = window.location.href;
var url = new URL(url_string);
var invite = url.searchParams.get(parameterName);
if (invite) {
// If URL contains invite, check if already have invite in cookies
var current = getCookie('invite_ref_code');
if (current === undefined || current === "") {
var cookieValue = invite;
var myDate = new Date();
myDate.setDate(myDate.getDate()+lenghtsDays);
document.cookie = cookieName +"=" + cookieValue + ";expires=" + myDate + ";domain=." + domain + ";path=/";
}
}
You can edit the settings followed by the comment // 1. OPTIONS TO DEFINE in the code. Here’s what they mean:
-
domain: the top-level domain where the cookie/referral code will be saved. This is a mandatory setting in order for the code to work properly.
If you want the code to work across app.website.com and website.com, then use website.com as the domain.
‍ -
lenghtsDays: the expiration of the cookie after the first visit with the referral code, in days.
‍ -
override: set to “true” if visiting your website with a new referral code should override the previous one if any.
‍ - parameterName: the name of the URL parameter for the referral code.
Adding The Code to Your Landing Page & App
You can now add the code in the section of your website/app.
-
On Bubble, this is done under Settings > SEO / Metatags > Script/meta tags in the header
-
On Webflow, this is done under Site settings > Custom code > Head code
The next step is to check if everything works properly so far. Normally, if a user visit the website using your referral code, it should be saved in your domain’s cookies.
I open the link to my main domain URL running on Webflow, and I add the following parameter containing the referral code:
https://flusk.eu***?invite=GDDH37*
Then I navigate to our app subdomain running on Bubble, this time without the referral code:
In order to see if the cookie was properly set, using Chrome I right-click on the page and choose “Inspect” in the contextual menu.
This opens the Chrome Dev Tools, which will allow us to explore the cookie under the “Application” tab and select “Cookies” for my subdomain in the left menu.
‍
There is it! First step is done, my cookie was set properly.
‍
Minifying The Script
This is optional, but as the code we wrote is quite long and as we now know it works properly, you can also minify the script using a minifying tool like Minify-JS.
Retrieving The Referral Code During Signup
Let’s get back to the point of this tutorial: being able to know which user referred another.
During signup (or at another moment depending on your use-case) we’d like to retrieve the referral code that was saved in the cookies.
There’s a few options possible for us at this stage, the easiest is being using a plugin.
Here’s a few plugins I tried that lets you retrieve a cookie:
Otherwise, you can also stick to a custom code within Bubble:
function getCookie(cookieName) {
let cookie = {};
document.cookie.split(';').forEach(function(el) {
let [key,value] = el.split('=');
cookie[key.trim()] = value;
})
return cookie[cookieName];
}
There you go!
You should be able to get back the referral code in your workflow. Now it’s on you to search which user owns the referral code and put your logic into practice.
‍
If you want to dig further, here are some sweet options:
- Feel free to suggest any edits or suggestions (was this too complex, well explained?)
- Subscribe to our blog
- Check out what we’re doing at Flusk — a hub for Bubble-based businesses and makers
- Or even just connect with me on LinkedIn , I’d love to have you around
Extras:
- Using pre-fetching on repeating groups with images
- Pre-fetching tabs on SPA to radically improve navigation speed
Victor from Flusk
Flusk - a hub of tools and services for Bubble makers and businesses
