Widget Customization

All LostChurn widgets are designed to blend seamlessly into your application. They inherit your fonts by default and expose CSS custom properties for fine-grained control over colors, spacing, borders, and more.

CSS Custom Properties

Override any of the following CSS custom properties to theme LostChurn widgets. Set them on the :root selector or scope them to a container element.

Colors

Typography

Spacing and Layout

Examples

Match Your Brand Colors

:root {
  --lc-color-primary: #0070f3;
  --lc-color-primary-hover: #0060df;
  --lc-color-primary-text: #ffffff;
  --lc-border-radius: 0.375rem;
}

Use Your Application Font

Widgets inherit your font by default. If you need to explicitly set a different font:

:root {
  --lc-font-family: "Inter", sans-serif;
}

Rounded Style

:root {
  --lc-border-radius: 9999px;
  --lc-border-radius-lg: 1.5rem;
}

Minimal / Flat Style

:root {
  --lc-shadow: none;
  --lc-shadow-lg: none;
  --lc-border-radius: 0;
  --lc-color-border: transparent;
}

Color Schemes

Widgets support three color scheme modes via the theme prop.

Using Auto Theme

When theme="auto" (the default), widgets respond to the user's operating system dark mode setting. You can also override the auto behavior by targeting the dark scheme in CSS:

@media (prefers-color-scheme: dark) {
  :root {
    --lc-color-primary: #818cf8;
    --lc-color-background: #0f0f1a;
    --lc-color-surface: #1a1a2e;
    --lc-color-text: #f4f4f5;
  }
}

Matching Your App's Theme Toggle

If your application has its own dark mode toggle (not relying on the system setting), apply a CSS class to scope the widget theme:

.dark-mode {
  --lc-color-primary: #818cf8;
  --lc-color-background: #0f0f1a;
  --lc-color-surface: #1a1a2e;
  --lc-color-text: #f4f4f5;
  --lc-color-text-secondary: #9ca3af;
  --lc-color-border: #374151;
}

Font Inheritance

By default, --lc-font-family is set to inherit, which means widgets will use whatever font is set on the parent element. This works automatically with:

• System font stacks
• Google Fonts loaded via <link> tags
• Self-hosted fonts loaded via @font-face
• CSS frameworks like Tailwind CSS (which sets the font on html or body)

If your widget is rendered inside an iframe (e.g., the hosted payment update modal), font inheritance does not apply. In that case, LostChurn uses a system font stack. To override the iframe font, contact support.

Responsive Behavior

Widgets are responsive by default and adapt to the viewport width:

Customizing Breakpoints

If you need to adjust widget layout at specific breakpoints, target the widget's CSS class:

@media (max-width: 640px) {
  .lc-recovery-bar {
    --lc-spacing-md: 0.75rem;
    --lc-font-size-base: 0.875rem;
  }
}

CSS Class Reference

Use these classes to target specific widget elements for additional styling:

Next Steps

• Recovery Bar -- configuration and integration for the Recovery Bar
• Cancel Flow Widget -- embed cancellation flows in your app
• Widgets Overview -- all available widgets