New in Chargebee: Explore Reveal and understand your payment performance end-to-end.Try Now
Docschargebee docs
HomeBillingPaymentsRevRecGrowthReveal
Support

Getting Started

  • Overview
  • Installation Guide

Plays

  • Overview
  • Managing Plays

Offers

  • In-app Offers
  • Pricing Tables

Experiences

  • Branding
  • Cancel Pages
  • Loss Aversion Cards
  • Survey Reasons
  • Redirect Pages

People

  • Managing Audiences
  1. Growth
  3. Experiences
  4. Branding
Chargebee Retention is now part of Chargebee Growth.New customers can find everything you need in Chargebee Growth documentation.Existing Chargebee Retention customers can continue to access the legacy Chargebee Retention documentationhere.
  1. Growth
  3. Experiences
  4. Branding

Overview

The Branding tab in Chargebee Growth allows you to customize the look and feel of your Growth experiences to align with your company’s brand guidelines. The Branding Manager enables you to deliver fully branded, consistent experiences across your subscriber journey, without requiring developer involvement for most styling needs.

Branding configurations are applied at the app level, meaning any changes you make will automatically apply across all experiences within that Growth application.

Below is an example of a fully branded Chargebee Growth page:

You can manage all visual customizations by navigating to the Branding tab. As you update the configurations, you can preview the changes in real time for both the Cancel page and the Pricing table.

image

Branding Configurations

The Branding Manager provides multiple configuration options to help you align your Growth experiences with your brand identity.

The following customization tools are available:

  • Logo
  • Style
  • Text & Font
  • Buttons
  • Headlines
  • Text area
  • Survey
  • Dictionary
  • Custom CSS

Logo

Use the Logo tab to configure the header section of your Growth pages.

image

You can upload your brand logo in one of the following supported formats:

  • SVG
  • PNG
  • JPG

If you upload a PNG or JPG file, you may enable compression to optimize load performance.

Note

Compressing PNG files may remove transparency.

You can define the logo width to match your brand guidelines. The image will automatically scale proportionally. The maximum supported width is 500px.

You can also configure:

  • Logo alignment - Left or Centered
  • Header style - Underline or Full-width header

If left unchanged, the underline will inherit the accent colour configured in the Style tab. You may override this colour if required.

If you select the Full-width header option, the header background will inherit the accent colour. You can override the background colour if it does not complement your logo.

Style

The Style tab controls global styling attributes that cascade across the entire experience.

This includes:

  • Accent colour
  • Background colour
  • Base corner radius
  • Default styling behaviors
image

Changes made here serve as the foundation for other visual elements unless overridden in specific sections.

Note

Required field error message colours are also configured within the Style tab.

Text & Font

The Text & Font tab controls typography settings across your Growth experiences.

You can:

  • Select from standard fonts
  • Add a link to a hosted CSS file to use custom fonts
  • Configure font size (px, em, rem)
  • Set font weight (Normal or Bold)
image

If you add an external CSS file, you must Publish your branding changes before the fonts become available.

Note

Most changes in the Branding Configurations update in real time within the preview. External CSS files require publishing before they can be previewed.

Buttons

Buttons inherit base styling from the Style tab but can be further customized within the Buttons section.

You can configure:

  • Corner radius
  • Background colour
  • Font style and size
  • Text transformation (e.g., uppercase)
  • Button order (e.g., primary vs. secondary action placement)
  • Cancel button styling
image

Settings applied here override global Style configurations.

Headlines

The Headlines tab allows you to override styling for headings used across modals, cards, and key content sections.

You can configure:

  • Text colour
  • Font style
  • Text transformation (e.g., uppercase)
image

These changes apply consistently across all applicable components within your Growth experiences.

Text Area

The Text Area tab controls the styling of input fields, such as:

  • Additional feedback boxes
  • “Other” selection fields
image

By default, input fields inherit the corner radius defined in the Style tab. You can override this setting to match your brand (e.g., square corners instead of rounded).

Survey

The Survey section allows you to configure labels and messaging related to required fields and validation errors across all experiences.

image

These settings ensure consistency in user prompts and form behavior.

Dictionary

Use the Dictionary tab to customize default text values such as:

  • “Other”
  • “None”
image

This is particularly useful for standardizing terminology used in survey questions across your Growth experiences.

Custom CSS

The Custom CSS section allows you to apply advanced styling customizations beyond the available configuration tools.

Custom CSS is injected into the experience at runtime and can be used to:

  • Add or remove shadows
  • Apply borders instead of shadows
  • Override specific component styles
  • Apply advanced brand styling rules

We recommend using the built-in configuration tools first. If further customization is required, refer to the CSS reference documentation for a complete list of supported classes.

image

Custom CSS gives you maximum flexibility to fine-tune your Growth experiences while maintaining brand consistency. The possibilities to style your page are essentially limitless with Chargebee Growth Branding.

Was this article helpful?