Styling and Custom CSS
The embedded Churnkey widget is easily customizable.

Updating the embed with your own styles

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.

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.
1
#ck-app h1 {
2
color: black;
3
background: yellow;
4
font-style: italic;
5
}
Copied!
Here's how that looks in Chrome dev tools.

Classes Available

If you choose, you can easily overwrite the base styles on the Churnkey offboarding flow. Below is a list of classes that are available for custom styling with your own CSS.
1
# General Components
2
.ck-style # applies to everything
3
.ck-modal # the embed pop-up
4
.ck-background-overlay # the partially transparent overlay
5
.ck-step # a wrapper around all content
6
7
# specific steps in flow
8
.ck-pause-step
9
.ck-discount-step
10
.ck-contact-step
11
.ck-redirect-step
12
.ck-survey-step
13
.ck-freeform-step
14
.ck-confirm-step
15
16
# while a customer subscription is being modified
17
.ck-progress-step
18
19
# once flow is complete - after discount, pause, cancel
20
.ck-complete-step
21
22
# if error is shown at any point (hopefully customers will never see this)
23
.ck-error-step
24
25
# Step components
26
.ck-step-header
27
.ck-step-header-text
28
.ck-brand-image
29
.ck-brand-image-header
30
.ck-step-description-text
31
.ck-step-body
32
.ck-step-footer
33
34
# Button variations
35
.ck-button
36
.ck-text-button # custom color
37
.ck-black-text-button
38
.ck-primary-button # custom color
39
.ck-black-primary-button
40
.ck-gray-primary-button
41
Copied!
Last modified 3mo ago