Installation Guide
Set up Refgrow in minutes with these simple steps.
Overview
Setting up Refgrow involves two essential components:
- Tracking Script — Placed on your website to detect referrals and track conversions
- Affiliate Dashboard — Where your affiliates manage their links and see their earnings
Step 1: Add the Tracking Script
The tracking script handles referral detection, cookie management, and conversion tracking. Add it to all pages of your website:
<script
src="https://scripts.refgrowcdn.com/latest.js"
data-project-id="YOUR_PROJECT_ID">
</script>YOUR_PROJECT_ID with your actual project ID from your Refgrow dashboard.What the Tracking Script Does
- Detects when users arrive via referral links (
?ref=CODE) - Stores the referral code in a cookie with your configured lifetime
- Enables manual conversion tracking via the
Refgrow()function - Provides helper methods for Stripe Payment Links
Placement
For optimal performance, place the script in the <head> section of your HTML, before other scripts that might access the Refgrow() function.
https://scripts.refgrowcdn.com to your script-src directive. See the Tracking guide for detailed CSP configuration instructions.Step 2: Choose Your Conversion Tracking Method
Stripe Webhooks (Recommended)
Automatically track payments processed through Stripe:
- Go to your project's "Integration" tab
- Select "Stripe Webhooks" as your tracking method
- Enter your Stripe Secret Key (a restricted key is recommended)
- Click "Connect Stripe"
Refgrow will automatically set up the required webhook in your Stripe account.
LemonSqueezy Webhooks
Track purchases made through LemonSqueezy:
- Go to your project's "Integration" tab
- Select "LemonSqueezy Webhooks" as your tracking method
- Enter your LemonSqueezy API Key
- In your LemonSqueezy dashboard, create a webhook pointing to:
https://refgrow.com/webhook/lemonsqueezy/YOUR_PROJECT_ID - Select the events:
order_createdandsubscription_created
Manual Tracking
Track conversions by calling the Refgrow() function in your code:
// Track a signup (no monetary value)
Refgrow(0, 'signup', 'user@example.com');
// Track a purchase (with monetary value)
Refgrow(49.99, 'purchase', 'user@example.com');Parameters:
value— Monetary value (use 0 for non-monetary events)type— Event type ('signup', 'purchase', or custom)email— User's email (crucial for attribution)
Place this code on thank you pages, after successful registrations, or whenever a conversion occurs.
Step 3: Add the Affiliate Dashboard
The affiliate dashboard is where users can sign up as affiliates, get their referral links, and track their earnings.
Option 1: For Websites with User Authentication
If users are already logged into your site, pass their email to pre-authenticate them:
<div id="refgrow"
data-project-id="YOUR_PROJECT_ID"
data-project-email="user@example.com"
data-lang="en"> <!-- Optional: Specify language code -->
</div>
<script src="https://scripts.refgrowcdn.com/page.js" async defer></script>Notes:
- Replace
YOUR_PROJECT_IDwith your actual project ID - Replace
user@example.comwith your server-side code that outputs the current user's email - The
data-langattribute is optional. If omitted, the language set in your project settings (or English by default) will be used. Supported codes include: en, ro, ua, de, es, fr, it, pt. - The user will be automatically logged in to the affiliate dashboard
Option 2: Without User Authentication
For standalone affiliate pages or sites without authentication:
<div id="refgrow"
data-project-id="YOUR_PROJECT_ID"
data-lang="en"> <!-- Optional: Specify language code -->
</div>
<script src="https://scripts.refgrowcdn.com/page.js" async defer></script>Users will need to enter their email and verify it to access their affiliate dashboard.
Customizing the Dashboard
You can customize the appearance and content of the dashboard in your Refgrow project's "Design" tab, including:
- Colors and fonts to match your brand
- Custom titles and descriptions
- Which stats to display
- Payout information
https://refgrow.com or https://*.refgrow.com to your script-src and connect-src directives.Step 4: Configure Commission Settings
Set up your commission structure in your Refgrow project settings:
- Go to your project's "Settings" tab
- Configure your default commission rate (percentage or fixed amount)
- Set the commission duration (lifetime, first purchase, or limited period)
Advanced Commission Options
Refgrow offers advanced commission options:
- Product-specific commissions — Set different rates for specific products
- Affiliate-specific overrides — Create custom rates for individual affiliates
Testing Your Installation
Complete Test Flow
- Sign up as a test affiliate
- Generate your referral link
- Open the link in a new private/incognito browser window
- Verify the cookie is set (check your browser's developer tools)
- Make a test purchase or trigger a conversion
- Verify the conversion appears in your Refgrow dashboard
Debugging Tools
The tracking script logs helpful information to the browser console. Open your browser's developer tools (F12) to see:
- Referral code detection
- Cookie setting confirmation
- Conversion tracking events
Troubleshooting
Referrals Not Being Tracked
- Verify the tracking script is on all pages with the correct project ID
- Check your browser console for any error messages
- Ensure third-party cookies are not blocked by the browser
- Test with a known referral link format (e.g.,
?ref=CODE) - Verify the referral parameter name matches your project settings
Conversions Not Attributing to Affiliates
For Stripe/LemonSqueezy:
- Ensure webhooks are properly configured
- Verify you are passing the referral code to the payment provider
- Check webhook logs in your payment provider dashboard
For Manual Tracking:
- Ensure you are providing a valid email address to the
Refgrow()function - Verify the cookie exists when making the call
- Check your browser console for any API errors
Affiliate Dashboard Issues
- Verify the page.js script is loading properly
- Check that the project ID is correct
- Ensure there are no JavaScript errors on your page
- Test the dashboard on a clean page without other scripts
- Verify that your domain is properly configured in your project settings
Framework-Specific Guides
React / Next.js
// components/RefgrowTracking.tsx
"use client";
import Script from "next/script";
export function RefgrowTracking({ projectId }: { projectId: string }) {
return (
<Script
src="https://scripts.refgrowcdn.com/latest.js"
data-project-id={projectId}
strategy="afterInteractive"
/>
);
}Vue / Nuxt
// nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
script: [
{
src: 'https://scripts.refgrowcdn.com/latest.js',
'data-project-id': 'YOUR_PROJECT_ID',
defer: true
}
]
}
}
})Next Steps
- Stripe Integration — learn advanced options for integrating with Stripe
- Tracking Script — advanced tracking options and configuration
- Widget Customization — personalize the affiliate dashboard to match your brand
- API Reference — manage affiliates and conversions programmatically