Customizing Branding

​

Overview

• Company name - Appears in dashboard header and reports
• Logo - Your agency logo throughout the platform
• Primary color - Buttons, headers, and accents
• Contact information - Website and support email in reports

• Generated PDF reports (client-facing)
• Dashboard interface (your experience)
• Report footers and headers

​

Prerequisites

​

Accessing Branding Settings

​

Configuration Options

​

Company Information

​

Agency Name (Required)

​

Website (Optional)

​

Support Email (Optional)

​

Visual Branding

​

Company Logo (Optional)

1. Click the upload area or drag and drop an image
2. Wait for upload to complete
3. Preview appears in the right panel
4. Hover over preview and click Remove to delete

• File must be an image type
• Size must be under 2 MB
• Invalid files show error toast

​

Primary Color (Required)

​

Live Preview

• Updates in real-time as you make changes
• Shows how your logo and colors appear together
• Preview includes sample report header and dashboard elements
• Only visible when white-label mode is enabled

​

Saving Your Branding

​

Validation Rules

• Error message appears below the field in red
• Toast shows total number of errors
• Form cannot be saved until errors are fixed

​

How Branding is Applied

​

Database Storage

model User {
  id                String   @id @default(cuid())
  email             String   @unique
  whiteLabelEnabled Boolean  @default(false)
  companyName       String?
  primaryColor      String   @default("#8B5CF6")
  logo              String?  // Base64-encoded image
  website           String?
  supportEmail      String?
  // ... other fields
}

​

API Endpoint

{
  "companyName": "Acme Digital",
  "website": "https://acmedigital.com",
  "supportEmail": "[email protected]",
  "primaryColor": "#3B82F6",
  "logo": "data:image/png;base64,...",
  "whiteLabelEnabled": true
}

​

Report PDF Generation

1. Fetches your branding from the User model
2. Checks white-label access using canUseWhiteLabel() function
3. If white-label enabled:
   • Uses your company name in headers
   • Applies your primary color to charts and accents
   • Includes your logo in header/footer
   • Shows website and support email in footer
4. If white-label disabled:
   • Uses “Reportr” branding (default)
   • Shows Reportr logo and colors

​

White-Label Access Logic

export function canUseWhiteLabel(user: any): boolean {
  // PRIORITY 1: Explicitly enabled
  // (Paid add-on or included in plan)
  if (user.whiteLabelEnabled === true) {
    return true;
  }
  
  // PRIORITY 2: Trial users can test white-label
  const isInTrial = user.trialStartDate && 
                    user.trialEndDate && 
                    new Date() < user.trialEndDate;
  
  if (isInTrial && ['STARTER', 'PROFESSIONAL', 'AGENCY'].includes(user.plan)) {
    return true;
  }
  
  // All other cases: no access
  return false;
}

​

Troubleshooting

​

Cannot Enable White-Label Toggle

• You don’t have white-label access on your current plan
• Click the Upgrade or Add White-Label button
• Trial users should have access - check trial hasn’t expired
• Verify whiteLabelEnabled field in database

​

Logo Not Appearing in Reports

1. White-label not enabled:
   • Check the toggle is ON
   • Verify whiteLabelEnabled: true in database
2. Logo file issues:
   • Logo may have failed to upload (check for base64 data in database)
   • Re-upload logo and save settings
   • Try a smaller image file
3. Plan restriction:
   • Verify you have active white-label access
   • Check trial hasn’t expired
   • Confirm subscription is active

​

Colors Not Updating

1. Ensure you clicked Save Settings after selecting color
2. Hard refresh browser (Cmd/Ctrl + Shift + R)
3. Check database primaryColor field updated
4. Generate a new report to see changes (existing reports retain old branding)

​

“Max 50 characters” Error

• Company name is limited to 50 characters for layout reasons
• Use abbreviations if needed (e.g., “Acme Digital Marketing Agency” → “Acme Digital”)
• Character counter shows remaining characters

​

Save Button Disabled

1. White-label not enabled: Toggle must be ON first
2. No changes made: Button may be disabled if nothing changed
3. Validation errors: Fix red error messages first
4. Currently saving: Wait for previous save to complete

​

Best Practices

​

Logo Guidelines

• Use square or circular logos (1:1 aspect ratio)
• Upload high-resolution images (512x512 or larger)
• Use PNG with transparent background for best results
• Keep file size under 500 KB for fast loading

• Use wide/horizontal logos (they’ll be cropped)
• Upload low-resolution images (will appear pixelated)
• Use images with text that becomes unreadable when small

​

Color Selection

• Choose colors with good contrast against white backgrounds
• Test color in preview before saving
• Use your brand’s official HEX code for consistency
• Consider accessibility (avoid low-contrast colors)

• Use very light colors (poor visibility)
• Choose colors that clash with report content
• Change colors frequently (confuses clients)

​

Company Information

• Use your official registered business name
• Include professional support email
• Keep contact information up-to-date
• Test email and website links after saving

• Use personal emails (unprofessional)
• Include “Inc.”, “LLC” unless part of brand identity
• Use placeholder or fake information

​

Next Steps