Quick Start Guide

Get started with DaisyChain by creating your first referral program. We'll walk you through the basics of setting up and implementing a referral system.

Prerequisites: Make sure you have completed the installation steps before proceeding.

1. Create a Referral Program

Let's create a simple referral program where users can earn rewards for referring friends:

import { daisychain } from '@/lib/daisychain';

// Create a new referral program
const program = await daisychain.programs.create({
  name: "Friend Referral Program",
  type: "referral",
  rewards: {
    referrer: {
      type: "fixed",
      amount: 1000, // $10.00
      currency: "usd"
    },
    referee: {
      type: "percentage",
      amount: 20, // 20% off first purchase
      currency: "usd"
    }
  }
});

2. Add the Referral Button

Add a referral button to your application using our pre-built components:

import { ReferralButton } from '@daisychain/react';

export default function SharePage() {
  return (
    <div>
      <h1>Refer a Friend</h1>
      <ReferralButton
        programId={program.id}
        onSuccess={(referral) => {
          console.log('Referral created:', referral);
        }}
      />
    </div>
  );
}

3. Track Conversions

When a referred user makes a purchase, track the conversion:

// After successful purchase
await daisychain.conversions.create({
  programId: program.id,
  referralId: referral.id,
  amount: order.total,
  currency: "usd",
  metadata: {
    orderId: order.id
  }
});

4. Display Rewards

Show users their earned rewards using the Rewards component:

import { RewardsList } from '@daisychain/react';

export default function RewardsPage() {
  return (
    <div>
      <h1>Your Rewards</h1>
      <RewardsList
        onRewardClick={(reward) => {
          console.log('Reward clicked:', reward);
        }}
      />
    </div>
  );
}

Customization Options

DaisyChain components can be customized to match your brand:

<ReferralButton
  programId={program.id}
  className="my-custom-button-class"
  theme={{
    colors: {
      primary: '#FF0000',
      secondary: '#00FF00'
    },
    borderRadius: '8px'
  }}
  text={{
    button: 'Share with Friends',
    success: 'Invitation Sent!'
  }}
/>

Next Steps

Example Applications

Check out our example applications to see DaisyChain in action: