Scope
How to edit the look and feel of your Chargebee Retention Pages?
How to customize the appearance of the Chargebee Retention customer page?
How to edit the font and buttons on the Chargebee Retention page?
Summary
App-level configurations
You can configure your Chargebee Retention experiences to match your company branding guidelines from the Manage Branding option.
We have 9 tools available for customization.
Solution
Logo
Make your first edits inside the Logo tab.
The Logo tab applies changes to the top element of the page that contains your logo.
Upload your logo first in a supported format. Acceptable file types are SVG, PNG, or JPG. If you upload a PNG or JPG you'll have the option to add compression to your logo to optimize the experience for your canceler. 
Note: PNGs will lose transparency if compressedSet the width of your logo if needed in accordance with your brand guidelines. The image will scale automatically and retain the original proportions. The max width allowed is 500px.
Now assign a position and header type. Choose between left or centered logo placement.
If unchanged the underline will take on the headline/accent color from the Style tab. If you would like a different color for the underline go ahead and add it here.
You'll also have the option of using a full-width header. If the full-width header option is chosen your header's background will take on your accent color just as it did with the underline. If that background color doesn't work with your logo feel free to override it using the header background selector.
Style
The style tab includes the top level of styles that will be applied to all elements in the cascade.
Note: Error message colors for required fields are also inside the Style tab
Text & Font
Next up take a look at the Text & Font tab. This tab applies attributes to all text on the page first before any button or headline changes are referenced.
You can choose a font from our list of standard fonts or add a link to a hosted CSS file. So long as the CSS file is valid you'll be able to reference your fonts from within the branding manager.
Also, take moment to set the weight and size of your page text. Normal or bold weights are available. Font size can be any valid size attribute such as px, em, or rem.
Note: Most changes you make inside the branding tool refresh your preview instantly. If you choose to add an external CSS file you'll need to publish your branding changes so the branding manager can load your stylesheet. After you've published your changes and reopen the branding manger, your styles will be available to you.
Buttons
At this point, your Buttons are taking on the styles applied in the Style tab but additional overrides are possible using our simple tool.
You have the option to change the corner radius, font, background color, font size, and text transform. Styles applied here take preference over your selections applied in the Style tab. You also have the ability to change the cancel button order and color styles.
With a few simple tweaks, you can change the look and feel of your buttons to match your branding guidelines.
Headlines
Similar to the button overrides, styles can be applied directly to the Headlines of loss aversion cards and modals to take on a different look from the styles set in the Style tab.
In this first example, the headline text of this modal is taking on our headline/accent color and font style selections from before.
In our next example, we've modified the text color to match the body text and transformed the headlines to uppercase. This effect would apply to all modals and loss aversion cards in one easy step.
Text Area
The Text area tab allows you to change the corner style for text input boxes located in the other selector or additional feedback boxes.
By default, text areas will take on the corner rounding from our previous corner selection inside of General. In this example, we've eliminated the radius so our input boxes have square corners.
Survey
In the Survey group, you'll have the ability to edit the labels for required fields and error messages that apply to all of your experiences.
Dictionary
Use the Dictionary tab to change the text from the default of none and others when inside the competition question.
Custom CSS
Finally, the Custom CSS section allows you to insert your own styles that will be injected when the experience is generated. It's recommended to first use our WYSIWYG editors to brand your pages but if you've made your way through the manager and still find the need to adjust your page styles, head on over to our CSS reference where you'll find a library of all of the classes that exist in experience files.
Do you want shadows on your Loss Aversion cards but not on your buttons? Simply add an override to eliminate the shadows on all page buttons. The example below would eliminate shadows on all of the page's Calls To Action.
Does your branding guideline call for borders rather than shadows? You can easily add that with a bit of custom CSS.
The possibilities to style your page are essentially limitless with the Chargebee Retention branding manager. If you find something you can't adjust with our tools, send us a message.
Related Articles
How should I go about setting up my first experiment in Chargebee Retention?
What are the estimated engineering time & efforts while configuring Chargebee Retention?