Building a cross-platform referral system on Bubble.io

Referral links are a powerful tool used by companies to incentivize their customers to refer new business to them. Essentially, a referral link is a unique URL that is provided to an existing customer to share with their friends and family. When someone clicks on the referral link and makes a purchase, the referring customer is rewarded with a discount, cashback, or other incentives.

However, building strong referral links on Bubble.io can be hard, especially because the user might change pages (sometimes from a landing page made on another tool) or even leave and come back later…

In this article, we’ll dive deeper into how we can build a strong affiliation system with referral links that work across different platforms (let’s say your landing page on Webflow and Bubble).
This is the system we use ourselves at Flusk!

Challenges with Referral Links

There are a few challenges we need to notice before working with referral links

1. Firstly, as mentioned above, it needs to be cross-platform if you’re using different tools for your website/app.
   Like us, let’s say your landing page is made on Webflow (main domain) and your app is made on Bubble (.app domain), we need to make sure that wherever the domain the user lands, he can safely navigate across the other one without losing the referral code.
   We also need to make sure that when the user signup, we’re able to retrieve its referral code if he first landed on the main domain for example.
   ‍
2. The second challenge is to save to referral code, it could seem easy to keep the referral code as an URL parameter and make sure that whenever the user navigates to another page, we send again the referral code until he signed up, but generally speaking, this is a bad practice.
   Indeed, this will be difficult to maintain when adding new pages or new “Go to page” workflow actions (if you forget to pass the parameter once, it’s all gone), and it won’t work if the user first visits your website with the referral code, and decide to come back later to signup.
   ‍
3. This leads us to the third part, which is more questions that you need to ask yourself in order for your system to work regarding your rules.
   ‍
   - Should the referral works only during the first visit (with the code in the URL), or should it be saved if the user later comes back?
   - If not, should the referral code expires after some time, or does it stays permanently valid?
   - What happens if the user comes back with a second referral code, should it overrides the first one, or does the first one always keep 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:

1. Detecting and saving any referral code in the URL on every domain
2. 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.

<script type="text/javascript">

// 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=/";
    }
  }
</script>

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 <head> 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:

https://app.flusk.eu

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 selecting “Cookies” for my subdomain in the left menu.

‍

‍

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:

• ‍Local Storage & Cookies
  ‍
• Browser Cookies
  ‍
• Simple Browser Cookies

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.

‍