Set up a referral tracking system in Bubble by generating unique referral URLs per user via URL parameters, tracking who referred whom with a Referral data type, crediting referrers when new users sign up through their link, and building a referral dashboard showing earnings and invite performance.
Overview: Setting Up Referral Tracking in Bubble
This tutorial walks you through building a referral system in Bubble. You will generate unique referral links per user, capture the referrer during new user registration via URL parameters, create a Referral record linking referrer to referred user, and build a dashboard where users can see their referral stats and rewards.
Prerequisites
- A Bubble account with an existing app
- A working user registration flow
- Basic understanding of Bubble URL parameters and workflows
- Familiarity with Bubble data types
Step-by-step guide
Create the referral data structure
Create the referral data structure
Go to the Data tab. Add a field to User called referral_code (text) — this will be their unique code. Create a data type called Referral with fields: referrer (User), referred_user (User), status (Option Set: Pending, Completed, Rewarded), reward_amount (number), and created_date (date). On user signup, generate the referral_code by using the User's unique ID or a truncated version of it.
Expected result: User has a referral_code field and a Referral data type exists for tracking referral relationships.
Generate and display referral links
Generate and display referral links
On the user's dashboard or profile page, add a section showing their referral link. Build it dynamically: Website home URL + ?ref= + Current User's referral_code. For example: https://yourapp.com?ref=abc123. Add a Copy to Clipboard button using a Copy to Clipboard plugin or JavaScript in an HTML element. Display the number of successful referrals: Do a search for Referrals (referrer = Current User):count.
Pro tip: Use a shorter code (first 8 characters of the unique ID) for cleaner URLs that are easier to share.
Expected result: Users can see and copy their unique referral link from their dashboard.
Capture the referral code during registration
Capture the referral code during registration
On your registration page, check for the ref URL parameter: Get data from page URL parameter ref. If it is not empty, store it in a Hidden Input or Custom State called referrer_code. During the signup workflow, after the user is created, search for the User whose referral_code matches the captured ref parameter. If found, create a Referral record with referrer = matched User, referred_user = newly created User, status = Pending.
Expected result: New users who arrive via a referral link are automatically linked to their referrer in the database.
Reward successful referrals
Reward successful referrals
Define what constitutes a successful referral (e.g., the referred user completes a purchase or verifies their email). When this event occurs, create a backend workflow that finds the Referral where referred_user = this User and status = Pending. Change the status to Completed. Then reward the referrer: add credits to their account, apply a discount, or create a Reward record. Change the Referral status to Rewarded after crediting.
Expected result: Referrers are automatically rewarded when their referred users complete the qualifying action.
Build the referral dashboard
Build the referral dashboard
Create a referral section on the user's profile page. Display: referral link with copy button, total referrals (search count), successful referrals (count where status = Completed or Rewarded), total rewards earned (sum of reward_amounts), and a Repeating Group showing all referrals with referred user name, date, and status. For advanced referral programs with multi-tier rewards and affiliate tracking, consider working with RapidDev.
Expected result: Users see their referral performance, rewards earned, and a list of all referrals.
Complete working example
1REFERRAL TRACKING — WORKFLOW SUMMARY2======================================34DATA TYPES:5 User (add fields):6 - referral_code (text) — unique per user7 - referral_credits (number, default 0)89 Referral10 - referrer (User)11 - referred_user (User)12 - status (Option Set: Pending/Completed/Rewarded)13 - reward_amount (number)14 - created_date (date)1516WORKFLOW 1: Generate referral code on signup17 Event: User is signed up18 Action: Make changes to Current User19 referral_code = Current User's unique ID:truncated to 82021WORKFLOW 2: Capture referral on registration22 Event: Page is loaded (registration page)23 Condition: Get URL parameter ref is not empty24 Action: Set state referrer_code = URL parameter ref25 (After signup):26 Action: Search for User (referral_code = referrer_code)27 Action: Create Referral28 referrer = found User29 referred_user = Current User30 status = Pending31 created_date = Current date/time3233WORKFLOW 3: Reward referrer34 Event: Referred user completes qualifying action35 Action 1: Search Referral (referred_user = User, status=Pending)36 Action 2: Make changes to Referral37 status = Completed38 reward_amount = 10 (or your reward value)39 Action 3: Make changes to Referrer User40 referral_credits + 1041 Action 4: Make changes to Referral42 status = Rewarded4344REFERRAL LINK:45 https://yourapp.com?ref=[Current User's referral_code]4647DASHBOARD DISPLAYS:48 Total referrals: Search Referrals (referrer=Current User):count49 Completed: Search (status=Completed or Rewarded):count50 Total earned: Search:each item's reward_amount:sumCommon mistakes when setting up referral tracking in Bubble.io: Step-by-Step Guide
Why it's a problem: Not persisting the referral code through the registration flow
How to avoid: Store the ref parameter in a Custom State or Hidden Input as soon as the page loads, and reference it during the signup workflow.
Why it's a problem: Allowing self-referral
How to avoid: Add a check: Only when referrer User is not Current User before creating the Referral record.
Why it's a problem: Not validating the referral code
How to avoid: Search for a User with the matching referral_code before creating the Referral. Only proceed if a match is found.
Best practices
- Generate referral codes automatically on user signup
- Store the referral parameter early in the signup flow before it can be lost
- Validate that the referral code matches an existing user before creating a referral record
- Prevent self-referral with a condition check
- Define clear qualifying actions for when referrals become successful
- Display referral stats prominently to encourage sharing
- Use a backend workflow for reward distribution to ensure reliability
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building a referral system in Bubble.io. Users should get a unique referral link, and when someone signs up through it, the referrer gets credited. How do I generate referral URLs, track signups via URL parameters, and distribute rewards?
Build a referral tracking system. Generate unique referral codes per user, capture the ref URL parameter during registration, create Referral records linking referrer to new user, and build a dashboard showing referral stats and rewards.
Frequently asked questions
Can I use custom vanity codes instead of generated ones?
Yes. Add an input on the profile page where users can set their own referral_code. Add a uniqueness check (search for existing users with the same code) before saving.
How do I prevent referral fraud?
Prevent self-referral, require email verification for new accounts, limit rewards per referrer per time period, and manually review referrals above a certain threshold.
Can I implement multi-tier referrals?
Yes. Add a referred_by field on User. When a referred user refers someone else, trace back the chain and distribute smaller rewards to each tier.
Can RapidDev help build an affiliate program?
Yes. RapidDev specializes in Bubble development and can help build full affiliate programs with multi-tier commissions, payout tracking, and fraud prevention.
How do I track which platform the referral came from?
Add a source URL parameter alongside ref (e.g., ?ref=abc123&source=twitter) and store it on the Referral record for analytics.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation