Branding & Multi-SaaS Support #

Complete guide to branding configuration and deploying multiple branded monitoring services from the same codebase.

Overview #

ServerMonitor inherits its branding system from SaasBase, allowing you to deploy multiple branded monitoring services (like Pulsey, Heartbeat, etc.) from a single codebase. Each deployment can have unique branding, legal pages, and domain names while sharing the same underlying functionality.

Branding Architecture #

Inheritance from SaasBase #

All branding configuration comes from SaasBase environment variables:

Product Identity: Name, description, logos
Visual Design: Colors, fonts, styling
Legal Information: Company details, contact info
Email Templates: Branded notification emails

Multi-Tenant Support #

Each deployment can serve multiple branded products:

Shared Codebase: One codebase supports all brands
Environment-Based: Different .env files for different brands
Database Isolation: Organizations can't see other brands' data

Basic Branding Configuration #

Core Identity Variables #

# Product Identity
SAAS_PRODUCT_ID=pulsey
SAAS_BRAND_NAME="Pulsey"
SAAS_BRAND_DESCRIPTION="Server monitoring made simple"
SAAS_BRAND_TAGLINE="Keep your servers healthy"

# Company Information
SAAS_COMPANY_NAME="Your Company LLC"
SAAS_COMPANY_ADDRESS="123 Main St, City, State 12345"
SAAS_COMPANY_PHONE="+1 (555) 123-4567"
SAAS_COMPANY_EMAIL="support@yourcompany.com"

Visual Branding #

# Logo and Images
SAAS_BRAND_LOGO="/themes/pulsey/assets/images/logo.png"
SAAS_BRAND_LOGO_DARK="/themes/pulsey/assets/images/logo-dark.png"
SAAS_BRAND_FAVICON="/themes/pulsey/assets/images/favicon.ico"

# Color Scheme
SAAS_BRAND_PRIMARY_COLOR="#007bff"
SAAS_BRAND_SECONDARY_COLOR="#6c757d"
SAAS_BRAND_SUCCESS_COLOR="#28a745"
SAAS_BRAND_DANGER_COLOR="#dc3545"

# Social Media
SAAS_BRAND_TWITTER="@yourcompany"
SAAS_BRAND_FACEBOOK="yourcompany"
SAAS_BRAND_LINKEDIN="company/yourcompany"

Legal and Support #

# Support Information
SAAS_SUPPORT_EMAIL="support@yourcompany.com"
SAAS_SUPPORT_PHONE="+1 (555) 123-4567"
SAAS_SUPPORT_HOURS="Monday-Friday, 9 AM - 5 PM EST"

# Legal Pages
LEGAL_TOS_URL="/legal/terms"
LEGAL_PRIVACY_URL="/legal/privacy"

# Billing Information
SAAS_BILLING_NAME="Your Company LLC"
SAAS_BILLING_ADDRESS="123 Main St, City, State 12345"

Brand Examples #

Pulsey (Business-Focused) #

# Pulsey - Professional server monitoring
SAAS_PRODUCT_ID=pulsey
SAAS_BRAND_NAME="Pulsey"
SAAS_BRAND_DESCRIPTION="Professional server monitoring for growing businesses"
SAAS_BRAND_TAGLINE="Monitor with confidence"
SAAS_BRAND_PRIMARY_COLOR="#2563eb"
SAAS_BRAND_LOGO="/assets/pulsey/logo.png"

Heartbeat (Developer-Focused) #

# Heartbeat - Simple monitoring for developers
SAAS_PRODUCT_ID=heartbeat
SAAS_BRAND_NAME="Heartbeat"
SAAS_BRAND_DESCRIPTION="Simple server monitoring for developers"
SAAS_BRAND_TAGLINE="Feel the pulse of your apps"
SAAS_BRAND_PRIMARY_COLOR="#ef4444"
SAAS_BRAND_LOGO="/assets/heartbeat/logo.png"

WatchTower (Enterprise-Focused) #

# WatchTower - Enterprise monitoring solution
SAAS_PRODUCT_ID=watchtower
SAAS_BRAND_NAME="WatchTower"
SAAS_BRAND_DESCRIPTION="Enterprise-grade infrastructure monitoring"
SAAS_BRAND_TAGLINE="Vigilant monitoring for mission-critical systems"
SAAS_BRAND_PRIMARY_COLOR="#059669"
SAAS_BRAND_LOGO="/assets/watchtower/logo.png"

How Branding is Applied #

Backend Interface #

Menu Logo:

Displays configured brand logo in admin menu
Automatically resizes to fit (max-width: 96px)
Falls back to October CMS default if not configured

Page Titles:

Uses SAAS_BRAND_NAME in browser titles
Format: "Page Title | Brand Name"

Legal Pages:

Terms of Service and Privacy Policy
Automatically include brand name and company information
Located at /legal/terms and /legal/privacy

Email Notifications #

Template Branding:

Uses brand logo in email header
Brand colors for buttons and accents
Company information in footer

Email Content:

<!-- Brand logo in header -->
<img src="{{ brand.logo }}" alt="{{ brand.name }}" />

<!-- Branded subject line -->
Subject: {{ brand.name }}: server status changed

<!-- Footer with company info -->
{{ brand.company_name }}
{{ brand.company_address }}
{{ brand.support_email }}

Status Page Branding #

Public status pages can include custom branding per organization:

Organization logos displayed at the top
Dark mode support with automatic theme detection
Dynamic favicon showing current system status

Multi-Deployment Strategy #

Separate Deployments #

Option 1: Separate Servers

# Deploy brand A to server-a.com
git clone repo /var/www/brand-a
cp .env.brand-a /var/www/brand-a/.env

# Deploy brand B to server-b.com
git clone repo /var/www/brand-b
cp .env.brand-b /var/www/brand-b/.env

Option 2: Subdomain Deployment

# Single server, multiple subdomains
# pulsey.monitoring.com → /var/www/pulsey/
# heartbeat.monitoring.com → /var/www/heartbeat/

Asset Management #

Brand-Specific Assets:

public/
├── assets/
│   ├── pulsey/
│   │   ├── logo.png
│   │   ├── favicon.ico
│   │   └── email-header.png
│   ├── heartbeat/
│   │   ├── logo.png
│   │   ├── favicon.ico
│   │   └── email-header.png
│   └── watchtower/
│       ├── logo.png
│       ├── favicon.ico
│       └── email-header.png

Customization Examples #

Custom Logo Implementation #

Upload Brand Assets:

# Create brand asset directory
mkdir -p public/assets/yourbrand/

# Upload your assets
cp your-logo.png public/assets/yourbrand/logo.png
cp your-favicon.ico public/assets/yourbrand/favicon.ico

Configure Environment:

SAAS_BRAND_LOGO="/assets/yourbrand/logo.png"
SAAS_BRAND_FAVICON="/assets/yourbrand/favicon.ico"

Custom Email Templates #

Override Notification Template:

// In your theme or plugin
// Create: themes/yourbrand/views/mail/notification.htm

<!-- Custom branded email template -->
<div style="background: {{ brand.primary_color }}">
    <img src="{{ brand.logo }}" alt="{{ brand.name }}" />
    <h1>{{ brand.name }} Alert</h1>
    <!-- Your custom content -->
</div>

Testing Brand Configuration #

Visual Verification #

Check Logo Display:

Login to admin area
Verify logo appears in menu
Check browser tab for favicon
Confirm page titles include brand name

Test Email Branding:

Trigger a server status change
Check notification email formatting
Verify logo and colors are correct
Confirm footer information is accurate

Best Practices #

Brand Consistency #

Logo Guidelines:

Use consistent logo across all touchpoints
Provide both light and dark versions
Optimize for different screen densities
Maximum width: 200px for email headers

Color Usage:

Define primary brand color for buttons and links
Use success/danger colors for status indicators
Maintain sufficient contrast for accessibility
Test colors in both light and dark themes

Performance Considerations #

Asset Optimization:

Optimize logos for web (WebP format recommended)
Use CDN for static brand assets
Implement browser caching for brand assets
Minimize file sizes without quality loss

Troubleshooting #

Logo Not Displaying #

Check File Path:

# Verify file exists
ls -la public/assets/yourbrand/logo.png

# Check file permissions
chmod 644 public/assets/yourbrand/logo.png

Verify Configuration:

# Check environment variable
grep SAAS_BRAND_LOGO .env

# Clear config cache
php artisan config:clear

Email Branding Issues #

Template Problems:

# Check email template exists
ls -la themes/yourbrand/views/mail/

# Verify brand variables are available
php artisan tinker
>>> config('saas.brand.name')

Image Loading in Emails:

Use absolute URLs for email images
Ensure images are publicly accessible
Test with various email clients
Consider base64 encoding for small images

Previous: Database | Next: Performance