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:
| Color | Purpose |
|---|---|
| Primary Color | Main brand color — used for headers, buttons, and accents |
| Secondary Color | Supporting color — used for backgrounds and secondary elements |
| Accent Color | Highlight color — used for links, call-to-action elements, and hover states |
| Text Color | Main text color — used for body text and headings |
| Light Text Color | Lighter 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
| Field | Description |
|---|---|
| Logo URL | Paste 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 URL | Paste a URL to your favicon. This appears in the browser tab when visitors view your Helpcenter. |
3. Content
| Field | Description |
|---|---|
| Footer Text | Custom text displayed in the footer of your Helpcenter. For example: "© 2026 Your Company. All rights reserved." |
| Custom CSS | Advanced: add custom CSS rules to further customize the appearance beyond the basic color settings. Use standard CSS syntax. |
Saving Branding
- Fill in your desired settings
- Click "Save Branding" (blue button)
- A green success message appears: "Branding updated successfully!"
- 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; }
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