Cancel Flows
Custom Styling
Brand your Churnkey cancel flow with your own CSS
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.