Overview

The Refgrow affiliate widget provides a complete dashboard for your affiliates to track their referrals, access promotional materials, and manage their account. This guide will help you integrate the widget into your website.

Integration Options

Option 1: With User Authentication

If your website has user authentication, use this code and dynamically set the user's email:

html

<div id="refgrow"
    data-project-id="YOUR_PROGRAM_ID"
    data-project-email="user@example.com"
    data-lang="en">
</div>
<script src="https://scripts.refgrowcdn.com/page.js" async defer></script>

Parameters:

data-project-id: Your unique program ID (replace YOUR_PROGRAM_ID with your actual program ID).
data-project-email: The email of the currently logged-in user (replace dynamically when rendering your page).
data-lang: (Optional) Specify the language for the widget. If omitted, the project's default language or English will be used.

Option 2: Without User Authentication

If you do not have user authentication or want to use the referral page's built-in authentication, use this code:

html

<div id="refgrow"
    data-project-id="YOUR_PROGRAM_ID"
    data-lang="en">
</div>
<script src="https://scripts.refgrowcdn.com/page.js" async defer></script>

Parameters:

data-project-id: Your unique program ID.
data-lang: (Optional) Specify the language for the widget.

This option will use the referral page's built-in authentication system. Users will need to enter their email and verify it.

Data Attributes

Attribute	Required	Description
`data-project-id`	Yes	Your Refgrow project ID
`data-project-email`	Recommended	Current user's email for affiliate identification
`data-lang`	No	Language code (e.g., `en`, `de`, `fr`). Auto-detected by default.

Widget Appearance

You can customize the appearance of your affiliate dashboard in your program settings:

Primary Color: Sets the main color for buttons and highlights
Secondary Color: Used for secondary elements and accents
Font Color: Controls the text color throughout the dashboard
Title: Customize the headline text for your affiliate program
Description: Add a custom description explaining your program

These settings can be configured during the onboarding process or updated any time from your program settings.

Removing Branding

On paid plans (Starter and above), you can remove the "Powered by Refgrow" footer from the widget.

Widget Blocks

The widget is composed of configurable blocks. You can enable, disable, and reorder blocks from your Refgrow project settings under Widget Design. Features include drag-and-drop block reordering with visual handles, individual hide/show toggles for all widget sections, and real-time preview with instant updates.

Available Blocks

Header — program title and description
Share Links — referral URL with a copy button
Coupon Code — affiliate's assigned coupon code
Statistics — click count, referral count, and conversion metrics
Daily Stats — daily performance chart
Earnings — total and pending commission amounts
Payment Methods — payout configuration
Payment History — past payouts with status
Commission Levels — multilevel commission progress (paid plans)
Multi-Tier Commissions — sub-affiliate earnings (paid plans)
Promotional Materials — banners, text links, and social share templates

Block Configuration

Block configuration is stored in projects.widget_blocks_config as a JSON array. Each block has:

json

[
  { "id": "header", "enabled": true, "order": 1 },
  { "id": "share_links", "enabled": true, "order": 2 },
  { "id": "coupon_code", "enabled": true, "order": 3 },
  { "id": "stats", "enabled": true, "order": 4 },
  { "id": "daily_stats", "enabled": true, "order": 5 },
  { "id": "earnings", "enabled": true, "order": 6 },
  { "id": "payment_methods", "enabled": true, "order": 7 },
  { "id": "payment_history", "enabled": false, "order": 8 },
  { "id": "commission_levels", "enabled": false, "order": 9 },
  { "id": "multi_tier", "enabled": false, "order": 10 },
  { "id": "promotional_materials", "enabled": false, "order": 11 }
]

Integration Examples

Basic HTML Page

html

<!DOCTYPE html>
<html>
<head>
    <title>My Affiliate Program</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <header>
        <h1>My Website</h1>
        <nav>
            <a href="/">Home</a>
            <a href="/affiliate">Affiliate Program</a>
        </nav>
    </header>

    <main>
        <h2>Join Our Affiliate Program</h2>

        <!-- Refgrow Widget -->
        <div id="refgrow"
            data-project-id="YOUR_PROGRAM_ID"
            data-lang="en">
        </div>
        <script src="https://scripts.refgrowcdn.com/page.js" async defer></script>
    </main>

    <footer>
        <p>&copy; 2025 My Company</p>
    </footer>

    <!-- Tracking Script for all pages -->
    <script src="https://scripts.refgrowcdn.com/latest.js"
        data-project-id="YOUR_PROGRAM_ID"></script>
</body>
</html>

Server-Side Dynamic Example (Node.js + EJS)

html

<!-- affiliate-page.ejs -->
<!DOCTYPE html>
<html>
<head>
    <title>Affiliate Program - <%= siteName %></title>
</head>
<body>
    <main>
        <h1>Our Affiliate Program</h1>

        <% if (user) { %>
            <!-- Authenticated user -->
            <div id="refgrow"
                data-project-id="<%= process.env.REFGROW_PROGRAM_ID %>"
                data-project-email="<%= user.email %>"
                data-lang="en">
            </div>
        <% } else { %>
            <!-- Non-authenticated user -->
            <div id="refgrow"
                data-project-id="<%= process.env.REFGROW_PROGRAM_ID %>"
                data-lang="en">
            </div>
        <% } %>

        <script src="https://scripts.refgrowcdn.com/page.js" async defer></script>
    </main>

    <script src="https://scripts.refgrowcdn.com/latest.js"
        data-project-id="<%= process.env.REFGROW_PROGRAM_ID %>"></script>
</body>
</html>

Internationalization (i18n)

The widget and hosted affiliate portal support 9 languages out of the box. They load translations from /locales.json and use the project's default language. The widget also accepts adata-lang override.

Supported languages include:

English, Romanian, Russian, Ukrainian
German, Spanish, French, Italian, Portuguese

Override the project's default language for the widget with data-lang="ru" on the embed div.

Programmatic Control

The widget exposes a global Refgrow object for programmatic control:

javascript

// Identify a user after login
Refgrow.identify('user@example.com');

// Switch language
Refgrow.setLanguage('de');

// Listen for events
Refgrow.on('affiliate:signup', (data) => {
  console.log('New affiliate signed up:', data.email);
});

Single-Page App Integration

For SPAs (React, Vue, Angular), load the widget script once and mount the container:

javascript

// React example
import { useEffect, useRef } from 'react';

function AffiliateWidget({ projectId, userEmail }) {
  const containerRef = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://scripts.refgrowcdn.com/page.js';
    script.async = true;
    script.defer = true;
    containerRef.current?.appendChild(script);

    return () => {
      script.remove();
    };
  }, [projectId, userEmail]);

  return (
    <div
      id="refgrow"
      ref={containerRef}
      data-project-id={projectId}
      data-project-email={userEmail}
    />
  );
}

Resource gallery

Add promotional materials in Assets, then enable the Resources tab in Design. Affiliates see visible assets in a gallery with three columns in wide widgets, two at medium widths, and one in narrow widgets. The layout follows the widget width, so it also works inside a small container on a desktop page.

Images and banners fit inside the preview without cropping. Text snippets, email templates, and swipe copy show a text preview with a Copy action for the full content. PDF and video cards show their resource type and an Open action. Links and uploaded images also open in a new tab. The Design preview uses sample resources to demonstrate the same layout.

Choose the resource order

Open Assets and select Manual order.
Clear search, type filters, and tag filters to show the full library.
Drag an asset by its handle, or focus its Move earlier or Move later button and press Enter or Space. Each move saves automatically.

Hidden assets keep their positions in the library; affiliates only see visible assets in that order. New assets and bulk uploads are added after existing assets. Newest first and Oldest first change your library view without changing the order affiliates see.

If a move cannot be saved, the previous order is restored and an error appears. Retry the move. If someone added or removed an asset while you were arranging the library, use Reload assets, then retry.

Important Notes

Place the widget code where you want the affiliate program to appear on your website.
For Option 1 (with auth), ensure you dynamically set the user's email when rendering your page.
For Option 2 (without auth), users will need to authenticate through the referral page interface.
The affiliate program will automatically adapt to your website's styling.
You can customize the appearance in your program settings.
Make sure the tracking script is included on all pages where you want to track referral clicks.

Troubleshooting

Widget not displaying

Verify your program ID is correct
Check if the page.js script is properly loaded
Look for console errors in browser developer tools
Ensure your domain is allowed in program settings

Authentication issues

If using your own authentication, verify that the data-project-email attribute is set correctly
For built-in authentication, ensure users can access the login form
Check for any cross-origin issues if embedding on a different domain

Content Security Policy (CSP)

For the affiliate dashboard widget, add https://refgrow.com or https://*.refgrow.com to your script-src and connect-src directives. Also add https://scripts.refgrowcdn.com to script-src.

Next Steps

Set Up Tracking — learn how to track conversions and attribute sales to affiliates
Configure Payments — set up payment methods and commission structures
API Reference — build custom integrations

Affiliate Widget

Overview

Integration Options

Option 1: With User Authentication

Option 2: Without User Authentication

Data Attributes

Widget Appearance

Removing Branding

Widget Blocks

Available Blocks

Block Configuration

Integration Examples

Basic HTML Page

Server-Side Dynamic Example (Node.js + EJS)

Internationalization (i18n)

Programmatic Control

Single-Page App Integration

Resource gallery

Choose the resource order

Important Notes

Troubleshooting

Widget not displaying

Authentication issues

Content Security Policy (CSP)

Next Steps