# How to set up referral tracking in Bubble.io: Step-by-Step Guide - Tool: Bubble - Difficulty: Beginner - Time required: 15-20 min - Compatibility: All Bubble plans - Last updated: March 2026 ## TL;DR 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. ## Before you start - 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 ### 1. 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. ### 2. 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. ### 3. 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. ### 4. 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. ### 5. 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 code example File: `Workflow summary` ```text REFERRAL TRACKING — WORKFLOW SUMMARY ====================================== DATA TYPES: User (add fields): - referral_code (text) — unique per user - referral_credits (number, default 0) Referral - referrer (User) - referred_user (User) - status (Option Set: Pending/Completed/Rewarded) - reward_amount (number) - created_date (date) WORKFLOW 1: Generate referral code on signup Event: User is signed up Action: Make changes to Current User referral_code = Current User's unique ID:truncated to 8 WORKFLOW 2: Capture referral on registration Event: Page is loaded (registration page) Condition: Get URL parameter ref is not empty Action: Set state referrer_code = URL parameter ref (After signup): Action: Search for User (referral_code = referrer_code) Action: Create Referral referrer = found User referred_user = Current User status = Pending created_date = Current date/time WORKFLOW 3: Reward referrer Event: Referred user completes qualifying action Action 1: Search Referral (referred_user = User, status=Pending) Action 2: Make changes to Referral status = Completed reward_amount = 10 (or your reward value) Action 3: Make changes to Referrer User referral_credits + 10 Action 4: Make changes to Referral status = Rewarded REFERRAL LINK: https://yourapp.com?ref=[Current User's referral_code] DASHBOARD DISPLAYS: Total referrals: Search Referrals (referrer=Current User):count Completed: Search (status=Completed or Rewarded):count Total earned: Search:each item's reward_amount:sum ``` ## Common mistakes - **Not persisting the referral code through the registration flow** — If the URL parameter is lost between landing page and signup form, the referral is not tracked Fix: Store the ref parameter in a Custom State or Hidden Input as soon as the page loads, and reference it during the signup workflow. - **Allowing self-referral** — Users could create accounts through their own referral link to earn fraudulent rewards Fix: Add a check: Only when referrer User is not Current User before creating the Referral record. - **Not validating the referral code** — Invalid or nonexistent referral codes create orphaned Referral records with no referrer Fix: 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 ## 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. --- Source: https://www.rapidevelopers.com/bubble-tutorial/set-up-referral-tracking-in-bubble © RapidDev — https://www.rapidevelopers.com/bubble-tutorial/set-up-referral-tracking-in-bubble