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

# Setup Overview

> Get started with Cello in 4 easy steps

<img src="https://mintcdn.com/cello/9JNJovQSvwIBkkI9/images/cello-setup-overview.png?fit=max&auto=format&n=9JNJovQSvwIBkkI9&q=85&s=de7a09d4356f5387ddd4dd46d8a23bde" alt="Cello setup overview 4 steps" width="5114" height="1957" data-path="images/cello-setup-overview.png" />

<Info>
  Using an AI coding tool? Connect the [Cello MCP server](/mcp/introduction) to your editor first. It gives your tool live access to Cello docs, integration health checks, and best-practice recommendations while you build. See [Connect your client](/mcp/connect) for setup.
</Info>

## Setup Steps

If you did not find your integration guide, complete these steps to integrate Cello, regardless of your tech stack or payment gateway.

<Steps>
  <Step title="Integrate the referral component">
    <span className="badge-blue">Effort: \~3-4 hours</span>

    Add referral functionality to your web application with Cello's embeddable Referral Component.

    <CardGroup cols={2}>
      <Card title="Referral Component Quickstart" icon="js" horizontal href="/referral-component/quickstart" />
    </CardGroup>

    You can also integrate the Cello Referral Component into your mobile apps. Choose the appropriate SDK for your platform:

    <CardGroup cols={2}>
      <Card title="iOS SDK" icon="apple" horizontal href="/sdk/mobile/ios" />

      <Card title="Android SDK" icon="android" horizontal href="/sdk/mobile/android" />

      <Card title="React Native SDK" icon="react" horizontal href="/sdk/mobile/react-native" />
    </CardGroup>
  </Step>

  <Step title="Capture referral codes on landing pages">
    <span className="badge-blue">Effort: \~1-2 hours</span>

    Set up a [Referral Landing Page](/guides/user-experience/optimizing-landing-pages) and capture referral codes (`ucc`) when users click referral links. For Web signup flow, follow this guide:

    <CardGroup cols={2}>
      <Card title="Web signup flow" icon="browser" horizontal href="/attribution/for-web" />
    </CardGroup>

    Or choose the appropriate guide for your flow:

    <CardGroup cols={2}>
      <Card title="Mobile signup flow" icon="mobile" horizontal href="/attribution/for-mobile" />

      <Card title="HubSpot forms" icon="hubspot" horizontal href="/attribution/hubspot" />

      <Card title="Typeform forms" icon="input-pipe" horizontal href="/attribution/typeform" />
    </CardGroup>
  </Step>

  <Step title="Track signups">
    <span className="badge-blue">Effort: \~1 day</span>

    When users sign up or express interest in your product, attribute these events to their referrer for potential future rewards.

    Choose your preferred method to send signup events to Cello:

    <CardGroup cols={2}>
      <Card title="Track signups" icon="user-plus" href="/attribution/tracking-signups">
        Complete guide for tracking signup events
      </Card>

      <Card title="POST /events endpoint" icon="code" href="/api-reference/generic-events/send-event">
        API reference for sending events
      </Card>
    </CardGroup>
  </Step>

  <Step title="Track purchases">
    <span className="badge-blue">Effort: \~1 day</span>

    Complete the conversion tracking by sending purchase events to Cello when users make payments.

    Choose your integration method based on your payment gateway:

    <CardGroup cols={2}>
      <Card title="Track purchases" icon="credit-card" href="/attribution/tracking-purchase">
        Complete guide for tracking purchase events
      </Card>

      <Card title="Apply discounts" icon="badge-percent" href="/attribution/apply-discounts">
        Apply discounts to referred users when creating a subscription
      </Card>

      <Card
        title="Stripe Webhook"
        icon={<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(https://mintlify.s3.us-west-1.amazonaws.com/cello/#clip0_19722_44991)">
<path d="M18 36C27.9411 36 36 27.9411 36 18C36 8.05888 27.9411 0 18 0C8.05888 0 0 8.05888 0 18C0 27.9411 8.05888 36 18 36Z" fill="#635BFF"/>
<path fillRule="evenodd" clipRule="evenodd" d="M16.596 13.995C16.596 13.149 17.289 12.816 18.441 12.816C20.097 12.816 22.185 13.32 23.841 14.211V9.09898C22.032 8.37898 20.25 8.09998 18.45 8.09998C14.031 8.09998 11.097 10.404 11.097 14.256C11.097 20.259 19.368 19.305 19.368 21.897C19.368 22.896 18.495 23.22 17.28 23.22C15.471 23.22 13.167 22.482 11.34 21.483V26.658C13.365 27.531 15.408 27.9 17.28 27.9C21.807 27.9 24.921 25.659 24.921 21.762C24.885 15.282 16.596 16.434 16.596 13.995Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_19722_44991">
<rect width="36" height="36" fill="white"/>
</clipPath>
</defs>
</svg>}
        href="/integrations/webhooks/stripe-webhook"
      >
        Stripe webhook integration for purchase events
      </Card>

      <Card
        title="Chargebee Webhook"
        icon={<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.1464 18.0024L35.9265 12.3313V0H23.5953L12.1464 18.0024Z" fill="#FF3300"/>
<path d="M0.36 17.7853C0.36 19.2605 0.539827 20.6924 0.879691 22.0664L12.1451 18.0017L0.786251 13.9024C0.509734 15.1512 0.36 16.4499 0.36 17.7819V17.7853Z" fill="#FF3300"/>
<path d="M4.54902 6.32317L12.1436 18.0031L15.6415 0.177188C11.2091 0.799913 7.3026 3.05771 4.54902 6.32317V6.32317Z" fill="#FF3300"/>
<path d="M12.1464 18.0008L35.9265 23.6686V35.9998H23.5953L12.1464 18.0008Z" fill="#FF3300"/>
<path d="M4.54902 29.6798L12.1436 17.9978L15.6415 35.8204C11.2091 35.1977 7.3026 32.9399 4.54902 29.6744L4.54902 29.6798Z" fill="#FF3300"/>
</svg>}
        href="/integrations/webhooks/chargebee-webhook"
      >
        Chargebee webhook integration for purchase events
      </Card>
    </CardGroup>
  </Step>
</Steps>

## Integration Guides

<span className="badge-blue">Effort: \~1-2 days</span>

Ready-to-use webhook integrations for Stripe and Chargebee provide the **fastest path** to track referral conversions automatically.

<Tip>
  These guides are **optimized for the typical freemium scenario with Stripe or Chargebee**.

  Use one of these guides if you:

  * Create a Stripe or Chargebee customer on signup
  * Use the Stripe or Chargebee webhook to send Cello referral conversion events
</Tip>

<CardGroup cols={2}>
  <Card title="Stripe Webhook Quickstart" icon="book-open" horizontal href="/attribution/use-cases/stripe" />

  <Card title="Chargebee Webhook Quickstart" icon="book-open" horizontal href="/attribution/use-cases/chargebee" />
</CardGroup>
