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!
There are a few challenges we need to notice before working with referral links
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:
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.
You can edit the settings followed by the comment // 1. OPTIONS TO DEFINE in the code. Here’s what they mean:
You can now add the code in the <head> section of your website/app.
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:
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 selecting “Cookies” for my subdomain in the left menu.
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.
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:
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.
Subscribe to Our Newsletter
In-depth Bubble tips
Best tools for Bubble
Reports and updates