How to Install a Churn Recovery Widget on Your SaaS in 5 Minutes

TL;DR: ChurnBack's cancel flow widget installs with a single script tag and a few lines of JavaScript. Connect your Stripe account via OAuth, configure your cancel flow in the dashboard, then add the SDK to your cancellation page. When a customer clicks cancel, the widget appears with your configured offers. No backend changes required.

Prerequisites

Before installing ChurnBack, you need:

• A ChurnBack account (sign up at churnback.ai)
• A Stripe account with active subscriptions
• Access to your website's HTML or frontend code

Step 1: Connect Your Stripe Account

After signing up, navigate to Settings → Integrations in the ChurnBack dashboard and click "Connect Stripe." This uses Stripe Connect OAuth — you will be redirected to Stripe to authorize the connection. ChurnBack gets read access to subscription data and the ability to apply discounts and pause subscriptions on your behalf. No API keys to copy. No webhook URLs to configure manually. The OAuth flow handles everything.

Step 2: Configure Your Cancel Flow

Go to Cancel Flows in the dashboard and create a new flow. The builder lets you configure:

• Cancellation reasons — Add the reasons you want to collect (too expensive, missing features, etc.)
• Retention offers — For each reason, choose an offer type (discount, pause, plan change, trial extension) and configure the details
• Discount duration — Choose "Next invoice only," "For X months," or "Forever"
• Messaging — Customize headlines, body text, and button labels Activate the flow when you are ready.

Step 3: Install the SDK

Add the ChurnBack script tag to your website, ideally on the page where your cancel button lives:

<script src="https://churnback.ai/sdk.js"></script>

Then initialize ChurnBack and wire it to your cancel button:

const churnback = new ChurnBack({
  apiKey: 'cb_pub_your_api_key_here'
});
document.getElementById('cancel-button').addEventListener('click', function() {
  churnback.triggerCancelFlow({
    subscriptionId: 'sub_abc123',  // The Stripe subscription ID
    customerId: 'cus_xyz789',      // The Stripe customer ID
    onComplete: function(result) {
      if (result.action === 'cancel') {
        // Customer chose to cancel — process the cancellation
        cancelSubscription();
      } else {
        // Customer accepted an offer — subscription is already updated
        showSuccessMessage();
      }
    }
  });
});

Step 4: Test It

Create a test subscription in Stripe test mode, navigate to your cancel page, and click the cancel button. The ChurnBack widget should appear with your configured flow. Accept an offer and verify:

• The discount/pause/change was applied in your Stripe dashboard
• The save appears in your ChurnBack dashboard
• The onComplete callback fires with the correct result

What Happens Under the Hood

When triggerCancelFlow() is called:

1. The SDK sends the subscription ID and customer ID to ChurnBack's API
2. ChurnBack fetches the subscription details from Stripe (via your connected account)
3. The cancel flow steps are returned and rendered in a modal overlay
4. If the customer accepts an offer, ChurnBack applies the change directly in Stripe
5. The save is recorded and the onComplete callback fires Your backend never needs to know about ChurnBack. The SDK handles everything client-side, and Stripe changes are made server-to-server via the Connect API. ChurnBack helps SaaS businesses recover churning customers with intelligent cancel flows and automated dunning. Get started →

FAQ

How do I install ChurnBack?

Add a single script tag (<script src="https://churnback.ai/sdk.js"></script>) to your website and initialize it with your API key. Wire the triggerCancelFlow() method to your cancel button. That's it.

Does ChurnBack work with Stripe?

Yes. ChurnBack connects to your Stripe account via Stripe Connect OAuth. It reads subscription data and applies retention actions (discounts, pauses, plan changes) directly through the Stripe API.

How long does ChurnBack setup take?

Most teams complete setup in under 30 minutes. Connecting Stripe takes 2 minutes, configuring a cancel flow takes 10-15 minutes, and installing the SDK takes 5-10 minutes of frontend work.

Do I need to make backend changes?

No. The ChurnBack SDK runs on your frontend and communicates directly with ChurnBack's servers. Stripe changes are applied server-to-server via Connect. Your existing backend code does not need to change.

Can I customize the look of the cancel flow widget?

The widget uses your configured messaging (headlines, body text, button labels) and supports theming through the ChurnBack dashboard. The modal renders in a Shadow DOM to avoid CSS conflicts with your site.