Put your referral program inside your app

The best referral program is the one your users actually see.

So put it where they already are: a widget inside your app, next to the things they use every day, showing each of them their link, their referrals and what they've earned.

PraktikaHomeLessonsAI tutorsProgressRefer friendsSettings

Give 20%, get $20

Friends get 20% off Praktika. You get $20 in credit for each one who subscribes.

praktika.ai/?ref=miaCopyCopied

Your referrals

ACAlex ChenSigned upSubscribed+$20

SRSam RiveraSigned up

JPJo ParkInvited

Your credit$0.00$20.00

Today you get two ways to put one there: drop in ours, or build your own.

01Drop it in

One React component, <ToltEmbed />, and your users have a full referral dashboard:

• Their link, with a copy button.
• Their earnings: pending, approved and paid, with a sparkline that climbs as referrals pay.
• Their stats: clicks, signups, customers and conversion rate.
• Their latest referrals, as they come in.

It looks like it belongs in your app because you tell it how to look: light, dark or following the system, your brand color, your fonts, your corner radius, your surface and border colors. It sizes itself to fit wherever you put it. Not on React? It's a plain iframe too.

Wiring it up is one call on your server. Your backend trades your API key for a short-lived token scoped to that one user, and your API key never touches the browser. The first time a user opens the widget, Tolt enrolls them in your referral program with a link, so there's no signup step and nothing to sync.

02Or build your own

Some referral programs deserve to be fully on brand. Maybe it's a card in account settings. A "claim your link" step in onboarding. A banner right after someone upgrades. A little "you've earned $120" badge in the sidebar.

Build any of them on the API:

• Look users up by your own user ID. Tolt keeps your ID with each of them, so there's no new column, no migration and nothing from Tolt stored in your database.
• Let them claim their link. They type the slug they want, you create it. If it's taken, you know instantly.
• Show what they've earned. Pull their referrals and commissions and render them however you like.
• Send them to get paid. Payout details and tax forms live in your affiliate portal, one click away.

The guide builds a complete page step by step, in about 50 lines of TypeScript.

03Widget ideas to steal

• Claim your link. An onboarding step with yourapp.com/?ref= and an empty field. People love picking their own name.
• Invite and earn. A card in account settings with the link, a copy button and earnings so far.
• The happy moment. Right after someone upgrades, they love your product the most. Show them their link then.
• The earnings badge. A small "you've earned $120" in the sidebar that keeps the program top of mind.

04Under the hood

• Your user ID with every affiliate. It's unique within the program, enforced by the database, so your widget asks for "the affiliate for user 123" and gets exactly one back.
• Email changes don't break anything. The widget matches on your user ID before email, so a user who changes their email keeps their link and their earnings.
• Existing affiliates carry over. If a user is already in your program, the widget finds them by email on their next visit and links them to your user ID. No backfill.
• Two tabs, one affiliate. Open the page twice at the same moment and Tolt still enrolls or links them once.

Your users already like your product. Give them a reason to tell their friends, right where they already are.