Skip to content

Whitelabel Branding Configuration

Slidefactory supports full whitelabel customization through environment variables. You can customize the application name, logos, and primary color to match your brand identity.

Environment Variables

Configure these environment variables to customize the branding:

# Client/Company Name
CLIENT_NAME="Slidefactory"                    # Default: "Slidefactory"

# Logo Paths (relative to /static/img/)
CLIENT_LOGO="/static/img/logo.png"            # Small/square logo for navigation
CLIENT_LOGO_LARGE="/static/img/logo_large.png" # Banner logo for login page

# Brand Color
CLIENT_PRIMARY_COLOR="#ee0000"                # Primary brand color (hex format)

# Optional: Custom Title and Description
CLIENT_TITLE=""                               # Browser/API title (defaults to CLIENT_NAME if empty)
CLIENT_DESCRIPTION="AI-driven presentation automation platform"

Logo Specifications

Usage: Navigation bar, chat widget header, favicon source

Requirements: - Format: PNG with transparent background (preferred) or SVG - Dimensions: Square or circular, 64x64 to 128x128 pixels recommended - File size: Keep under 50KB for optimal loading - Colors: Should work well on light and dark backgrounds

Example: 

CLIENT_LOGO="/static/img/logo.png"

Large Logo (CLIENT_LOGO_LARGE)

Usage: Login page header, welcome screens

Requirements: - Format: PNG with transparent background (preferred) or SVG - Dimensions: Variable width × 60-80px height recommended - Aspect ratio: Wide banner format (e.g., 200×60px) - File size: Keep under 100KB for optimal loading - Colors: Should be visible on white/light backgrounds

Example: 

CLIENT_LOGO_LARGE="/static/img/logo_large.png"

Color Configuration

Primary Color (CLIENT_PRIMARY_COLOR)

Usage: Applied throughout the UI: - Navigation highlights - Action buttons - Links and accents - Chat widget elements - PWA theme color (mobile browser chrome)

Requirements: - Format: Hex color code (6 digits with # prefix) - Contrast: Ensure sufficient contrast against white backgrounds (WCAG AA minimum) - Examples: - #ee0000 (Red - default) - #007ACC (Blue) - #2ECC71 (Green) - #9B59B6 (Purple)

Testing: Use a contrast checker to ensure accessibility: - WebAIM Contrast Checker - Minimum ratio: 4.5:1 for normal text, 3:1 for large text

File Placement

Option 1: Use Default Locations

Place your logo files in the default locations:

# Upload your logos
/static/img/logo.png        # Your small logo
/static/img/logo_large.png  # Your large logo

# Set environment variables (minimal)
CLIENT_NAME="Acme Corp"
CLIENT_PRIMARY_COLOR="#007ACC"

Option 2: Custom Subdirectory

Organize logos in a custom subdirectory:

# Create client directory
mkdir -p static/img/clients/acme/

# Upload your logos
/static/img/clients/acme/logo.png
/static/img/clients/acme/logo_large.png

# Set environment variables
CLIENT_NAME="Acme Corp"
CLIENT_LOGO="/static/img/clients/acme/logo.png"
CLIENT_LOGO_LARGE="/static/img/clients/acme/logo_large.png"
CLIENT_PRIMARY_COLOR="#007ACC"

Deployment Examples

Docker Compose

Add to your .env or .env.local file:

# Acme Corp Branding
CLIENT_NAME=Acme Corp
CLIENT_LOGO=/static/img/clients/acme/logo.png
CLIENT_LOGO_LARGE=/static/img/clients/acme/logo_large.png
CLIENT_PRIMARY_COLOR=#007ACC
CLIENT_DESCRIPTION=Acme Corp Presentation Platform

Then mount your logo files:

services:
  web:
    volumes:
      - ./branding/acme/logo.png:/app/static/img/clients/acme/logo.png:ro
      - ./branding/acme/logo_large.png:/app/static/img/clients/acme/logo_large.png:ro

Azure Container Apps

Set environment variables in Azure Portal or via Azure CLI:

az containerapp update \
  --name slidefactory-preview \
  --resource-group rg-slidefactory \
  --set-env-vars \
    CLIENT_NAME="Acme Corp" \
    CLIENT_LOGO="/static/img/clients/acme/logo.png" \
    CLIENT_LOGO_LARGE="/static/img/clients/acme/logo_large.png" \
    CLIENT_PRIMARY_COLOR="#007ACC"

Upload logo files via: 1. Build custom Docker image with logos included 2. Mount Azure File Share with logos 3. Use Azure Blob Storage and update paths

Local Development

Create .env file in project root:

# .env
CLIENT_NAME=Acme Corp
CLIENT_LOGO=/static/img/clients/acme/logo.png
CLIENT_LOGO_LARGE=/static/img/clients/acme/logo_large.png
CLIENT_PRIMARY_COLOR=#007ACC

Place logo files in static/img/clients/acme/ directory.

Multi-Tenant Setup

For serving multiple clients from the same deployment:

Option 1: Subdomain-Based

Use different subdomains with environment variable overrides:

# acme.yourdomain.com
CLIENT_NAME=Acme Corp
CLIENT_LOGO=/static/img/clients/acme/logo.png

# globex.yourdomain.com
CLIENT_NAME=Globex Corporation
CLIENT_LOGO=/static/img/clients/globex/logo.png

Configure at reverse proxy level (nginx, traefik) or use separate container instances.

Option 2: Database-Driven (Future Enhancement)

Store branding configurations in database and load based on: - Domain/subdomain - User organization - API key

Note: This requires custom development. See implementation guide in ../reports/technical/.

Where Branding Appears

CLIENT_NAME is used in:

  • ✅ Browser tab title
  • ✅ FastAPI documentation title (/docs)
  • ✅ Navigation breadcrumb
  • ✅ Login page header
  • ✅ PWA manifest (app name on mobile home screen)
  • ✅ Email templates (if configured)

CLIENT_LOGO is used in:

  • ✅ Navigation bar (top-left)
  • ✅ Chat widget header
  • ✅ Logged-out navigation
  • ✅ Mobile app icon (if PWA installed)

CLIENT_LOGO_LARGE is used in:

  • ✅ Login page banner
  • ✅ Welcome/landing pages

CLIENT_PRIMARY_COLOR is used in:

  • ✅ Action buttons (Submit, Send, etc.)
  • ✅ Navigation highlights
  • ✅ Links and hover states
  • ✅ Chat widget accent color
  • ✅ PWA theme color (mobile browser chrome)
  • ✅ Favicon background (generated)

Testing Your Branding

Quick Test Checklist

After configuring branding, verify these pages:

  • Login page - Logo and client name appear correctly
  • Navigation - Logo visible in top-left corner
  • Account page - Browser title shows client name
  • API Docs (/docs) - Title shows client name
  • Chat widget - Logo and colors match brand
  • Mobile - PWA manifest uses correct theme color

Test Commands

# Start local server
./start.sh

# Check environment variables are loaded
curl http://localhost:8080/manifest.json

# Verify branding in HTML
curl http://localhost:8080/ | grep CLIENT_NAME

# Check API docs title
curl http://localhost:8080/docs | grep "<title>"

Troubleshooting

Logo Not Appearing

Problem: Logo shows as broken image or alt text

Solutions: 1. Verify file exists at specified path 2. Check file permissions (must be readable) 3. Ensure path starts with /static/img/ 4. Verify Docker volume mount (if using containers) 5. Check browser console for 404 errors

# Verify file exists
ls -lh static/img/logo.png

# Check from inside container
docker exec -it slidefactory-web ls -lh /app/static/img/logo.png

Wrong Color Showing

Problem: Primary color not applied or shows default red

Solutions: 1. Verify hex format includes # prefix 2. Check for typos in hex code (6 characters only) 3. Clear browser cache (Ctrl+Shift+R) 4. Restart application to reload config

Manifest Not Updating

Problem: PWA still shows old theme color on mobile

Solutions: 1. Dynamic manifest is at /manifest.json (not /static/site.webmanifest.json) 2. Update HTML references to use /manifest.json 3. Clear mobile browser cache 4. Uninstall and reinstall PWA

Original Sportfive Branding

The original Sportfive branding files are preserved in /static/img/branding/ for reference or restoration.

To restore Sportfive branding:

# Set environment variables
CLIENT_NAME="Sportfive Slidefactory"
CLIENT_LOGO="/static/img/branding/sportfive_logo_red.png"
CLIENT_LOGO_LARGE="/static/img/branding/bannerlogo.png"
CLIENT_PRIMARY_COLOR="#ee0000"

Advanced Customization

Custom Fonts

Edit /static/css/link_colors.css or create custom CSS:

:root {
  --font-family: "Your Custom Font", system-ui, sans-serif;
}

Additional Brand Colors

For more extensive theming, you can override CSS variables:

/* custom-branding.css */
:root {
  --primary: #your-primary;
  --secondary: #your-secondary;
  --accent: #your-accent;
}

Include in templates: 

<link href="/static/css/custom-branding.css" rel="stylesheet">

Logo Fallbacks

The system gracefully handles missing logos: - Falls back to alt text if image fails to load - Uses default logos if paths are invalid - Logs warnings for debugging

Security Considerations

Logo File Security

  • ✅ Use HTTPS: Always serve logos over HTTPS in production
  • ✅ File size limits: Keep logos under 1MB to prevent abuse
  • ✅ Allowed formats: PNG, SVG only (no executable formats)
  • ✅ Path validation: Paths are restricted to /static/img/ directory
  • ⚠️ User uploads: If allowing user uploads, implement virus scanning

Color Injection Prevention

  • ✅ Hex validation: System validates hex color format
  • ✅ CSS escaping: Colors are properly escaped in templates
  • ✅ No JavaScript: Colors are CSS-only (no script injection risk)

Support

Need Help?

  • Documentation: See ../../.claude/CLAUDE.md for full project documentation
  • Issues: Report problems at GitHub repository
  • Examples: Check /static/img/branding/ for reference assets

Professional Services

For custom branding implementation, multi-tenant setup, or advanced theming: - Contact your system administrator - Consult the deployment team - Review ../reports/technical/ for implementation guides