Build an affiliate marketing system in Bubble by generating unique referral links with UTM parameters, tracking sign-ups through URL parameters, calculating commissions based on referred user actions, and providing affiliates with a dashboard showing their referrals, earnings, and payout status. Cookie-based attribution ensures referrals are tracked even if users do not sign up immediately.
Create an Affiliate Marketing System in Bubble
This tutorial guides you through building a complete affiliate system where partners earn commissions for referring new users. You will create unique referral links, track sign-ups, calculate commissions, and build a dashboard for affiliates to monitor their performance.
Prerequisites
- A Bubble account with an existing app that has user sign-up
- A monetization model (subscriptions, purchases, etc.)
- Basic understanding of URL parameters and workflows
- Familiarity with Data Types and Privacy Rules
Step-by-step guide
Create Affiliate Data Types
Create Affiliate Data Types
Go to Data tab and create: (1) 'Affiliate' with fields: user (User), affiliate_code (text, unique), referral_count (number), total_earnings (number), pending_payout (number), status (text — active/inactive). (2) 'Referral' with fields: affiliate (Affiliate), referred_user (User), referral_date (date), converted (yes/no), commission_amount (number), commission_paid (yes/no). Generate a unique affiliate_code for each affiliate using a combination of their username and a random string.
Expected result: Affiliate and Referral data types exist for tracking the referral program.
Generate Unique Referral Links
Generate Unique Referral Links
Create an affiliate dashboard page. Display each affiliate's unique referral link as: 'https://yourapp.com/?ref=[affiliate_code]'. Build this dynamically: concatenate your app URL with '?ref=' and the Current User's Affiliate's affiliate_code. Add a 'Copy Link' button that uses a Run JavaScript action with navigator.clipboard.writeText() to copy the link. Show the affiliate code prominently so affiliates can share it.
Expected result: Each affiliate has a unique referral link they can copy and share.
Track Referrals on Sign-Up
Track Referrals on Sign-Up
On your home or landing page, add a 'Page is loaded' workflow that checks for the 'ref' URL parameter using 'Get data from page URL' → parameter name 'ref'. If present, store the affiliate code in a cookie or Custom State. On the sign-up page workflow, after creating the new user, check for the stored affiliate code. If found, search for the Affiliate with that code and create a Referral record linking the affiliate to the new user. Increment the affiliate's referral_count.
Pro tip: Store the referral code in a browser cookie (via JavaScript) so it persists even if the user navigates away and returns days later to sign up.
Expected result: When a user signs up through an affiliate link, a Referral record is created linking them to the affiliate.
Calculate Commissions on Conversions
Calculate Commissions on Conversions
Define your commission structure: percentage of first purchase, flat fee per sign-up, or recurring percentage of subscription revenue. Create a backend workflow triggered when a payment succeeds (e.g., Stripe webhook). Check if the paying user has an associated Referral. If yes, calculate the commission (e.g., 20% of payment amount), update the Referral's commission_amount and set converted = yes, and add the commission to the affiliate's total_earnings and pending_payout.
Expected result: Commissions are automatically calculated and credited to affiliates when referred users make purchases.
Build the Affiliate Dashboard
Build the Affiliate Dashboard
Create a page 'affiliate-dashboard' showing: total referrals (Affiliate's referral_count), total earnings (total_earnings formatted as currency), pending payout (pending_payout), a Repeating Group of Referrals showing referred user's name (or anonymized), date, status, and commission amount. Add a 'Request Payout' button visible when pending_payout exceeds your minimum threshold (e.g., $50). The payout request workflow creates a PayoutRequest record for admin approval.
Expected result: Affiliates can view their referral performance, earnings, and request payouts from a dedicated dashboard.
Create Admin Management for the Affiliate Program
Create Admin Management for the Affiliate Program
Build an admin page showing all affiliates, their performance metrics, and pending payout requests. Add actions to approve/reject payouts, activate/deactivate affiliates, and adjust commission rates. When a payout is approved, mark the affiliate's Referrals as commission_paid = yes and reset pending_payout to 0. Send an email notification to the affiliate confirming the payout.
Expected result: Admins can manage the affiliate program, approve payouts, and monitor overall program performance.
Complete working example
1DATA TYPES:2- Affiliate: user, affiliate_code (unique), referral_count, total_earnings, pending_payout, status, commission_rate (number, default 0.20)3- Referral: affiliate, referred_user, referral_date, converted (yes/no), commission_amount, commission_paid (yes/no)4- PayoutRequest: affiliate, amount, status (pending/approved/paid/rejected), requested_date, processed_date56KEY WORKFLOWS:71. Page loaded with ?ref= parameter → Store affiliate code in cookie/state82. User signs up → Check stored affiliate code → Create Referral → Increment referral_count93. Payment succeeds (webhook) → Find referred user's Referral → Calculate commission → Update earnings104. Affiliate clicks Request Payout → Create PayoutRequest → Notify admin115. Admin approves payout → Mark referrals paid → Reset pending_payout → Notify affiliate1213COMMISSION CALCULATION:14- Per sign-up: flat $5 per referred user who creates account15- Per purchase: 20% of first purchase amount16- Recurring: 10% of subscription payments for 12 months1718AFFILIATE LINK FORMAT:19https://yourapp.com/?ref=ABC123XYZCommon mistakes when building an affiliate marketing system in Bubble
Why it's a problem: Not persisting the referral code across sessions
How to avoid: Store the affiliate code in a browser cookie with a 30-90 day expiration using a Run JavaScript action.
Why it's a problem: Allowing affiliates to refer themselves
How to avoid: Add a check in the sign-up workflow: only create a Referral if the new user's email differs from the affiliate's user email.
Why it's a problem: Not setting a minimum payout threshold
How to avoid: Set a minimum payout amount (e.g., $50) and only show the Request Payout button when pending_payout exceeds it.
Best practices
- Use browser cookies (30-90 day expiration) to persist referral tracking across sessions.
- Generate affiliate codes that are short, readable, and unique — combine username prefix with random characters.
- Calculate commissions in backend workflows for security — never let frontend logic determine commission amounts.
- Set clear commission terms and display them on the affiliate sign-up page.
- Add fraud detection: flag affiliates with unusually high conversion rates or suspicious referral patterns.
- Send email notifications at key moments: new referral, conversion, payout approved.
- Provide affiliates with marketing materials (banners, sample text) alongside their referral link.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building an affiliate marketing system in Bubble.io. I need unique referral links, cookie-based tracking, commission calculation on purchases (20% of first purchase), an affiliate dashboard, and admin payout management. How should I structure the data and workflows?
Create an affiliate system with Affiliate and Referral data types. Generate unique referral links per user. Track referrals on sign-up via URL parameters. Calculate 20% commission on purchases. Build an affiliate dashboard with earnings and payout requests.
Frequently asked questions
How do I prevent affiliate fraud?
Track IP addresses on sign-ups, flag accounts with the same IP as the affiliate, require email verification before crediting referrals, and set conversion windows (e.g., referral must convert within 90 days).
Can I offer different commission rates to different affiliates?
Yes. Add a commission_rate field on the Affiliate data type. Use this rate in commission calculations instead of a hardcoded percentage. This lets you offer higher rates to top performers.
How do I handle recurring commissions for subscriptions?
In your Stripe webhook handler for recurring payments, check if the paying user was referred. If yes, calculate the recurring commission and credit the affiliate. Add a commission_months field to track how long recurring commissions last.
Can I integrate with third-party affiliate software?
Yes. You can connect Bubble to platforms like Rewardful, PartnerStack, or FirstPromoter via the API Connector. These handle tracking, attribution, and payouts professionally.
How do I pay affiliates?
For manual payouts, use PayPal or bank transfer after admin approval. For automated payouts, integrate Stripe Connect for direct transfers. For complex affiliate programs, RapidDev can build automated payout systems.
Should I let anyone become an affiliate or require approval?
Requiring approval (application → admin review → activation) helps prevent fraud and ensures affiliates align with your brand. Add an application form and admin approval workflow.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation