Affiliate Widget

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:

<div id="refgrow" data-program-id="YOUR_PROGRAM_ID" data-program-email="user@example.com"></div>
<script src="https://refgrow.com/js/page.js"></script>

Parameters:

data-program-id: Your unique program ID (replace YOUR_PROGRAM_ID with your actual program ID)
data-program-email: The email of the currently logged-in user (replace dynamically when rendering your page)

Option 2: Without User Authentication

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

<div id="refgrow" data-program-id="YOUR_PROGRAM_ID"></div>
<script src="https://refgrow.com/js/page.js"></script>

Parameters:

data-program-id: Your unique program ID (replace YOUR_PROGRAM_ID with your actual program ID)

Note: This option will use the referral page's built-in authentication system.

Widget Customization

You can customize the appearance of the affiliate dashboard with these optional parameters:

Parameter	Description	Default
`data-show-title`	Show/hide the widget title	true
`data-show-description`	Show/hide the program description	true
`data-show-daily-stats`	Show/hide daily statistics	true
`data-hide-branding`	Hide Refgrow branding (requires paid plan)	false

Example with All Options

<div id="refgrow" 
    data-program-id="YOUR_PROGRAM_ID"
    data-program-email="user@example.com"
    data-show-title="true"
    data-show-description="true"
    data-show-daily-stats="true"
    data-hide-branding="false">
</div>
<script src="https://refgrow.com/js/page.js"></script>

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.

Integration Examples

Basic Page Example

<!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 Here -->
        <div id="refgrow" data-program-id="YOUR_PROGRAM_ID"></div>
        <script src="https://refgrow.com/js/page.js"></script>
    </main>
    
    <footer>
        <p>© 2024 My Company</p>
    </footer>
    
    <!-- Tracking Script for all pages -->
    <script src="https://refgrow.com/js/tracking.js"></script>
</body>
</html>

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

<!-- 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-program-id="<%= process.env.REFGROW_PROGRAM_ID %>"
                data-program-email="<%= user.email %>">
            </div>
        <% } else { %>
            <!-- Non-authenticated user -->
            <div id="refgrow" 
                data-program-id="<%= process.env.REFGROW_PROGRAM_ID %>">
            </div>
        <% } %>
        
        <script src="https://refgrow.com/js/page.js"></script>
    </main>

    <!-- Include tracking script on all pages -->
    <script src="https://refgrow.com/js/tracking.js"></script>
</body>
</html>

Important Notes

Place the widget code where you want the affiliate program to appear on your website.
For Option 1, ensure you dynamically set the user's email when rendering your page.
For Option 2, 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 of the affiliate program in your program settings.
Make sure the tracking.js script is included on all pages where you want to track referral clicks.

Troubleshooting

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

If using your own authentication, verify that the data-program-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

Next Steps

Set Up Tracking

Learn how to track conversions and attribute sales to affiliates.

View Guide

Configure Payments

Set up payment methods and commission structures.

Learn More

Program Settings

Learn how to configure your affiliate program.