> ## Documentation Index
> Fetch the complete documentation index at: https://docs.codeqr.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Learn how to set up your referral/affiliate program with CodeQR Partners.

<Note>
  CodeQR Partners require a [Business plan](https://codeqr.io/pricing) subscription or
  higher.
</Note>

[CodeQR Partners](https://codeqr.io/help/article/codeqr-partners) lets you build powerful, scalable referral and affiliate programs with 1-click global payouts and white-labeling functionality.

In this guide, we'll walk you through the steps to get started with CodeQR Partners:

1. [Install the `@codeqr/analytics` client-side SDK](#step-1-install-the-codeqr-analytics-client-side-sdk)
2. [Install the CodeQR server-side SDK + track conversion events](#step-2-install-the-codeqr-server-side-sdk--track-conversion-events)
3. [Set up your partner program](#step-3-set-up-your-partner-program)

## Step 1: Install the `@codeqr/analytics` client-side SDK

First, you'll need to install the [@codeqr/analytics client-side SDK](/sdks/client-side/introduction).

This script detects the `cq_id` query parameter and storing it as a first-party cookie, which will be used to attribute subsequent conversion events to the original link.

<Frame>
  <img className="rounded-lg border border-gray-100" src="https://assets.codeqr.io/help/conversion-click-event.png" alt="A diagram showing how click events are tracked in the conversion funnel" />
</Frame>

On top of that, it also:

* lets you [track clicks on the client-side](/sdks/client-side/features/client-side-click-tracking) using query parameters (e.g. `?via=john`)
* [automatically fetch the partner and discount data](/sdks/client-side/features/client-side-click-tracking#automatically-fetching-partner-and-discount-data) for a given link – which is helpful for displaying [dual-sided incentives](https://codeqr.io/help/article/dual-sided-incentives)

You can install the `@codeqr/analytics` script in several different ways:

<CardGroup>
  <Card title="React" icon="react" href="https://docs.codeqr.io/sdks/client-side/installation-guides/react">
    Add CodeQR Analytics to your React app
  </Card>

  <Card title="Manual installation" icon="browser" href="https://docs.codeqr.io/sdks/client-side/installation-guides/manual">
    Add CodeQR Analytics to your website
  </Card>

  <Card
    title="Framer"
    icon={
  <svg
    width="74"
    height="111"
    viewBox="0 0 74 111"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className="w-7 h-7"
  >
    <path d="M0 0H73.8374V36.9892H36.9187L0 0Z" fill="#eb5611" />
    <path d="M0 36.989H36.9187L73.8374 73.9796H0V36.989Z" fill="#eb5611" />
    <path d="M0 73.9797H36.9187V110.97L0 73.9797Z" fill="#eb5611" />
  </svg>
}
    href="https://docs.codeqr.io/sdks/client-side/installation-guides/framer"
  >
    Add CodeQR Analytics to your Framer site
  </Card>

  <Card title="WordPress" icon="wordpress" href="https://docs.codeqr.io/sdks/client-side/installation-guides/wordpress">
    Add CodeQR Analytics to your WP site
  </Card>

  <Card title="Webflow" icon="webflow" href="https://docs.codeqr.io/sdks/client-side/installation-guides/webflow">
    Add CodeQR Analytics to your Webflow site
  </Card>
</CardGroup>

<Check>
  You can **verify the installation** with the following tests:

  1. Open the browser console and type in `_CodeQRAnalytics` – if the script is installed correctly, you should see the `_CodeQRAnalytics` object in the console.
  2. Add the `?cq_id=test` query parameter to your website URL and make sure that the `cq_id` cookie is being set in your browser.

  If both of these checks pass, the script is installed correctly. Otherwise, please make sure:

  * The analytics script was added to the `<head>` section of the page
  * If you're using a content delivery network (CDN), make sure to purge any cached content
</Check>

Once the script is installed, make sure to verify that [client-side click tracking](/sdks/client-side/features/client-side-click-tracking) is working as expected by checking if the following is true:

1. There is a successful `/track/click` request in your browser's **Network** tab (and no errors in the **Console** tab).
2. The `cq_id` cookie is being set upon a successful `/track/click` request.
3. The click tracked correctly in the [**Events**](https://app.codeqr.io/events) tab of your CodeQR project.

## Step 2: Install the CodeQR server-side SDK + track conversion events

<Tip>
  If you are using Shopify, you can skip this step since our Shopify app will
  automatically track conversions for you. Read the [Shopify integration
  guide](https://docs.codeqr.io/conversions/sales/shopify) for more information.
</Tip>

CodeQR uses server-side event tracking to track conversions, which is more reliable than client-side tracking. Depending on which framework you're using, you can use our [native SDKs](/sdks/overview):

<CardGroup>
  <Card title="TypeScript" icon="npm" href="/sdks/typescript" horizontal>
    TypeScript library for the CodeQR API
  </Card>
</CardGroup>

If you're using a framework that isn't listed, you can use the CodeQR REST API to track events on the server-side:

* [`POST /track/lead`](https://docs.codeqr.io/api-reference/endpoint/track-lead)
* [`POST /track/sale`](https://docs.codeqr.io/api-reference/endpoint/track-sale)

Once you install the SDKs, you can start tracking conversion events.

### Tracking lead events

The first event you'll want to track is a `lead` event. This happens when a user performs an action that indicates interest in your product or service. This could be anything from:

* Signing up for an account
* Adding a product to cart
* Joining a mailing list

<Frame>
  <img className="rounded-lg border border-gray-100" src="https://assets.codeqr.io/help/conversion-lead-event.png" alt="A diagram showing how lead events are tracked in the conversion funnel" />
</Frame>

Our most common lead event is `Sign Up`, which happens when a user signs up for an account. Depending on which authentication framework you're using, here are a few examples of how to send `Sign Up` lead events:

<CardGroup>
  <Card title="Clerk" icon="shield-halved" iconType="solid" href="https://docs.codeqr.io/conversions/leads/clerk" horizontal />

  <Card title="NextAuth.js" icon="shield-halved" iconType="solid" href="https://docs.codeqr.io/conversions/leads/next-auth" horizontal />

  <Card title="Supabase" icon="shield-halved" iconType="solid" href="https://docs.codeqr.io/conversions/leads/supabase" horizontal />

  <Card title="Auth0" icon="shield-halved" iconType="solid" href="https://docs.codeqr.io/conversions/leads/auth0" horizontal />

  <Card title="Appwrite" icon="shield-halved" iconType="solid" href="https://docs.codeqr.io/conversions/leads/appwrite" horizontal />
</CardGroup>

The lead event will serve as the source of truth for the customer's identity and which link they came from. This means that all subsequent actions performed by the customer (e.g. upgrading their plan, purchasing a product) will automatically be attributed to the original link.

To learn more about tracking lead events with CodeQR, refer to the following resources:

<CardGroup cols={2}>
  <Card title="Tracking lead events" icon="book-open" href="https://docs.codeqr.io/conversions/leads/introduction">
    Read the full guide on tracking lead events with CodeQR
  </Card>

  <Card title="POST /track/lead endpoint" icon="code" href="https://docs.codeqr.io/api-reference/endpoint/track-lead">
    View the full list of attributes you can pass when sending a lead event
  </Card>
</CardGroup>

### Tracking sale events

The second event you'll want to send is a `sale` event. This happens when a user purchases your product or service. This could be anything from:

* Subscribing to a paid plan
* Usage expansion (upgrading from one plan to another)
* Purchasing a product

<Frame>
  <img className="rounded-lg border border-gray-100" src="https://assets.codeqr.io/help/conversion-sale-event.png" alt="A diagram showing how sale events are tracked in the conversion funnel" />
</Frame>

Depending on which payment processor you're using, we offer native integrations for the following:

<CardGroup cols={2}>
  <Card title="Stripe" icon="stripe" href="https://docs.codeqr.io/conversions/sales/stripe" horizontal />

  <Card title="Shopify" icon="shopify" href="https://docs.codeqr.io/conversions/sales/shopify" horizontal />
</CardGroup>

Alternatively, you can also send sale events manually using [our SDKs](/sdks/overview) or the [`POST /track/sale` API endpoint](https://docs.codeqr.io/api-reference/endpoint/track-sale).

To learn more about tracking sale events with CodeQR, refer to the following resources:

<CardGroup cols={2}>
  <Card title="Tracking sale events" icon="book-open" href="https://docs.codeqr.io/conversions/sales/introduction">
    Read the full guide on tracking sale events with CodeQR
  </Card>

  <Card title="POST /track/sale endpoint" icon="code" href="https://docs.codeqr.io/api-reference/endpoint/track-sale">
    View the full list of attributes you can pass when sending a sale event
  </Card>
</CardGroup>

## Step 3: Set up your partner program

Once you have conversion tracking up and running, you can follow these steps to set up your partner program:

1. Go through the [program onboarding flow](https://app.codeqr.io/programs) to create your program.
   * If you're migrating from another platform, you can also import your partners and historical conversions (e.g. [from Rewardful](https://codeqr.io/help/article/migrating-from-rewardful)).
2. [Connect your bank account](https://codeqr.io/help/article/how-to-set-up-bank-account) for partner payouts.
3. [Invite your partners](https://codeqr.io/help/article/inviting-partners) to join your program + set up your [program application form](https://codeqr.io/help/article/inviting-partners#via-a-branded-application-form) for future partners.
4. Create [custom reward rules](https://codeqr.io/help/article/partner-rewards) and [dual-sided incentives](https://codeqr.io/help/article/dual-sided-incentives) to incentivize partners to share your link with others.
5. Set up a [whitelabeled referral dashboard](/partners/white-labeling) that lives directly inside your app so your users can automatically enroll in your partner program without leaving your app.

<Frame>
  <img className="rounded-lg border border-gray-100" src="https://assets.codeqr.io/cms/codeqr-partners.jpg" alt="CodeQR Partners" />
</Frame>
