Campaign Setup

Overview

Each project has a single Campaign configuration with two halves:

Configure these in the dashboard under Campaign Setup.

Referrer Experience

The Referrer Experience is what your existing users see when they open your app. It consists of a trigger button and a sharing modal or drawer.

Customize your trigger button, modal text, and view changes in real-time in the campaign preview panel.

Trigger Button

The trigger button is a floating element that opens the referral sharing UI when clicked. Configure its appearance and position.

Modal / Drawer

When the trigger button is clicked (or you call showReferralDashboard()), the SDK opens a sharing UI with the user's referral link, a copy button, and social sharing buttons.

Social sharing channels

The SDK includes built-in sharing buttons for:

Branding / Theme

Customize the look and feel to match your brand:

Controlling the UI via SDK

The SDK fetches the campaign configuration automatically when initAppUser() is called and renders the trigger button and modal based on your dashboard settings. You can also control it programmatically:

import { useGrowthRail } from '@growth-rail/react';

function MyComponent() {
  const {
    showReferralDashboard,
    showFloatingButton,
    hideFloatingButton,
  } = useGrowthRail();

  return (
    <>
      {/* Open the referral sharing modal on demand */}
      <button onClick={() => showReferralDashboard()}>
        Invite Friends
      </button>

      {/* Manually control the floating button */}
      <button onClick={() => showFloatingButton({ position: 'bottom-right' })}>
        Show Button
      </button>
      <button onClick={hideFloatingButton}>
        Hide Button
      </button>
    </>
  );
}

Override modal options at runtime

You can override campaign-level modal settings on a per-call basis:

showReferralDashboard({
  title: 'Share & Earn!',
  description: 'Invite friends to get 500 credits each.',
  componentType: 'drawer',
  theme: {
    primaryColor: '#6366f1',
    tintColor: '#000000',
    backgroundColor: '#ffffff',
  },
});

Inline referral dashboard (React)

For embedding the referral UI directly in your page layout instead of a modal:

import { ReferralDashboard } from '@growth-rail/react';

function ReferralsPage() {
  return (
    <div className="referral-section">
      <h2>Your Referrals</h2>
      <ReferralDashboard
        title="Invite Friends"
        onLinkCopied={() => toast('Link copied!')}
      />
    </div>
  );
}

New User Experience

When a referee (new user) lands on your site via a referral link, the SDK can automatically display a welcome banner to encourage signup.

Configure the text and layout options for the referee welcome banner.

Referral Redirect Link

The Campaign also stores your project's Referral Redirect Link — the base URL that Growth Rail appends referral codes to when generating shareable links.

# Generated referral link format:
https://yourapp.com/signup?referralCode=ABC123&rewardEventName=user_signup

# Set in the dashboard under Campaign -> Referral Redirect Link

This should point to your signup or landing page where the SDK is initialized, so it can automatically detect and process the referral.

Webhooks

When a reward is granted for a referral under this campaign, all enabled webhooks fire automatically. Configure them in the Growth Rail dashboard under Integrations → Reward Webhooks.