Custom Styling - Churnkey Documentation

CSS Classes Available

## General Components
.ck-style ## applies to everything
.ck-modal ## the embed pop-up
.ck-background-overlay ## the partially transparent overlay
.ck-step ## a wrapper around all content

## specific steps in flow
.ck-pause-step
.ck-discount-step
.ck-contact-step
.ck-redirect-step
.ck-survey-step
.ck-freeform-step
.ck-confirm-step

## while a customer subscription is being modified
.ck-progress-step

## once flow is complete - after discount, pause, cancel
.ck-complete-step

## if error is shown at any point (hopefully customers will never see this)
.ck-error-step

## Step components
.ck-step-header
.ck-step-header-text
.ck-brand-image
.ck-brand-image-header
.ck-step-description-text
.ck-step-body
.ck-step-footer

## Button variations
.ck-button
.ck-text-button ## custom color
.ck-black-text-button
.ck-primary-button ## custom color
.ck-black-primary-button
.ck-gray-primary-button

Example CSS Override

For simplicity, assume you want to modify the header text's appearance. The following CSS rule uses the top-level embed id and targets the specific element that needs styling.

#ck-app h1 {
  color: black;
  background: yellow;
  font-style: italic;
}

Here's how that looks in Chrome dev tools.

Ready-Made CSS Templates

Copy and paste these templates to quickly style your Cancel Flow. Each template covers the modal, form elements (dropdowns, inputs, textareas), buttons, text colors, and info boxes.

These templates override visual styling only. Your brand colors configured in the Churnkey dashboard (e.g., the CTA button color) will still apply on top of these styles.

Dark Obsidian

Inspired by leading developer deployment platforms — pure neutral dark.

Dark Obsidian Theme

/* ===========================================
   Dark Obsidian — Pure Neutral Dark
   =========================================== */

/* Overlay */
#ck-app .ck-background-overlay {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* Modal container */
#ck-app .ck-modal {
  background: #141414 !important;
  border: 1px solid #262626 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  border-radius: 16px !important;
}

/* All step backgrounds */
#ck-app .ck-step,
#ck-app .ck-survey-step, #ck-app .ck-confirm-step, #ck-app .ck-freeform-step,
#ck-app .ck-pause-step, #ck-app .ck-discount-step, #ck-app .ck-contact-step,
#ck-app .ck-redirect-step, #ck-app .ck-complete-step, #ck-app .ck-progress-step {
  background: #141414 !important;
}

/* Header, body, footer */
#ck-app .ck-step-header { background: #141414 !important; border-bottom: 1px solid #1f1f1f !important; }
#ck-app .ck-step-header-text { color: #f5f5f5 !important; }
#ck-app .ck-step-description-text { color: #a3a3a3 !important; }
#ck-app .ck-step-body { background: #141414 !important; color: #a3a3a3 !important; }
#ck-app .ck-step-footer { background: #141414 !important; border-top: 1px solid #1f1f1f !important; }

/* Form elements (dropdowns, inputs, textareas) */
#ck-app select,
#ck-app input,
#ck-app textarea {
  background-color: #1c1c1c !important;
  color: #e5e5e5 !important;
  border-color: #333333 !important;
}
#ck-app select:focus,
#ck-app input:focus,
#ck-app textarea:focus {
  border-color: #525252 !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important;
  outline: none !important;
}
#ck-app ::placeholder { color: #525252 !important; }
#ck-app option { background-color: #1c1c1c !important; color: #e5e5e5 !important; }

/* Text color overrides for dark background legibility */
#ck-app .text-gray-900, #ck-app .text-gray-800 { color: #e5e5e5 !important; }
#ck-app .text-gray-700, #ck-app .text-gray-600, #ck-app .text-gray-500 { color: #a3a3a3 !important; }
#ck-app .text-brand-black { color: #f5f5f5 !important; }
#ck-app .text-opacity-60, #ck-app .text-opacity-80, #ck-app .text-opacity-90 {
  --tw-text-opacity: 1 !important;
}

/* Info boxes and offer containers */
#ck-app [class*="bg-client-primary-light"] { background-color: #1c1c1c !important; }
#ck-app .bg-opacity-5 { --tw-bg-opacity: 1 !important; }
#ck-app .ck-pause-subscription-details { border-color: #333333 !important; color: #a3a3a3 !important; }
#ck-app .ck-pause-subscription-details b { color: #e5e5e5 !important; }
#ck-app .active-discount-disclaimer { color: #a3a3a3 !important; background-color: #1c1c1c !important; }
#ck-app .ck-step-body li, #ck-app .ck-step-body label { color: #a3a3a3 !important; }

/* Brand color overrides (header bar, CTA, icons, borders) */
#ck-app .h-14.rounded-t-lg { background-color: #1c1c1c !important; }
html body #ck-app .bg-client-primary { background-color: #525252 !important; }
html body #ck-app .text-client-primary { color: #a3a3a3 !important; }
html body #ck-app .text-client-primary-middle { color: #a3a3a3 !important; opacity: 0.4 !important; }
html body #ck-app .text-client-primary-light { color: #a3a3a3 !important; }
html body #ck-app .border-client-primary { border-color: #525252 !important; }
html body #ck-app .border-client-primary-light { border-color: #262626 !important; }

/* Buttons */
#ck-app .ck-primary-button { background: #525252 !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; font-weight: 600 !important; }
#ck-app .ck-black-primary-button { background: #262626 !important; color: #f5f5f5 !important; border: 1px solid #333333 !important; border-radius: 8px !important; }
#ck-app .ck-gray-primary-button { background: #1c1c1c !important; color: #d4d4d4 !important; border: 1px solid #262626 !important; border-radius: 8px !important; }
#ck-app .ck-text-button { color: #a3a3a3 !important; }

Dark Midnight

Inspired by a global payments infrastructure — cool blue-tinted dark.

Dark Midnight Theme

/* ===========================================
   Dark Midnight — Blue-Tinted Dark
   =========================================== */

/* Overlay */
#ck-app .ck-background-overlay {
  background: rgba(2, 6, 23, 0.75) !important;
}

/* Modal container */
#ck-app .ck-modal {
  background: #0f172a !important;
  border: 1px solid #1e293b !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  border-radius: 16px !important;
}

/* All step backgrounds */
#ck-app .ck-step,
#ck-app .ck-survey-step, #ck-app .ck-confirm-step, #ck-app .ck-freeform-step,
#ck-app .ck-pause-step, #ck-app .ck-discount-step, #ck-app .ck-contact-step,
#ck-app .ck-redirect-step, #ck-app .ck-complete-step, #ck-app .ck-progress-step {
  background: #0f172a !important;
}

/* Header, body, footer */
#ck-app .ck-step-header { background: #0f172a !important; border-bottom: 1px solid #1a2437 !important; }
#ck-app .ck-step-header-text { color: #f1f5f9 !important; }
#ck-app .ck-step-description-text { color: #94a3b8 !important; }
#ck-app .ck-step-body { background: #0f172a !important; color: #94a3b8 !important; }
#ck-app .ck-step-footer { background: #0f172a !important; border-top: 1px solid #1a2437 !important; }

/* Form elements */
#ck-app select,
#ck-app input,
#ck-app textarea {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}
#ck-app select:focus,
#ck-app input:focus,
#ck-app textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
  outline: none !important;
}
#ck-app ::placeholder { color: #475569 !important; }
#ck-app option { background-color: #1e293b !important; color: #f1f5f9 !important; }

/* Text color overrides */
#ck-app .text-gray-900, #ck-app .text-gray-800 { color: #f1f5f9 !important; }
#ck-app .text-gray-700, #ck-app .text-gray-600, #ck-app .text-gray-500 { color: #94a3b8 !important; }
#ck-app .text-brand-black { color: #f1f5f9 !important; }
#ck-app .text-opacity-60, #ck-app .text-opacity-80, #ck-app .text-opacity-90 {
  --tw-text-opacity: 1 !important;
}

/* Info boxes and offer containers */
#ck-app [class*="bg-client-primary-light"] { background-color: #1e293b !important; }
#ck-app .bg-opacity-5 { --tw-bg-opacity: 1 !important; }
#ck-app .ck-pause-subscription-details { border-color: #1e293b !important; color: #94a3b8 !important; }
#ck-app .ck-pause-subscription-details b { color: #f1f5f9 !important; }
#ck-app .active-discount-disclaimer { color: #94a3b8 !important; background-color: #1e293b !important; }
#ck-app .ck-step-body li, #ck-app .ck-step-body label { color: #94a3b8 !important; }

/* Brand color overrides */
#ck-app .h-14.rounded-t-lg { background-color: #1e293b !important; }
html body #ck-app .bg-client-primary { background-color: #3b82f6 !important; }
html body #ck-app .text-client-primary { color: #3b82f6 !important; }
html body #ck-app .text-client-primary-middle { color: #3b82f6 !important; opacity: 0.4 !important; }
html body #ck-app .text-client-primary-light { color: #94a3b8 !important; }
html body #ck-app .border-client-primary { border-color: #3b82f6 !important; }
html body #ck-app .border-client-primary-light { border-color: #1e293b !important; }

/* Buttons */
#ck-app .ck-primary-button { background: #3b82f6 !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; font-weight: 600 !important; }
#ck-app .ck-black-primary-button { background: #1e293b !important; color: #cbd5e1 !important; border: 1px solid #334155 !important; border-radius: 8px !important; }
#ck-app .ck-gray-primary-button { background: #1e293b !important; color: #94a3b8 !important; border: 1px solid #1e293b !important; border-radius: 8px !important; }
#ck-app .ck-text-button { color: #94a3b8 !important; }

Dark Ember

Inspired by popular team knowledge bases — warm dark with amber undertones.

Dark Ember Theme

/* ===========================================
   Dark Ember — Warm Dark
   =========================================== */

/* Overlay */
#ck-app .ck-background-overlay {
  background: rgba(12, 10, 9, 0.7) !important;
}

/* Modal container */
#ck-app .ck-modal {
  background: #1c1917 !important;
  border: 1px solid #292524 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  border-radius: 16px !important;
}

/* All step backgrounds */
#ck-app .ck-step,
#ck-app .ck-survey-step, #ck-app .ck-confirm-step, #ck-app .ck-freeform-step,
#ck-app .ck-pause-step, #ck-app .ck-discount-step, #ck-app .ck-contact-step,
#ck-app .ck-redirect-step, #ck-app .ck-complete-step, #ck-app .ck-progress-step {
  background: #1c1917 !important;
}

/* Header, body, footer */
#ck-app .ck-step-header { background: #1c1917 !important; border-bottom: 1px solid #231f1d !important; }
#ck-app .ck-step-header-text { color: #fafaf9 !important; }
#ck-app .ck-step-description-text { color: #a8a29e !important; }
#ck-app .ck-step-body { background: #1c1917 !important; color: #a8a29e !important; }
#ck-app .ck-step-footer { background: #1c1917 !important; border-top: 1px solid #231f1d !important; }

/* Form elements */
#ck-app select,
#ck-app input,
#ck-app textarea {
  background-color: #292524 !important;
  color: #fafaf9 !important;
  border-color: #44403c !important;
}
#ck-app select:focus,
#ck-app input:focus,
#ck-app textarea:focus {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.3) !important;
  outline: none !important;
}
#ck-app ::placeholder { color: #57534e !important; }
#ck-app option { background-color: #292524 !important; color: #fafaf9 !important; }

/* Text color overrides */
#ck-app .text-gray-900, #ck-app .text-gray-800 { color: #fafaf9 !important; }
#ck-app .text-gray-700, #ck-app .text-gray-600, #ck-app .text-gray-500 { color: #a8a29e !important; }
#ck-app .text-brand-black { color: #fafaf9 !important; }
#ck-app .text-opacity-60, #ck-app .text-opacity-80, #ck-app .text-opacity-90 {
  --tw-text-opacity: 1 !important;
}

/* Info boxes and offer containers */
#ck-app [class*="bg-client-primary-light"] { background-color: #292524 !important; }
#ck-app .bg-opacity-5 { --tw-bg-opacity: 1 !important; }
#ck-app .ck-pause-subscription-details { border-color: #292524 !important; color: #a8a29e !important; }
#ck-app .ck-pause-subscription-details b { color: #fafaf9 !important; }
#ck-app .active-discount-disclaimer { color: #a8a29e !important; background-color: #292524 !important; }
#ck-app .ck-step-body li, #ck-app .ck-step-body label { color: #a8a29e !important; }

/* Brand color overrides */
#ck-app .h-14.rounded-t-lg { background-color: #292524 !important; }
html body #ck-app .bg-client-primary { background-color: #f97316 !important; }
html body #ck-app .text-client-primary { color: #f97316 !important; }
html body #ck-app .text-client-primary-middle { color: #f97316 !important; opacity: 0.4 !important; }
html body #ck-app .text-client-primary-light { color: #a8a29e !important; }
html body #ck-app .border-client-primary { border-color: #f97316 !important; }
html body #ck-app .border-client-primary-light { border-color: #292524 !important; }

/* Buttons */
#ck-app .ck-primary-button { background: #f97316 !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; font-weight: 600 !important; }
#ck-app .ck-black-primary-button { background: #292524 !important; color: #d6d3d1 !important; border: 1px solid #44403c !important; border-radius: 8px !important; }
#ck-app .ck-gray-primary-button { background: #292524 !important; color: #a8a29e !important; border: 1px solid #292524 !important; border-radius: 8px !important; }
#ck-app .ck-text-button { color: #a8a29e !important; }

Dark Blurple

Inspired by the world's largest real-time community platform — elevated dark.

Dark Blurple Theme

/* ===========================================
   Dark Blurple — Elevated Dark with Violet
   =========================================== */

/* Overlay */
#ck-app .ck-background-overlay {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* Modal container */
#ck-app .ck-modal {
  background: #2f3136 !important;
  border: 1px solid #40444b !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  border-radius: 16px !important;
}

/* All step backgrounds */
#ck-app .ck-step,
#ck-app .ck-survey-step, #ck-app .ck-confirm-step, #ck-app .ck-freeform-step,
#ck-app .ck-pause-step, #ck-app .ck-discount-step, #ck-app .ck-contact-step,
#ck-app .ck-redirect-step, #ck-app .ck-complete-step, #ck-app .ck-progress-step {
  background: #2f3136 !important;
}

/* Header, body, footer */
#ck-app .ck-step-header { background: #2f3136 !important; border-bottom: 1px solid #36393f !important; }
#ck-app .ck-step-header-text { color: #ffffff !important; }
#ck-app .ck-step-description-text { color: #b9bbbe !important; }
#ck-app .ck-step-body { background: #2f3136 !important; color: #b9bbbe !important; }
#ck-app .ck-step-footer { background: #2f3136 !important; border-top: 1px solid #36393f !important; }

/* Form elements */
#ck-app select,
#ck-app input,
#ck-app textarea {
  background-color: #36393f !important;
  color: #ffffff !important;
  border-color: #4f545c !important;
}
#ck-app select:focus,
#ck-app input:focus,
#ck-app textarea:focus {
  border-color: #5865f2 !important;
  box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.3) !important;
  outline: none !important;
}
#ck-app ::placeholder { color: #72767d !important; }
#ck-app option { background-color: #36393f !important; color: #ffffff !important; }

/* Text color overrides */
#ck-app .text-gray-900, #ck-app .text-gray-800 { color: #ffffff !important; }
#ck-app .text-gray-700, #ck-app .text-gray-600, #ck-app .text-gray-500 { color: #b9bbbe !important; }
#ck-app .text-brand-black { color: #ffffff !important; }
#ck-app .text-opacity-60, #ck-app .text-opacity-80, #ck-app .text-opacity-90 {
  --tw-text-opacity: 1 !important;
}

/* Info boxes and offer containers */
#ck-app [class*="bg-client-primary-light"] { background-color: #36393f !important; }
#ck-app .bg-opacity-5 { --tw-bg-opacity: 1 !important; }
#ck-app .ck-pause-subscription-details { border-color: #40444b !important; color: #b9bbbe !important; }
#ck-app .ck-pause-subscription-details b { color: #ffffff !important; }
#ck-app .active-discount-disclaimer { color: #b9bbbe !important; background-color: #36393f !important; }
#ck-app .ck-step-body li, #ck-app .ck-step-body label { color: #b9bbbe !important; }

/* Brand color overrides */
#ck-app .h-14.rounded-t-lg { background-color: #36393f !important; }
html body #ck-app .bg-client-primary { background-color: #5865f2 !important; }
html body #ck-app .text-client-primary { color: #5865f2 !important; }
html body #ck-app .text-client-primary-middle { color: #5865f2 !important; opacity: 0.4 !important; }
html body #ck-app .text-client-primary-light { color: #b9bbbe !important; }
html body #ck-app .border-client-primary { border-color: #5865f2 !important; }
html body #ck-app .border-client-primary-light { border-color: #40444b !important; }

/* Buttons */
#ck-app .ck-primary-button { background: #5865f2 !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; font-weight: 600 !important; }
#ck-app .ck-black-primary-button { background: #36393f !important; color: #ffffff !important; border: 1px solid #40444b !important; border-radius: 8px !important; }
#ck-app .ck-gray-primary-button { background: #36393f !important; color: #b9bbbe !important; border: 1px solid #40444b !important; border-radius: 8px !important; }
#ck-app .ck-text-button { color: #b9bbbe !important; }

Light Clean

A polished light theme with soft borders and subtle shadows.

Light Clean Theme

/* ===========================================
   Light Clean — Polished Light
   =========================================== */

/* Overlay */
#ck-app .ck-background-overlay {
  background: rgba(15, 23, 42, 0.4) !important;
  backdrop-filter: blur(4px) !important;
}

/* Modal container */
#ck-app .ck-modal {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
  border-radius: 16px !important;
}

/* All step backgrounds */
#ck-app .ck-step,
#ck-app .ck-survey-step, #ck-app .ck-confirm-step, #ck-app .ck-freeform-step,
#ck-app .ck-pause-step, #ck-app .ck-discount-step, #ck-app .ck-contact-step,
#ck-app .ck-redirect-step, #ck-app .ck-complete-step, #ck-app .ck-progress-step {
  background: #ffffff !important;
}

/* Header, body, footer */
#ck-app .ck-step-header { background: #ffffff !important; border-bottom: 1px solid #f1f5f9 !important; }
#ck-app .ck-step-header-text { color: #0f172a !important; }
#ck-app .ck-step-description-text { color: #64748b !important; }
#ck-app .ck-step-body { background: #ffffff !important; color: #334155 !important; }
#ck-app .ck-step-footer { background: #ffffff !important; border-top: 1px solid #f1f5f9 !important; }

/* Form elements */
#ck-app select,
#ck-app input,
#ck-app textarea {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}
#ck-app select:focus,
#ck-app input:focus,
#ck-app textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
  outline: none !important;
}
#ck-app ::placeholder { color: #94a3b8 !important; }
#ck-app option { background-color: #ffffff !important; color: #0f172a !important; }

/* Brand color overrides */
html body #ck-app .bg-client-primary { background-color: #6366f1 !important; }
html body #ck-app .text-client-primary { color: #6366f1 !important; }
html body #ck-app .text-client-primary-middle { color: #6366f1 !important; opacity: 0.3 !important; }
html body #ck-app .text-client-primary-light { color: #64748b !important; }
html body #ck-app .border-client-primary { border-color: #6366f1 !important; }
html body #ck-app .border-client-primary-light { border-color: #e2e8f0 !important; }
#ck-app [class*="bg-client-primary-light"] { background-color: #eef2ff !important; }

/* Info boxes and offer containers */
#ck-app .ck-pause-subscription-details { border-color: #e2e8f0 !important; color: #64748b !important; }
#ck-app .ck-pause-subscription-details b { color: #0f172a !important; }
#ck-app .active-discount-disclaimer { color: #64748b !important; background-color: #f8fafc !important; }
#ck-app .ck-step-body li, #ck-app .ck-step-body label { color: #334155 !important; }

/* Buttons */
#ck-app .ck-primary-button { background: #6366f1 !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; font-weight: 600 !important; }
#ck-app .ck-text-button { color: #6366f1 !important; }
#ck-app .ck-black-primary-button { background: #f8fafc !important; color: #334155 !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; }
#ck-app .ck-gray-primary-button { background: #f1f5f9 !important; color: #475569 !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; }

The templates above override all brand colors (CTA buttons, header bar icons, survey borders, offer containers) using html body #ck-app selectors for specificity. They also override .text-brand-black, .text-opacity-*, and [class*="bg-client-primary-light"] for dark background legibility. If you build a custom theme, include both the brand color overrides and the text color overrides sections or elements may remain in your dashboard's default brand color.

Quick Implementation Guide

Add one of the templates above to your site by injecting a <style> tag anywhere on the page where the Churnkey embed loads. The CSS will automatically apply to the Cancel Flow modal.

<style>
  /* Paste your chosen template CSS here */
</style>

Using an AI coding assistant

If you use an AI coding assistant (Claude Code, Cursor, Copilot, etc.), paste the following prompt to have it wire up the CSS for you:

I need to add custom CSS styling to my Churnkey Cancel Flow embed.

Here is the CSS template I want to apply:

<PASTE YOUR CHOSEN CSS TEMPLATE HERE>

Instructions:
1. Find where the Churnkey embed script loads in my codebase
   (look for `churnkey.init`, `assets.churnkey.co`, or `window.churnkey`).
2. Add a <style> tag on the same page, BEFORE the Churnkey script,
   containing the CSS above.
3. If my app uses a framework (React, Vue, Next.js, etc.), inject
   the styles using the idiomatic approach for that framework
   (e.g., a global stylesheet import or a <style> block in the layout).
4. Do not modify the Churnkey embed script itself.

Reference docs: https://docs.churnkey.co/cancel-flows/custom-styling

Configuration Options

Additional details for all of the following options are included below.

Managed Email Flow

Our managed email based setup takes care of customer verification for you with an email verification code.