Docs
Got an eye for design? Here are all the styling options available to you within Chargebee Retention cancel experiences.
When all is said and done, here's the full page view of the Chargebee Retention Page:
You can customize styles in the branding manager.
Customizations live at the the app level and apply to all experiences within an app.
Configure your Retention experiences to match your company branding guidelines. Within the branding manager we have 9 tools available for customization.
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.
Compressing PNGs can result in the loss of transparency.
Set 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.
The style tab includes the top level of styles that will be applied to all elements in the cascade.
Error message colors for required fields are also inside the Style tab.
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.
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.
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 perference 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.
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 the 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.
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 Style. In this example we've eliminated the radius so our input boxes have square corners.
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.
Use the Dictionary tab to change the text from the default of none and other when inside the competition question.
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!
