> ## 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.

# Cello + Lovable integration

> How to add user referrals to your app using Cello with Lovable

Lovable now lets you integrate Cello user referrals entirely through **chat**. Just ask Lovable to **"Add user referrals to your app"** and it will do the rest - no manual coding required.

<img className="w-full rounded-xl" src="https://mintcdn.com/cello/Xqm021Gy_uvBncuM/coding-apps/lovable-cello.png?fit=max&auto=format&n=Xqm021Gy_uvBncuM&q=85&s=dedb999be23e245c292b1304792ee8a9" alt="Cello + Lovable integration" width="1957" height="1104" data-path="coding-apps/lovable-cello.png" />

<Accordion title="Watch the walkthrough">
  <iframe className="w-full aspect-video rounded-xl" src="https://www.loom.com/embed/3121fcb685884030bce0746b6350bd5d?autoplay=0" title="Cello + Lovable integration walkthrough" frameBorder="0" allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Accordion>

## Prerequisites

Before integrating Cello, ensure the following prerequisites are met:

* The project **must** be connected to Supabase. [Learn more about Supabase](https://docs.lovable.dev/integrations/supabase)
* User signup and authentication via Supabase is functional
* Stripe subscription flow is functional
* You have a Cello account and API keys at hand.

<Note>
  Make sure to use Cello **Sandbox environment** when developing and testing
</Note>

## Connect the Cello MCP

The [Cello MCP server](/mcp/introduction) gives Lovable direct access to Cello's documentation, integration health checks, and best-practice recommendations. Connecting it before you start means Lovable can look up the right docs itself, verify your setup as it goes, and follow best practices automatically - instead of relying only on the guide link you paste.

This step is optional but recommended. The integration steps below work either way. See [Connect your client → Lovable](/mcp/connect#lovable) for the setup steps.

## Cello user referrals integration

<Note>
  For a step-by-step technical implementation (source of truth + acceptance criteria), follow the detailed guide:

  * [Cello + Lovable Detailed Integration Guide](/resources/cello-lovable-detailed-integration)
  * [Cello + Lovable Detailed Integration (Credit-based Rewards)](/resources/cello-lovable-detailed-integration-credit-based-rewards)
</Note>

<Steps>
  <Step title="Prep your project">
    * Signup and authentication flow with Supabase is functional
    * Stripe subscription flow is functional
    * Cello API keys are handy
  </Step>

  <Step title="Add Cello Webhook Endpoint to Stripe">
    * Get your webhook URL from [Cello Portal](https://portal.cello.so/integrations/webhooks)
    * Add a Webhook endpoint in Stripe (Log into your Stripe Dashboard -> Go to Developer Mode -> Add a Webhook endpoint and enter endpoint URL -> Select the events to send -> Click "Add endpoint")
    * Secure the Webhook with "Signing secret"

    Events to send:

    * `charge.refunded`, `charge.succeeded`, `charge.updated`
    * `customer.created`, `customer.deleted`, `customer.updated`
    * `customer.subscription.created`, `customer.subscription.deleted`, `customer.subscription.updated`
    * `invoice.paid`

    See [Stripe Webhook Integration](/integrations/webhooks/stripe-webhook#steps) for more details.
  </Step>

  <Step title="Prompt Lovable to add User Referrals to your app">
    Switch Lovable to **Plan mode**, then paste this prompt:

    <Tabs>
      <Tab title="With Cello MCP connected">
        ```text theme={null}
        I want to add user referrals to my app using Cello.

        Use the Cello MCP to search the integration documentation, check my current integration status, and create a thorough implementation plan. Follow all best-practice recommendations from Cello.
        ```

        Lovable will pull the relevant guides, check what's already set up, and tailor the plan to your project.
      </Tab>

      <Tab title="Without MCP">
        ```text theme={null}
        I now want to add user referrals. I chose platform Cello for this.

        I added a Cello integration guide according to which you should do the implementation. parsed the documentation more carefully from the start rather than assuming standard patterns would work. create a thorough implementation plan based on guidance, patterns and AC from the provided guide. Don't skip any content, it is all relevant

        Guide: https://docs.cello.so/resources/cello-lovable-detailed-integration
        ```
      </Tab>
    </Tabs>

    Lovable asks you guiding questions and creates an implementation plan based on your answers.
  </Step>

  <Step title="Confirm executing the plan">
    Review the plan carefully. It should cover:

    * Cello JS SDK initialization and user authentication
    * Referral component placement and configuration
    * Attribution setup for tracking referred signups
    * Stripe webhook integration for conversion tracking

    If it looks correct, tell Lovable to proceed and start implementing it.
  </Step>

  <Step title="Publish & Test">
    You cannot try the full end-to-end flow in Preview mode. Publish your changes to test.

    If everything was implemented correctly, you should see events coming in to [Cello Dashboard](https://portal.cello.so/dashboard/referrer).

    <Tip>
      If you have the Cello MCP connected, ask Lovable to run a health check after publishing:

      *"Use Cello to check my integration status and confirm all four components are connected."*
    </Tip>
  </Step>
</Steps>

## After you're live

If you have the Cello MCP connected, it continues to be useful after the initial integration:

| Prompt                                           | What happens                                                                             |
| ------------------------------------------------ | ---------------------------------------------------------------------------------------- |
| *"Is my Cello integration working?"*             | Checks all four integration components and reports which are connected or broken         |
| *"Why aren't referral rewards being triggered?"* | Inspects recent events to find missing or malformed fields preventing attribution        |
| *"How can I improve my referral program?"*       | Returns a prioritized list of recommendations across activation, sharing, and conversion |
| *"How do I set up a custom referral launcher?"*  | Searches the docs for custom launcher implementation guides                              |