Branding Module Documentation
Table of Contents
- Module Overview (Technical)
- Module Overview (Commercial/Business)
- Module Overview (End User/Administrator)
- Configuration Sections
- Settings Reference
- Common Scenarios & Examples
- Limitations & Important Notes
- Troubleshooting Tips
- Glossary
---
1. Module Overview (Technical)
What Is Branding?
Branding is a white-labeling module that customizes the visual identity of each tenant. It manages logos, colors, login page design, and application information to match corporate branding.
Architecture
┌─────────────────────────────────────────────────────────────────┐
│ Branding Architecture │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Branding Configuration │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ Tenant: Acme Corp │ │
│ │ │ │
│ │ App Information: │ │
│ │ ├─ App Name: Acme PBX │ │
│ │ ├─ Welcome Message: Welcome to Acme │ │
│ │ └─ Footer: © 2025 Acme Corp │ │
│ │ │ │
│ │ Colors: │ │
│ │ ├─ Primary: #1E40AF │ │
│ │ └─ Secondary: #64748B │ │
│ │ │ │
│ │ Logos: │ │
│ │ ├─ Desktop Light: acme-logo.png │ │
│ │ ├─ Desktop Dark: acme-logo-dark.png │ │
│ │ ├─ Mobile Light: acme-mobile.png │ │
│ │ ├─ Mobile Dark: acme-mobile-dark.png │ │
│ │ ├─ Favicon Light: favicon.ico │ │
│ │ └─ Favicon Dark: favicon-dark.ico │ │
│ │ │ │
│ │ Login Design: │ │
│ │ ├─ Background Color: #0F172A │ │
│ │ ├─ Background Image: login-bg.jpg │ │
│ │ ├─ Form Background: rgba(...) │ │
│ │ └─ Button Color: #3B82F6 │ │
│ │ │ │
│ │ Notifications: │ │
│ │ ├─ Toast Success: #10B981 │ │
│ │ ├─ Toast Error: #EF4444 │ │
│ │ ├─ Toast Warning: #F59E0B │ │
│ │ └─ Toast Info: #3B82F6 │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ Applied to │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ User Interface │ │
│ │ │ │
│ │ ├─ Login page │ │
│ │ ├─ Application header │ │
│ │ ├─ Browser favicon │ │
│ │ ├─ Mobile PWA icons │ │
│ │ └─ Color scheme throughout │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Key Tables
| Table | Purpose |
|---|
public.branding | Branding configurations |
Key Files
| File | Description |
|---|
modules/branding/ | Frontend module | |
/uploads/branding/ | Logo and image storage |
2. Module Overview (Commercial/Business)
Business Value
Branding provides complete white-labeling:
| Without Branding | With Branding |
|---|
| Generic interface | Custom identity | |
| Default colors | Corporate colors | |
| Platform logos | Customer logos | |
| Same for all | Per-tenant customization |
Use Cases
- Reseller White-Label
- Rebrand for each customer
- Hide platform identity
- Corporate Identity
- Match company colors
- Display company logo
- Multi-tenant Differentiation
- Unique look per tenant
- Easy tenant identification
- Professional Appearance
- Custom login page
- Branded experience
Feature Highlights
| Feature | Benefit |
|---|
| Light/Dark Logos | Theme support | |
| Desktop & Mobile | Responsive branding | |
| Favicons | Browser identity | |
| Color Customization | Match corporate colors | |
| Login Design | Custom welcome pages | |
| Per-Tenant | Multi-tenant branding |
3. Module Overview (End User/Administrator)
What Can You Do?
- Set application name
- Upload logos (light/dark modes)
- Upload mobile logos
- Upload favicons
- Set primary and secondary colors
- Customize login page design
- Customize notification toast colors (Success, Error, Warning, Info)
- Set welcome message and footer
Branding Interface
┌─────────────────────────────────────────────────────────────────┐
│ Branding │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Customize your tenant's visual identity and interface │
│ │
│ [🔍 Search tenants...] │
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ Tenant Name │ Branding │ Status │ Actions │ │
│ ├─────────────────┼────────────┼───────────┼────────────────┤ │
│ │ Acme Corp │ [Logo] │ ● Active │ [Configure] │ │
│ │ Beta Inc │ [Default] │ ○ Inactive│ [Configure] │ │
│ │ Gamma LLC │ [Logo] │ ● Active │ [Configure] │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ App Information │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Application Name: [Acme PBX ] │
│ The name of your application as it appears │
│ │
│ Welcome Message: [Welcome to Acme Communications] │
│ Welcome message shown to users when they log in │
│ │
│ Description: [Enterprise phone system ] │
│ Brief description of your application │
│ │
│ Footer Text: [© 2025 Acme Corp. All rights reserved.] │
│ Footer text displayed at the bottom │
│ │
│ Primary Color: [#1E40AF ] [🎨] │
│ Primary color used for buttons, links, and highlights │
│ │
│ Secondary Color: [#64748B ] [🎨] │
│ Secondary color used for backgrounds │
│ │
└─────────────────────────────────────────────────────────────────┘
Logos & Icons Section
┌─────────────────────────────────────────────────────────────────┐
│ Logos & Icons │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ▼ Desktop Logos │
│ │
│ Logo (Light Mode) Logo (Dark Mode) │
│ ┌────────────────┐ ┌────────────────┐ │
│ │ │ │ │ │
│ │ [ACME] │ │ [ACME] │ │
│ │ │ │ (white text) │ │
│ └────────────────┘ └────────────────┘ │
│ [Change] [Remove] [Change] [Remove] │
│ 200x200px or larger 200x200px or larger │
│ │
│ ──────────────────────────────────────────────────────────────│
│ │
│ ▼ Mobile Logos & Favicons │
│ │
│ Mobile (Light) Mobile (Dark) Favicon (Light) Favicon (Dark) │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ [A] │ │ [A] │ │ [A] │ │ [A] │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ 512x512px 512x512px 32x32px 32x32px │
│ │
└─────────────────────────────────────────────────────────────────┘
Login Design Section
┌─────────────────────────────────────────────────────────────────┐
│ Login Design │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Background Color: [#0F172A ] [🎨] │
│ Background color for the login page │
│ │
│ Font Color: [#FFFFFF ] [🎨] │
│ Font color for text on the login page │
│ │
│ Form Background: [#1E293B80 ] [🎨] │
│ Background color for the login form (with alpha) │
│ │
│ Submit Button Color: [#3B82F6CC] [🎨] │
│ Color for the submit button (with alpha) │
│ │
│ Add-ons Menu Color: [#47556980] [🎨] │
│ Color for the add-ons menu │
│ │
│ Disable Background Image: ☐ │
│ │
│ Background Image: │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ [Background Image Preview] │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ [Change] [Remove] │
│ │
│ Login Logo: │
│ ┌────────────────┐ │
│ │ [ACME] │ │
│ └────────────────┘ │
│ [Change] [Remove] │
│ │
│ [Save] [Cancel] │
│ │
└─────────────────────────────────────────────────────────────────┘
Quick Tips
TIP
Light & Dark: Upload both versions for theme support.
TIP
Recommended Sizes: Follow size guidelines for best quality.
NOTE
Alpha Colors: Use hex with alpha (e.g., #3B82F680) for transparency.
---
4. Configuration Sections
| Field | Description |
|---|
| Application Name | Display name | |
| Welcome Message | Login greeting | |
| Description | App description | |
| Footer Text | Footer content | |
| Primary Color | Main accent color | |
| Secondary Color | Background color |
Logos & Icons
| Asset | Light Mode | Dark Mode | Size |
|---|
| Desktop Logo | ✓ | ✓ | 200x200px+ | |
| Mobile Logo | ✓ | ✓ | 512x512px | |
| Favicon | ✓ | ✓ | 32x32px |
Login Design
| Field | Description |
|---|
| Background Color | Page background | |
| Font Color | Text color | |
| Form Background | Login form background | |
| Submit Button | Button color | |
| Add-ons Menu | Menu accent | |
| Background Image | Optional image | |
| Login Logo | Login-specific logo |
5. Settings Reference
Recommended Image Sizes
| Asset | Size | Format |
|---|
| Desktop Logo | 200x200px+ | PNG, SVG | |
| Mobile Logo | 512x512px | PNG | |
| Favicon | 32x32px or 16x16px | ICO, PNG | |
| Background | 1920x1080px | JPG, PNG |
| Format | Example | Use |
|---|
| Hex 6-digit | #3B82F6 | Solid colors | |
| Hex 8-digit | #3B82F680 | With alpha |
Alpha Values
| Alpha | Hex | Transparency |
|---|
| 100% | FF | Solid | |
| 80% | CC | Slight | |
| 50% | 80 | Half | |
| 30% | 4D | Very transparent |
6. Common Scenarios & Examples
Scenario 1: Basic Branding
- Configure Branding for tenant
- Set Application Name
- Upload light mode logo
- Set Primary Color
- Save
Scenario 2: Full White-Label
- Configure Branding
- Upload all logos (light/dark)
- Upload mobile logos
- Upload favicons
- Set all colors
- Customize login page
- Upload login background
- Save
Scenario 3: Login Page Customization
- Open Login Design section
- Set background color
- Upload background image
- Set form background with alpha
- Set button color
- Upload login logo
- Save
Scenario 4: Dark Mode Support
- Upload light mode logo
- Upload dark mode logo (inverted/light colors)
- Upload both favicon versions
- Save
- Interface switches automatically
---
7. Limitations & Important Notes
Technical Notes
NOTE
Per-Tenant: Each tenant has separate branding.
NOTE
Cache: Changes may require cache clear.
WARNING
Image Quality: Use high-resolution images.
Best Practices
- Consistent Colors: Match corporate palette
- Both Themes: Provide light and dark variants
- Proper Sizes: Follow recommended dimensions
- Test Logos: Verify on different backgrounds
- Mobile-First: Ensure mobile logos are clear
Image Guidelines
| Guideline | Recommendation |
|---|
| Format | PNG for transparency | |
| Background | Transparent preferred | |
| Quality | High resolution | |
| Size | At least recommended |
8. Troubleshooting Tips
Common Issues
| Symptom | Possible Cause | Solution |
|---|
| Logo not showing | Upload failed | Re-upload | |
| Colors wrong | Cache | Clear browser cache | |
| Blurry logo | Too small | Use larger image | |
| Dark mode broken | Missing dark logo | Upload dark variant |
Check Branding
SELECT
tenant_id,
app_name,
primary_color,
logo_light,
logo_dark
FROM public.branding
WHERE tenant_id = 'tenant-uuid';
Clear Cache
- Browser: Ctrl+Shift+R (hard refresh)
- Application: Clear app cache
- CDN: Invalidate if applicable
---
9. Glossary
| Term | Definition |
|---|
| Branding | Visual identity customization | |
| White-Label | Remove platform identity | |
| Favicon | Browser tab icon | |
| Alpha | Transparency value | |
| PWA | Progressive Web App |
Lua Script Status ℹ️
Administration Module
| Component | Status |
|---|
| Branding | ℹ️ Visual customization - no Lua handler required |
---
Documentation last updated: January 2026
