Custom Branding

Your cancel flow should feel like part of your portal

When a customer clicks cancel in your customer portal, the flow opens on a page Churn Buster hosts. Branding is what makes that handoff feel like the next step in your experience instead of a detour to someone else's site.

During setup we copy your logo and colors from your website, or ask your team for them, and you review a preview before anything goes live. From there you can adjust as much or as little as you like.

Start with the Style Editor

The Style Editor sits at the top of the Cancel Flow Editor. It's the quickest way to set the colors and fonts customers see. Click Preview to see the flow the way a customer sees it after clicking cancel.

Custom CSS handles everything else

For finer control, you can add custom CSS in the Cancel Flows section of the Branding page. It reaches any element on the page, including backgrounds, text, buttons, and images.

These are some of the changes teams ask for.

• Turning the "Nevermind" link that keeps a customer subscribed into a button as prominent as the next step.
• Resizing the logo or changing the page background.
• Hiding a specific offer button, or removing the default cropping and shadow on offer images.

Style Editor settings take priority over custom CSS for the same element. If a CSS change doesn't show up, the Style Editor is probably already setting that property. Change it there, or ask us to apply a more specific rule. If you'd rather not touch CSS, we can apply the styling for you.

Change the words as well as the look

Branding covers copy too. You edit cancel reasons and offer messaging in the Cancel Flow Editor, so the flow speaks in the same voice as the rest of your site. Button and link labels can change as well, such as renaming the final button to "Cancel". If a label isn't editable from the editor, ask us and we'll update it. Cancel Reasons and Deflections cover writing each piece.

Flows can also run in languages other than English. If you serve customers in more than one language, raise it during setup and we'll plan the translated copy with you, including how each customer reaches the right version.

CSS for the most common changes

These examples target the default flow layout. Paste the ones you need into the Cancel Flows section of the Branding page and swap in your own colors.

Logo size

img.logo { max-width: 100px !important; }

Text color across the page

h2, .wysiwyg *, label {
  color: #483729 !important;
}

Feedback step labels

label {
  font-size: 16px !important;
  font-weight: 600 !important;
}

Background color

body.cancel_sessions {
  background-color: #EAE8E7 !important;
}

Offer button colors

button.accept_offer {
  background-color: #7EC6BC !important;
  color: #48392b !important;
}

Cancel button colors

button[name="page1_cancel_button"],
button[name="page2_cancel_button"] {
  background-color: #DB7623 !important;
  color: #FFFFFF !important;
}

Nevermind link color

button[name="page1_nevermind_button"],
button[name="page2_nevermind_button"] {
  color: #483729 !important;
}

Turn the Nevermind link into a button

button[name="page1_nevermind_button"],
button[name="page2_nevermind_button"],
button[name="page1_nevermind_button"]:hover,
button[name="page2_nevermind_button"]:hover {
  background-color: #7EC6BC !important;
  color: #48392b !important;
  padding: 12px 24px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
}

Remove default image cropping and shadow

.offer_contents .asset-container {
  height: auto !important;
}
.offer_contents .asset-container img {
  box-shadow: none !important;
  object-fit: contain !important;
  height: auto !important;
  position: relative !important;
}

Hide the first offer button on page 1

.offers_container .offer:nth-child(1) button.accept_offer { display: none }

Hide the second offer button on page 1

.offers_container .offer:nth-child(2) button.accept_offer { display: none }

Where to go next

Branding is one piece of a flow, and each of the others has its own page.

• Overview, how exit surveys, deflections, and Smart Offers fit together.
• Getting Started, what setup looks like and how flows go live.
• Deflections, the value reminders and easy ways to put off cancelling.
• Cancel Reasons, designing survey questions that produce a usable signal.
• Targeted Offers, matching offers to the reasons customers give.
• Segmentation, running different flows for different customer types.
• Analytics & Insights, measuring saves, offers, and segments over time.