Proxy the Embedded Dashboard Through Your Own Domain

Use this guide if you use the embedded dashboard. Set it up in addition to the pixel proxy, so both the tracking script and referral iframe load from your own domain.

The hosted iframe works without a proxy, but first-party delivery is the recommended production setup because it is less likely to be blocked.

What This Covers

This guide proxies:

• the iframe shell
• dashboard assets
• embed API calls that happen inside that same proxied route

It does not proxy the tracking pixel. That is covered separately in Proxy Pixel Tracking Through Your Own Domain.

Route Map

Proxy this customer-domain path to the Affonso hosted endpoint:

Notes:

• keep the /embed/... suffix exactly as shown
• only the prefix is configurable
• you do not need global /_next/* rewrites or root-level proxy rules

Quick Setup: Cloudflare Worker

Use this if your domain is on Cloudflare. It is the recommended and shortest setup.

1. Create a Worker and add this code

export default {
  async fetch(request) {
    const url = new URL(request.url);

    if (url.pathname.startsWith('/r/embed/')) {
      const upstream = new URL(
        `https://affonso.io${url.pathname.replace('/r', '')}${url.search}`
      );
      return fetch(new Request(upstream.toString(), request));
    }

    return fetch(request);
  },
};

2. Add the Worker route

In Workers & Pages → your Worker → Settings → Triggers, add:

customer.com/r/embed/*

Replace customer.com with your domain, then deploy the Worker.

3. Update the iframe URL

Load the iframe from your domain:

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

Your server still creates the embed token for the current user. Proxy setup does not change token creation, authentication, or token lifetime.

4. Verify it works

1. Open the page that contains your iframe.
2. Confirm the iframe URL starts with your domain.
3. In DevTools, confirm its requests stay under /r/embed/....
4. Confirm the dashboard loads and shows the signed-in user's referral data.

Other Proxy Setups

All examples use /r. Keep the /embed/... suffix unchanged. You can use another prefix if /r conflicts with your application.

Vercel rewrites

If your site runs on Vercel, add this rewrite:

{
  "rewrites": [
    {
      "source": "/r/embed/:path*",
      "destination": "https://affonso.io/embed/:path*"
    }
  ]
}

NGINX

If you use NGINX, add this location:

location /r/embed/ {
  proxy_pass https://affonso.io/embed/;
  proxy_http_version 1.1;
  proxy_set_header Host affonso.io;
  proxy_set_header X-Forwarded-Host $host;
  proxy_set_header X-Forwarded-Proto $scheme;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

Troubleshooting

The iframe is blank or blocked

• Confirm the iframe src now points to your own domain
• Confirm you are proxying /r/embed/:path*
• Inspect DevTools for CSP, blocker, or proxy errors

The wrong user data appears

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

The iframe loads, but parts of the UI fail

• Confirm the entire /r/embed/:path* route is proxied, not only one HTML page
• Make sure query strings and headers are forwarded unchanged

Next Steps

• Proxy Setup Guide
• Embedded Referral Dashboard