Team
Launch LogCancel Flows
Quick Start GuideFurther ConfigurationCustom StylingMulti-Language SupportEmail-Verified Cancel FlowA/B TestingCancel Flow TestingPause WallFailed Payment Recovery
Payment RecoveryCampaign CustomizationFailed Payment WallReactivations
ReactivationsCampaign Customization GuideCustomer Health
Customer HealthData Integrations
Data APIWebhooksEvent TrackingBilling Providers
Payment Provider OverviewSlackStripeChargebeePaddle ClassicPaddle BillingBraintreeZuoraSupport
FAQsCustom Styling for Your Cancel Flow
By default, the Churnkey widget uses some basic styles, but you can quickly override them with your own CSS by adding new rules with the parent #ck-app
selector. To avoid conflicts with your site's existing CSS, you should combine this top level parent selector with highly specific descendant selectors for the child element you want to change.
If there are conflicts between your existing CSS and the default Churnkey styles, you can fix them by simply overriding the behavior you don't want by using a highly targeted #ck-app descendant selector.
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-pause-subscription-details
.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.