How to Set Up a Referral Program With Cello + Lovable

How to Set Up a Referral Program in 48 Hours (Without Engineering)

The fastest way to set up a referral program in 2026 is to combine Cello's AI-powered referral infrastructure with Lovable's AI app builder, completing a fully functional integration in under 48 hours, without a single engineering ticket. Most Growth Managers spend weeks negotiating dev bandwidth before a referral program ever reaches staging. The Cello + Lovable integration changes that equation: you configure Cello, set up a Stripe webhook, and prompt Lovable's AI to implement four technical components in a single conversation.

This guide gives you the exact steps to replicate that result. For broader context, see the Complete Guide to Referral Marketing for B2B SaaS.

How Long Does It Take to Set Up a Referral Program?

• Prerequisites: Confirm Supabase + Stripe + Cello account are ready → Pre-existing / up to 30 min
• Step 1: Create Cello account + retrieve API keys → 10 min
• Step 2: Add Cello webhook endpoint to Stripe Dashboard → 10 min
• Step 3: Prompt Lovable to generate the integration plan → 15 min
• Step 4: Review + confirm the four-component plan → 10 min
• Step 5: Publish app + test full referral flow → 20 min
• Total active work: ~65 minutes

What You Need to Set Up a Referral Program With Cello + Lovable

Before you prompt Lovable (lovable.dev) to add referrals, three prerequisites must be in place. The Cello + Lovable integration relies on Supabase for user identity, Stripe for billing event tracking, and Cello as the referral engine. All three need to be functional before you start. If any of the three is missing, complete it first; the referral layer itself takes approximately 65 minutes to add on top of a working app.

• ✅ Supabase is connected to your Lovable project and user authentication is fully functional: users can sign up, log in, and are stored in Supabase.
• ✅ Stripe subscription flow is live: users in your app can subscribe and are associated with a Stripe customer ID.
• ✅ Cello account exists: sign up at cello.so; your API keys are accessible in the Cello Portal.

Optional, Recommended: Enable the Cello MCP Server

The Cello MCP (Model Context Protocol) server gives Lovable real-time access to Cello's documentation and integration health checks. Enabling it reduces implementation errors and allows post-launch debugging through natural-language prompts.

1. Log into the Cello Portal → Access Keys.
2. Click Generate MCP Access Token and copy the token.
3. In Lovable's MCP settings, add, Cello's Server URL | Authentication: your MCP Access Token
4. Note: Cello MCP is currently in Early Access. To request access, contact the Cello team at cello.so or email your account manager. Generate your MCP Access Token in the Cello Portal under Access Keys once access is confirmed.

Step 1: Create Your Cello Account and Generate Your API Keys

To set up a referral program with Cello and Lovable, start by creating a Cello account, navigating to the Cello Portal, and retrieving three values: your API key, your Webhook endpoint URL, and, if you are using Cello MCP, your MCP Access Token. All three values will be referenced in subsequent steps of this guide.

1. Go to book a demo and create your account.
2. Once inside, navigate to Cello Portal → Access Keys.
3. Copy your API key → you will need this in Step 3 when Lovable builds the integration.
4. Navigate to Cello Portal → Integrations → Webhooks and copy the endpoint URL you will need in Step 2.
5. (Optional, MCP users only) Click Generate MCP Access Token and keep it ready for your Lovable MCP configuration.

Sandbox mode: Your Cello account starts in sandbox mode by default. This is the correct environment for prototyping and stakeholder demos. It allows you to simulate the full referral flow without triggering live payouts. Switch to production mode after stakeholder approval.

Step 2: Add the Cello Webhook Endpoint to Stripe

The Cello + Lovable integration tracks referral conversions through Stripe billing events. To connect them, add Cello's webhook endpoint URL to your Stripe Dashboard and configure it to listen to all ten required events. This tells Cello when a referral converts, from subscription creation through renewal and cancellation.

1. In the Cello Portal, go to Integrations → Webhooks and copy the Cello webhook endpoint URL.
2. Open your Stripe Dashboard → navigate to Developers → Webhooks.
3. Click Add endpoint and paste the Cello webhook endpoint URL.
4. Under Events to listen to, select all ten required events (see list below).

• charge.refunded | charge.succeeded | charge.updated
• customer.created | customer.deleted | customer.updated
• customer.subscription.created | customer.subscription.deleted | customer.subscription.updated
• invoice.paid

1. Save the endpoint.
2. Stripe generates a Webhook Signing Secret upon saving. Store it securely; Lovable may reference it when configuring the webhook handler.

For a full reference on Stripe webhook event types and endpoint registration, see the Stripe Webhooks documentation.

Step 3: Prompt Lovable to Build the Cello Referral Integration

Once the Stripe webhook is live, open Lovable in Plan mode and enter the Cello integration prompt. A single prompt, with or without MCP, triggers Lovable to read Cello's documentation, assess your existing codebase, and generate a complete four-component implementation plan before touching a single line of code.

1. Open your Lovable project.
2. Switch to Plan mode in the top navigation bar (do not use Build mode for this step).
3. Enter one of the following prompts based on your setup (see below).

Standard prompt (MCP NOT enabled):

I want to add user referrals to my app using Cello.

MCP prompt (MCP IS enabled, recommended):

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.

1. Lovable processes the prompt and returns a full implementation plan, this typically takes 30-90 seconds.
2. Do not click Execute or Confirm yet. Review the plan against the four-component checklist in Step 4 before proceeding.

The MCP prompt gives Lovable real-time access to Cello's documentation and checks your existing integration status before planning. This catches configuration issues before they become runtime errors. Use the standard prompt only if MCP setup is not yet complete.

Step 4: Review and Confirm the Four-Component Implementation Plan

Before executing Lovable's implementation plan, verify it explicitly covers all four required components of a complete Cello integration: JavaScript SDK initialization, referral widget or UI placement, attribution setup for tracking referral conversions, and a Stripe webhook handler. Any plan missing one or more components will produce an incomplete integration that fails silently during live testing.

Check all four components are present in Lovable's plan before clicking Execute:

• ✅ Cello JS SDK initialization: SDK is loaded and initialized with your Cello API key on application load. Without this, Cello does not run in your app and no referral data is captured.
• ✅ Referral widget / UI placement: A referral component is added to at least one user-facing screen (dashboard, settings, post-signup). Users need a visible, accessible way to generate and share their referral link.
• ✅ Attribution setup: Referral source tracking is added to the signup or login flow. This records which existing user referred each new signup — the foundation of reward attribution.
• ✅ Stripe webhook handler: A server-side handler receives the Stripe webhook events and forwards them to Cello. This is how Cello registers conversions, calculates rewards, and triggers payouts.

1. Read through Lovable's full implementation plan and confirm each of the four components appears.
2. If a component is missing, type in Plan mode: 'Your plan is missing [component name]. Please add this component before we proceed.'
3. Once all four components are present, click Confirm or Execute.
4. Lovable implements the full integration in a single session: execution time varies by codebase size. Do not navigate away from the Lovable editor until it confirms completion.
5. Once complete, you are ready to test in Step 5.

Step 5: Publish Your App and Test the Full Referral Flow

After Lovable finishes implementation, publish your app and verify the complete referral loop: generate a referral link, sign up via that link with a test account, simulate a Stripe subscription event, and confirm the reward triggers in the Cello Portal. A successful end-to-end test confirms your referral program is production-ready.

1. Click Publish in Lovable's toolbar: your updated app is live within 30-60 seconds.
2. Log in to your live app as User A (your existing test account).
3. Navigate to the area where the referral widget is placed and copy your referral link.
4. Open a new private/incognito browser window and sign up via the referral link as User B.
5. Simulate a subscription event: in the Stripe Dashboard, create a test subscription for User B's customer ID.
6. Return to the Cello Portal → Referrals dashboard. Confirm: User A appears as the referrer | User B appears as the referred user | The conversion is recorded | The reward status is 'Pending' or 'Approved'.

If the reward does not trigger, check: (1) all ten Stripe webhook events are selected and the endpoint is active; (2) the Webhook Signing Secret is correctly stored in Lovable's environment variables; (3) the Cello JS SDK is initializing on application load (check browser console for Cello initialization logs).

How to Demo This to Stakeholders in 10 Minutes

A live referral flow in sandbox mode is the fastest way to get stakeholder buy-in for a broader rollout. The demo requires no additional setup. Everything built in Steps 1-5 is already in sandbox mode by default, which is sufficient to show the complete referral experience without triggering live payouts.

1. Open your published Lovable app and navigate to the referral widget.
2. Copy the referral link and share it in the meeting chat or screen-share the widget.
3. Use a second browser session to simulate a new signup via the referral link.
4. Switch to the Cello Portal dashboard and show the referral tracked in real time.
5. Anchor the business case in data: use the Cello ROI Calculator to model CAC reduction, and reference two live benchmarks. VEED's 90.4% reduction in CAC vs. paid acquisition channels and tl;dv's 30.3% freemium-to-paid conversion rate (as of 2025).
6. Close with the tl;dv benchmark: implementation in less than a day, 1,000+ monthly referral signups, 30.3% freemium-to-paid conversion rate (as of 2025).

Common stakeholder objection: 'What happens when we need to customise the reward structure?' Answer: Reward structure, payout amounts, eligibility rules, and reward types (cash, credits, discounts) are all configured in the Cello Portal dashboard. No code changes needed. Lovable can also implement custom reward display logic if you want UI-level customisation.