Widgets Overview

LostChurn widgets are embeddable UI components that you can add to your website or application. Instead of relying solely on email and SMS to reach customers with failed payments, widgets let you meet customers where they already are -- inside your product.

Available Widgets

How Widgets Work

Widgets communicate with the LostChurn API using a publishable key that is safe to include in client-side code. The publishable key identifies your workspace but does not grant write access to your data.

Widgets are designed to be invisible when they are not needed. If a customer has no failed payments, the Recovery Bar renders nothing. If cancellation flows are not configured, the Cancel Flow Widget falls back to your default behavior.

Integration Methods

Script Tag

The simplest integration. Add a single script tag to your HTML and configure the widget with data attributes or a global configuration object.

<script
  src="https://cdn.lostchurn.com/widgets/v1/lostchurn.js"
  data-publishable-key="lc_pub_your_key"
  data-customer-id="cus_abc123"
  async
></script>

React Component

For React applications, install the @lostchurn/react package and use the provided components.

npm install @lostchurn/react

import { LostChurnProvider, RecoveryBar } from "@lostchurn/react";

function App() {
  return (
    <LostChurnProvider publishableKey="lc_pub_your_key">
      <RecoveryBar customerId="cus_abc123" />
      {/* rest of your app */}
    </LostChurnProvider>
  );
}

JavaScript SDK

For non-React applications that need programmatic control, use the JavaScript SDK directly.

import { LostChurn } from "@lostchurn/js";

const lc = new LostChurn("lc_pub_your_key");
lc.mount("recovery-bar", {
  customerId: "cus_abc123",
  container: "#lostchurn-container",
});

Customer Identification

Widgets need to know which customer is viewing the page. You pass the customer ID (the same ID used by your payment processor, e.g., Stripe's cus_ ID) to the widget. LostChurn uses this to check whether the customer has any failed payments or pending recovery actions.

For security, widget API requests are scoped to read-only operations for the specified customer. The publishable key cannot be used to access other customers' data or perform write operations.

Styling

All widgets are designed to inherit your application's typography and can be fully themed using CSS custom properties. See Customization for the complete list of available properties.

Performance

Widgets are lightweight and optimized for minimal impact on your page load:

Next Steps

• Recovery Bar -- show a payment failure banner to affected customers
• Cancel Flow Widget -- embed cancellation flows in your app
• Customization -- theme widgets to match your brand