👋 How can we help?

All practical tips to grow your business with messaging.

All CollectionsProductHelpcenter Branding & Customization

Helpcenter Branding & Customization

Customize the look and feel of your Bugalou Helpcenter. Set brand colors, upload logos, add custom CSS, and configure per-domain branding.

Overview

The Branding page lets you customize the visual appearance of your Helpcenter so it matches your company's brand identity. Each domain can have its own unique branding.

Prerequisite

You need at least one configured domain before you can edit branding. If no domains exist, you'll see a message: "No domains configured yet" with a link to the Domains settings page.

Accessing Branding

Navigate to Helpcenter → Branding from the sidebar.

Selecting a Domain

If you have multiple domains, use the domain selector dropdown at the top of the page to choose which domain's branding you want to edit. Branding is saved per domain, so each domain can look different.

Branding Settings

The branding form is organized into three sections:

1. Colors

Set five color values using the color picker or by typing hex codes directly:

ColorPurpose
Primary ColorMain brand color — used for headers, buttons, and accents
Secondary ColorSupporting color — used for backgrounds and secondary elements
Accent ColorHighlight color — used for links, call-to-action elements, and hover states
Text ColorMain text color — used for body text and headings
Light Text ColorLighter text color — used for descriptions, captions, and secondary text

Each color field has a visual swatch preview next to the hex input, so you can see your chosen color immediately.

2. Images

FieldDescription
Logo URLPaste a URL to your company logo. This appears in the header of your Helpcenter. Use a hosted image URL (e.g., from Cloudinary, AWS S3, or your website).
Favicon URLPaste a URL to your favicon. This appears in the browser tab when visitors view your Helpcenter.

3. Content

FieldDescription
Footer TextCustom text displayed in the footer of your Helpcenter. For example: "© 2026 Your Company. All rights reserved."
Custom CSSAdvanced: add custom CSS rules to further customize the appearance beyond the basic color settings. Use standard CSS syntax.

Saving Branding

  1. Fill in your desired settings
  2. Click "Save Branding" (blue button)
  3. A green success message appears: "Branding updated successfully!"
  4. Changes are applied immediately to your Helpcenter

The success message auto-dismisses after 3 seconds.

Custom CSS Tips

The Custom CSS field accepts standard CSS. Some examples:

  • Change fonts: body { font-family: 'Inter', sans-serif; }
  • Adjust spacing: .article-content { padding: 2rem; }
  • Hide elements: .footer-links { display: none; }
  • Custom hover effects: a:hover { text-decoration: underline; }
💡 Tip: Use the Custom CSS field carefully. Test your changes across desktop and mobile to ensure nothing breaks.

Best Practices

  • Use your exact brand colors for a consistent customer experience
  • Host logos and favicons on a reliable CDN for fast loading
  • Use logos with transparent backgrounds (PNG or SVG) for the best result
  • Keep footer text concise — copyright notice and company name are sufficient
  • Test Custom CSS changes on a staging domain first if possible
  • Remember that branding is per-domain — configure each domain separately if needed
Back to Product