Affiliate Widget — Refgrow Docs

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 supports 20+ languages out of the box. It loads translations from /locales.json and auto-detects the user's language from their browser settings.

Supported languages include:

English, Spanish, French, German, Portuguese, Italian
Dutch, Swedish, Norwegian, Danish, Finnish
Polish, Czech, Romanian, Hungarian
Russian, Ukrainian, Turkish
Japanese, Korean, Chinese (Simplified)
Arabic, Hebrew

Override the auto-detected language with data-lang="fr" 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}
    />
  );
}

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