# Put your referral program inside your app Drop in Tolt's referral widget, or build your own in your design on our API. Every signed-in user gets their referral link and watches their earnings climb, right inside your product. By Andrej, Product engineer at Tolt · Published 2026-11-13 · In Tolt news, on the Tolt Blog Source: https://tolt.com/blog/referral-widgets-in-your-app ## The short version - Give every signed-in user a referral link, live stats and earnings, right inside your app. - Drop in the ready-made widget and theme it to your brand, or build your own on the API. - Building your own takes no database changes: Tolt looks each user up by your own user ID. 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. *[A product scene in the page: A referral program that lives in your app, a click away from everything else.]* Today you get two ways to put one there: drop in ours, or build your own. ## Drop it in One React component, ``, 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. ## Or 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](https://docs.tolt.com/guides/custom-referral-page) builds a complete page step by step, in about 50 lines of TypeScript. | At a glance | Drop it in | Build your own | | --- | --- | --- | | The design | Ours, themed to your brand | Yours, pixel for pixel | | What you write | A token endpoint and one component | Your widget and a few API calls | | New users | Enrolled on their first visit | Enrolled when they claim their link | | Best for | A ready-made dashboard | A page that's unmistakably yours | ## Widget 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. ## Under 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. **Available on:** Every plan - [Drop in the widget](https://docs.tolt.com/guides/refer-a-friend) - [Build your own widget](https://docs.tolt.com/guides/custom-referral-page) - [Widget reference](https://docs.tolt.com/sdks/embed) ## Questions ### Do I need React? No. The widget is an iframe underneath: point it at the dashboard URL with the token and it works in any frontend. ### Will it match my app? Yes. Pick light, dark or system, then set your brand color, fonts, corner radius and surface, text and border colors. ### Do I need to change my database? No. Tolt stores your user ID, so you look each user up by your own ID. ### How do people get paid? They add payout details and tax forms in your affiliate portal, linked from the widget, and get paid like every affiliate in your program. ### Which plans have it? Every plan.