# How to build an affiliate marketing system in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 25-30 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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.

### 6. 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 code example

File: `Workflow summary`

```text
DATA TYPES:
- Affiliate: user, affiliate_code (unique), referral_count, total_earnings, pending_payout, status, commission_rate (number, default 0.20)
- Referral: affiliate, referred_user, referral_date, converted (yes/no), commission_amount, commission_paid (yes/no)
- PayoutRequest: affiliate, amount, status (pending/approved/paid/rejected), requested_date, processed_date

KEY WORKFLOWS:
1. Page loaded with ?ref= parameter → Store affiliate code in cookie/state
2. User signs up → Check stored affiliate code → Create Referral → Increment referral_count
3. Payment succeeds (webhook) → Find referred user's Referral → Calculate commission → Update earnings
4. Affiliate clicks Request Payout → Create PayoutRequest → Notify admin
5. Admin approves payout → Mark referrals paid → Reset pending_payout → Notify affiliate

COMMISSION CALCULATION:
- Per sign-up: flat $5 per referred user who creates account
- Per purchase: 20% of first purchase amount
- Recurring: 10% of subscription payments for 12 months

AFFILIATE LINK FORMAT:
https://yourapp.com/?ref=ABC123XYZ
```

## Common mistakes

- **Not persisting the referral code across sessions** — If a user visits through an affiliate link but signs up days later, the referral is lost if only stored in a Custom State. Fix: Store the affiliate code in a browser cookie with a 30-90 day expiration using a Run JavaScript action.
- **Allowing affiliates to refer themselves** — Self-referrals are a common abuse vector that costs you commissions without real growth. Fix: 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.
- **Not setting a minimum payout threshold** — Processing many small payouts is administratively expensive. Fix: 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.

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/create-an-affiliate-marketing-system-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/create-an-affiliate-marketing-system-in-bubble