Embedded Referral Dashboard

Use the embedded dashboard when you want users to manage referrals inside your app instead of sending them to a separate portal.

It gives each user a referral link, performance stats, and reward details in a single view.

When to Use It

Choose the embedded dashboard if:

• referrals should happen inside your product
• users already have accounts in your app
• you want a lightweight referral experience without a separate affiliate login

Use the standard affiliate portal instead if you need a dedicated affiliate workspace, a separate onboarding flow, or broader partner management features.

What You Need

Before you embed it, make sure you have:

• an Affonso program configured
• a signed-in user in your app
• a server-side endpoint that creates embed tokens for that user

Never create embed tokens in frontend code and never expose your Affonso API key in the browser.

Step 1: Preview and Customize the Dashboard

In Affonso:

1. Open Affiliate Program → Appearance
2. Switch to the Embed tab
3. Adjust theme, language, and background
4. Copy the generated integration code as your starting point

Step 2: Create the Embed Token on Your Server

Your backend should create an embed token for the current signed-in user and return it to your frontend.

Treat the token like any other authenticated app resource:

• create it on the server
• scope it to the current user
• send it to the frontend only when you are ready to render the iframe

For the endpoint details, see the create embed token API reference.

Step 3: Render the Hosted Iframe

For the standard hosted setup, render the iframe like this:

<iframe
  src="https://affonso.io/embed/referrals?token=YOUR_EMBED_TOKEN&theme=light&lang=en"
  style="width: 100%; height: 600px; border: none;"
  allow="clipboard-write"
></iframe>

Replace YOUR_EMBED_TOKEN with the token your server generated for the current user.

Step 4: Switch to First-Party Mode If Blockers Interfere

For more reliable iframe delivery when ad blockers or privacy tools are present, proxy the embed route through your own domain.

Example using the prefix /r:

<iframe
  src="https://customer.com/r/embed/referrals?token=YOUR_EMBED_TOKEN&theme=light&lang=en"
  style="width: 100%; height: 600px; border: none;"
  allow="clipboard-write"
></iframe>

That setup is covered in Proxy Pixel and Embed Through Your Own Domain.

What Your Users See

The embedded dashboard can show:

• their personal referral link
• performance stats such as clicks, signups, and sales
• rewards or earnings based on your program configuration

Verify the Integration

1. Sign in as a real or test user in your app
2. Load the page that contains the iframe
3. Confirm the iframe renders without console or network errors
4. Confirm the user sees their own referral data, not another user's
5. If you use first-party mode, confirm the iframe URL starts with your domain

Troubleshooting

The iframe is blank or blocked

• Check the iframe src
• Verify the token is valid and generated on the server
• Inspect browser DevTools for CSP, blocker, or proxy errors
• If blockers affect the hosted URL, switch to the first-party proxy setup

The wrong user data appears

• Confirm you create the embed token for the currently signed-in user
• Make sure cached tokens are not reused across users

Next Steps

• Proxy Pixel and Embed Through Your Own Domain
• How Affiliate Tracking Works
• Full embedded dashboard API guide