Proxy the Embedded Dashboard Through Your Own Domain

Use this guide when you want the Affonso referral iframe to load from your own domain instead of directly from affonso.io.

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

Setup

You need:

• a domain you control
• a reverse proxy, rewrite layer, or edge function
• one reserved path prefix such as /r
• a server-side endpoint that creates embed tokens for the current user

All examples below use /r.

Step 1: Add the Proxy Route

Option 1: Vercel rewrites

If your site runs on Vercel, add this rewrite:

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

Option 2: Cloudflare Worker

If you use Cloudflare, attach a Worker to a route such as:

customer.com/r/embed/*

The important part is that the Worker forwards the original request method, headers, body, and query string unchanged:

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);
  },
};

Option 3: 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;
}

Step 2: Update the Iframe URL

Load the iframe from your domain instead of the hosted URL:

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

The embed token still needs to be created on your server. Proxy setup does not change token creation, auth rules, or token lifetime.

Verify

After you deploy the proxy:

1. Open the page that contains your iframe.
2. Confirm the iframe URL starts with your own domain.
3. In DevTools, confirm requests stay under /r/embed/....
4. Confirm the dashboard loads without CSP, blocker, or network errors.
5. Confirm the signed-in user sees their own referral data.

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