Design your referral pages
Two ways to build the pages your users see — theme Invitebase's hosted pages with no code, or go headless and build your own on the SDK and API.
This is the last step before code. You've set up your account and chosen your rewards; now decide how the pages your users see get built. Either way, Invitebase keeps handling links, clicks, attribution, and rewards underneath — this choice is only about who renders the UI.
Pick your path
There are two ways to build the referral experience, and it's the first thing to decide:
Use Invitebase's hosted pages
No code. We host and render the pages; you theme them to match your app in the dashboard, with a live preview. The fast path — live in minutes.
Go headless — build your own
Full control. Build custom pages on the SDK and API, on your own domain, framework, and components. You own the rendering.
You don't have to pick one for everything — many teams ship a custom offer page and keep the hosted status page, or vice versa. Start hosted; you can go headless later, one surface at a time.
Use Invitebase's hosted pages
If you use the hosted pages, there are three surfaces to design, and you theme all of them from one Appearance step in the Campaigns builder — no code, with a live preview beside each one as you edit:
One shared theme — logo, colors, and typography accents — flows across all three surfaces, so you set the brand once. Each surface then has its own copy on top of it. Defaults are already filled in from your app icon and campaign config (and from your Referral Gallery recipe if you started from one), so nothing is blank — you're editing to taste, not authoring from scratch. Budget about five minutes.
1. The offer page
The refr.link offer page is where a referral link opens — the first impression a referred friend gets of your app, and the single highest-leverage surface here. It shows who invited the visitor, what they get, and the invite code, then hands off to install or open your app. You edit the headline, the offer copy (drawn automatically from your reward configuration so it always matches the real reward), and the share text that rides along when a referrer shares their link.
Keep the invite code visible in plain text. The offer page always renders the code as copyable text, and that's load-bearing: manual entry is the universal attribution fallback when a deep link or deferred install doesn't carry the code through. Don't hide it behind a button-only flow. The mechanics behind the page live in Deep links & attribution.
2. The referrer status page
The status page is where a returning referrer tracks their own invites and rewards — how many friends signed up, how many validated, how far they are toward the next milestone, and what's ready to claim. Progress and tier values are rendered from live campaign data; your job is the copy and framing around them so the page reads in your voice. The "payout available" email deep-links referrers straight here to claim, so this page and the emails work as a pair.
3. Notification emails
Invitebase sends the emails that keep the loop alive — signup, validation, reward unlocked, payout available, milestone reached — and each one is a template you edit right alongside your pages: subject line and body copy per trigger, with the shared theme already applied and a live preview rendered against sample data. Each trigger can also be toggled off if you'd rather drive that message yourself from webhooks. The full trigger list, delivery guarantees, and push setup are covered in Notifications.
Appearance has its own draft/published state: every surface previews live as you edit, publishing is versioned and audit-logged, and any prior version restores in one click. Iterate freely — publish, watch how the offer page converts in Analytics, and adjust.
Where the in-app invite UI fits. The share button and invite screen inside your app aren't designed here — you build those in step 4, Integrate your app. They inherit this same theme, so the copy and colors you set now carry through automatically. This page covers the hosted pages Invitebase serves for you.
Go headless — build your own
The hosted pages are the fast path, not a requirement. If you want full control over design — your own layout, framework, components, and domain — replace either hosted page with one you build. Invitebase keeps handling links, clicks, attribution, and rewards underneath; only the rendering is yours.
- Custom offer page — serve your own page where referral links open, on your own domain. Resolve the inbound code with the Web SDK's
handleInbound, which records the click and persists the code for attribution, and render the offer — who invited the visitor, what they get — fromgetCampaignInfo. Keep the invite code visible in plain text: manual entry is the universal fallback. - Custom status page — build your own referrer-facing progress view, hosted on the web or inside your app, with
getReferrerProgressandgetReferralLink. Both return display-ready formatted values, so custom UI needs no math.
A custom offer page must preserve the attribution mechanics. The hosted page's CTA does load-bearing work: it writes the invite URL to the clipboard inside the tap gesture for iOS handoff, routes to the Play Store with the code in the referrer= parameter, and persists the code in first-party storage on web. Reproduce those behaviors — Deep Links & Attribution Setup documents each one — or referred installs will silently fall back to manual code entry.
Appearance theming still applies to whatever you don't replace — notification emails and any hosted page you keep.
What's next
Integrate your app
Step 4 — wire the SDK into your app and take a referral live in test mode.
Appearance in the Campaigns builder
Where you set the theme and edit copy, with a live preview per surface.
Notifications
Every email and push trigger, delivery guarantees, and push setup.
Deep links
How referral links open your app — the technical side of the offer page.
SDK reference
The read methods headless pages are built on — offer, progress, and links.
Choose your rewards
Decide what counts as successful, pick each side's reward, then set the mechanics and eligibility rules — all in the dashboard, before any code.
Integrate your app
Wire the SDK into your app and take a referral from signup to a validated test reward — the fourth step, and the first one that touches code.