How to Embed an Affiliate Dashboard in Your SaaS App

Most affiliate platforms give your affiliates a separate portal to log into. A different URL, a different login, a different interface. Your affiliate has to remember another set of credentials, navigate an unfamiliar dashboard, and switch between your app and the affiliate portal whenever they want to check their stats or grab a link.

This friction matters more than you think. Every extra step reduces engagement. Affiliates who have to log into a separate portal check it less frequently, share links less often, and churn out of your program faster. The data backs this up: embedded affiliate experiences consistently outperform external portals on every metric that matters — affiliate activation rate, link sharing frequency, and time-to-first-referral.

This article explains why an embedded affiliate dashboard is a better approach, how to implement one using Refgrow's embeddable widget, and how to customize it to match your product's design.

External Portal vs. Embedded Dashboard

Let's be specific about what these two approaches look like from the affiliate's perspective.

The External Portal Experience

1. Affiliate signs up for your affiliate program on a separate website.
2. They receive credentials for the affiliate portal (separate from your product).
3. To check stats or get links, they navigate to a different URL and log in.
4. The portal has its own design, navigation, and UX — completely disconnected from your product.
5. They copy their referral link, go back to where they were (social media, their blog, etc.), and paste it.

This is how most affiliate platforms work — PartnerStack, FirstPromoter, Rewardful, and others all use this model. The affiliate portal is a standalone web application.

The Embedded Dashboard Experience

1. Affiliate logs into your product (where they're already a user).
2. They see an "Affiliates" or "Referrals" tab in your product's navigation.
3. Clicking it shows their affiliate dashboard — right inside your app, with your branding, in the context they already know.
4. They grab their link, check their stats, view payouts — all without leaving your product.

Why Embedded is Better: The Numbers

The argument for embedded dashboards comes down to psychology and product design principles that are well-established in SaaS.

1. Reduced Friction Increases Engagement

Every additional step in a workflow loses users. This is the fundamental principle behind single sign-on, inline editing, and in-app notifications. Your affiliate dashboard is no different.

When the dashboard is inside your app, affiliates encounter it naturally during their regular product usage. They log in to use your product, see their affiliate tab, and think "Oh, let me check how my referrals are doing." This ambient visibility drives check-ins that would never happen if they had to actively decide to visit a separate portal.

2. No Separate Credentials

Password fatigue is real. The average person manages over 100 passwords. Adding another login for an affiliate portal creates immediate friction. Some affiliates won't bother completing the signup. Others will forget their credentials and never return.

With an embedded dashboard, authentication is handled by your existing product login. If the user is logged into your app, they have access to the affiliate dashboard. Zero additional credentials.

3. Brand Consistency

External portals have their own branding. Even with white-labeling, there are always tells — different typography, different component styles, different loading behaviors. This inconsistency undermines the professional feel of your product.

An embedded widget inherits your product's context. It sits inside your layout, under your navigation, surrounded by your design. It feels native rather than bolted on.

4. Higher Activation Rates

Activation — the percentage of registered affiliates who actually share their first link — is the most important metric for a new affiliate program. External portals typically see 20-40% activation rates. The reason is simple: people sign up, intend to promote later, and never log in again.

Embedded dashboards push activation higher because the affiliate encounters their link and stats during regular product use. The "I'll do it later" moment is replaced by "I'm already here, let me grab my link."

5. Organic Program Discovery

Perhaps the most powerful benefit: when the affiliate dashboard is a tab in your product, every user sees it. Customers who didn't know you had an affiliate program discover it organically. You don't need to send an email blast or add a pop-up — the program promotes itself through its presence in the navigation.

This turns your entire user base into a passive recruitment channel for your affiliate program.

How to Implement an Embedded Dashboard with Refgrow

Refgrow's embed widget is a lightweight JavaScript snippet that renders a full affiliate dashboard inside any web application. Here's how to set it up.

Step 1: Get Your Embed Code

In your Refgrow dashboard:

1. Navigate to your project settings.
2. Go to the Widget / Embed section.
3. Copy the embed code snippet. It looks like this:

<div id="refgrow-widget"></div>
<script
  src="https://refgrow.com/embed.js"
  data-project="your-project-id"
  data-email="{USER_EMAIL}"
  defer
></script>

The two key attributes:

• data-project — your Refgrow project ID. This is set automatically when you copy the snippet.
• data-email — the current user's email address. You'll replace this dynamically with the logged-in user's email from your application.

Step 2: Add the Widget to Your Application

Place the embed code in your application where you want the affiliate dashboard to appear. The exact implementation depends on your tech stack.

For a React / Next.js Application

// components/AffiliateDashboard.tsx
import { useEffect } from 'react';
import { useUser } from '@/hooks/useUser'; // Your auth hook

export function AffiliateDashboard() {
  const { user } = useUser();

  useEffect(() => {
    if (!user?.email) return;

    // Remove existing script if re-rendering
    const existingScript = document.querySelector(
      'script[src*="refgrow.com/embed.js"]'
    );
    if (existingScript) existingScript.remove();

    const script = document.createElement('script');
    script.src = 'https://refgrow.com/embed.js';
    script.defer = true;
    script.setAttribute('data-project', 'your-project-id');
    script.setAttribute('data-email', user.email);
    document.body.appendChild(script);

    return () => {
      script.remove();
    };
  }, [user?.email]);

  return <div id="refgrow-widget" />;
}

For a Vue Application

<!-- components/AffiliateDashboard.vue -->
<template>
  <div id="refgrow-widget"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';
import { useAuth } from '@/composables/useAuth';

const { user } = useAuth();
let scriptEl = null;

onMounted(() => {
  if (!user.value?.email) return;

  scriptEl = document.createElement('script');
  scriptEl.src = 'https://refgrow.com/embed.js';
  scriptEl.defer = true;
  scriptEl.setAttribute('data-project', 'your-project-id');
  scriptEl.setAttribute('data-email', user.value.email);
  document.body.appendChild(scriptEl);
});

onUnmounted(() => {
  if (scriptEl) scriptEl.remove();
});
</script>

For Server-Rendered HTML (EJS, Handlebars, Django, Rails, etc.)

<div id="refgrow-widget"></div>
<script
  src="https://refgrow.com/embed.js"
  data-project="your-project-id"
  data-email="<%= user.email %>"
  defer
></script>

Replace the template syntax with whatever your server-side framework uses. The point is the same: dynamically inject the authenticated user's email so the widget knows which affiliate to display (or offers to register a new one).

Step 3: Customize Widget Blocks

The Refgrow widget is modular. It's built from blocks that you can show, hide, and reorder based on what makes sense for your program. Available blocks include:

Block	What It Shows	When to Use
Stats Overview	Clicks, referrals, conversions, earnings	Always — this is the core dashboard
Referral Link	Affiliate's unique referral URL with copy button	Always — the primary tool affiliates need
Coupon Code	Affiliate's assigned coupon/promo code	If you use coupon-based attribution
Referrals List	Table of referred users and their status	Builds trust by showing transparent tracking
Payouts	Payout history and pending balance	When you process payouts (PayPal/Wise)
Leaderboard	Top affiliates ranked by performance	Programs with 10+ affiliates — adds competition
Resources	Marketing materials, banners, email templates	If you provide promotional assets
Commission Tiers	Multi-tier commission structure visualization	If you use tiered commissions

To configure blocks, go to your project settings in Refgrow and navigate to Widget Configuration. You can drag blocks to reorder them, toggle visibility, and configure individual block settings.

Recommended Block Configuration for New Programs

If you're just starting, keep it simple. Enable these blocks in this order:

1. Stats Overview — first thing affiliates see
2. Referral Link — the primary action item
3. Coupon Code — if applicable
4. Referrals List — transparency builds trust
5. Payouts — shows that money is real

Add the leaderboard and resources blocks once your program has enough affiliates and content to make them valuable. An empty leaderboard with one entry or a resources block with no materials does more harm than good.

Step 4: Style the Widget to Match Your Brand

The embed widget is designed to adapt to its container. It uses neutral styling by default that works in most contexts. But for a truly native feel, you can customize its appearance.

CSS Custom Properties

The widget exposes CSS custom properties (variables) that you can override in your application's stylesheet:

#refgrow-widget {
  --rg-primary-color: #4f46e5;      /* Primary accent color */
  --rg-primary-hover: #4338ca;      /* Primary color on hover */
  --rg-text-color: #1f2937;         /* Main text color */
  --rg-text-secondary: #6b7280;     /* Secondary/muted text */
  --rg-background: #ffffff;         /* Widget background */
  --rg-surface: #f9fafb;            /* Card/surface background */
  --rg-border: #e5e7eb;             /* Border color */
  --rg-border-radius: 8px;          /* Border radius for cards */
  --rg-font-family: inherit;        /* Inherits from parent */
}

By setting --rg-font-family: inherit (the default), the widget automatically uses whatever font your application uses. If your app uses Inter, the widget uses Inter. If your app uses system fonts, so does the widget.

Dark Mode Support

If your application supports dark mode, override the widget variables within your dark mode context:

@media (prefers-color-scheme: dark) {
  #refgrow-widget {
    --rg-text-color: #f9fafb;
    --rg-text-secondary: #9ca3af;
    --rg-background: #111827;
    --rg-surface: #1f2937;
    --rg-border: #374151;
  }
}

/* Or with a class-based dark mode toggle: */
.dark #refgrow-widget {
  --rg-text-color: #f9fafb;
  --rg-text-secondary: #9ca3af;
  --rg-background: #111827;
  --rg-surface: #1f2937;
  --rg-border: #374151;
}

Container Width

The widget is responsive and fills the width of its container. Place the #refgrow-widget div inside whatever layout container you use for your main content area. If your app content area is 800px wide, the widget will be 800px wide. If it's in a full-width layout, the widget adapts accordingly.

For best results, give the widget at least 400px of width. Below that, the stats cards will stack vertically (which still works, but takes more vertical space).

Step 5: Localization

Refgrow's widget supports 20+ languages out of the box. The widget automatically detects the user's browser language and displays text in the appropriate language. Supported languages include English, Spanish, French, German, Portuguese, Japanese, Chinese, Korean, and many more.

You can also force a specific language using the data-lang attribute:

<script
  src="https://refgrow.com/embed.js"
  data-project="your-project-id"
  data-email="{USER_EMAIL}"
  data-lang="es"
  defer
></script>

This is useful if your application has its own language switcher and you want the widget language to match. Pass the user's selected language to the data-lang attribute dynamically.

How Competitors Handle This (And Why It Falls Short)

Let's look at how other affiliate platforms approach the dashboard problem.

External Portal Only

Most affiliate platforms — including PartnerStack, Impact, and ShareASale — provide only an external portal. Affiliates get a separate URL and separate credentials. Some offer white-labeling (custom domain, logo), but it's still a separate application. The affiliate leaves your product to manage their affiliate activity.

This works for large affiliate networks where affiliates manage dozens of programs in one place. But for a SaaS company running its own program, it creates unnecessary separation between your product and your affiliate channel.

API-Only (Build It Yourself)

Some platforms like Rewardful offer APIs to build your own affiliate dashboard. This gives you maximum flexibility, but it also means you're building and maintaining a custom dashboard — stats display, link management, payout history, all of it. For most teams, this is weeks of development work that doesn't move your core product forward.

Refgrow's Approach: Ready-Made Embed

Refgrow's widget sits in the middle: it's a ready-made, full-featured dashboard that drops into your app with a single script tag. You get the native feel of a custom build without the development cost. And because it's modular (blocks you can configure), you can tailor it to your specific program without writing code.

Real-World Implementation Patterns

Here are three common ways SaaS companies integrate the embedded dashboard.

Pattern 1: Dedicated Tab in Navigation

Add an "Affiliates" or "Referrals" tab to your main product navigation. When the user clicks it, they see the Refgrow widget as the page content. This is the simplest and most common pattern.

Best for: Products with a sidebar or top navigation that can accommodate an additional item.

Pattern 2: Settings Subsection

Add the affiliate dashboard as a section within your settings or account page. This keeps it accessible but doesn't add to your main navigation, which matters if your navigation is already crowded.

Best for: Products where the affiliate program is secondary to the core product experience.

Pattern 3: "Earn Credits" or "Refer & Earn" Feature

Frame the affiliate program as a product feature rather than a separate program. "Refer a friend and earn credits" or "Share and earn" language makes it feel like a natural part of your product rather than a marketing initiative.

Best for: B2C SaaS or products where the audience may not be familiar with affiliate marketing terminology.

Measuring Embedded Dashboard Impact

After implementing the embedded dashboard, track these metrics to measure its impact:

• Affiliate activation rate: Percentage of registered affiliates who share at least one link. Compare before and after embedding.
• Dashboard visit frequency: How often affiliates check their stats. Higher frequency correlates with more active promotion.
• Time to first share: How long after registration does an affiliate share their first link? Embedded dashboards should reduce this significantly.
• Organic sign-up rate: How many users discover and join the affiliate program without direct outreach? This measures the "passive recruitment" benefit of embedding.
• Affiliate churn rate: Percentage of affiliates who stop promoting after 90 days. Embedded dashboards typically reduce churn by keeping the program visible.

Common Questions

Does the embed widget slow down my application?

The widget script is loaded with defer, which means it doesn't block your page rendering. The script itself is small (under 30KB gzipped) and loads asynchronously. Once loaded, it makes API calls to Refgrow to fetch the affiliate's data. These calls are lightweight and cached where possible. In practice, the widget adds negligible load time to your application.

What if the user isn't an affiliate yet?

The widget handles this automatically. If the user's email isn't registered as an affiliate, the widget displays an invitation to join the program. The user can sign up as an affiliate right there, inside the widget, without leaving your app. Once registered, the widget immediately shows their dashboard with their new referral link.

Can I show different blocks to different affiliates?

The block configuration applies to all affiliates in a project. However, certain blocks adapt based on context. For example, the leaderboard only shows data if there are enough affiliates, and the coupon block only appears if the affiliate has an assigned coupon code.

What about security?

The widget authenticates using the email address passed via data-email. Refgrow verifies that this email belongs to a registered affiliate in your project. Affiliates can only see their own data — there's no way to access another affiliate's stats through the widget. All data transfers are encrypted over HTTPS.

---