White-labeling

White-labeling allows you to brand Teabar as your own platform. Participants see your company’s logo, colors, and messaging instead of Teabar branding.

Note

White-labeling is an Enterprise feature, available for both Teabar Cloud Enterprise and self-hosted Enterprise deployments.

What Can Be Customized

Element	Customizable
Logo	Header, loading screen, favicon
Colors	Primary, secondary, accent, backgrounds
Text	Platform name, welcome messages, support info
Links	Documentation, support, terms, privacy
Emails	Templates, from address, branding
Domain	Custom domain (see Custom Domains)

Configuration

Via CLI

# Set branding from config file
teactl org branding set --config branding.yaml

# Preview branding
teactl org branding preview --open

# Reset to default
teactl org branding reset

Via Configuration File

Create a branding.yaml file:

# Organization branding configuration
branding:
  # Visual identity
  logo:
    light: https://acme.com/logo-light.svg    # For light backgrounds
    dark: https://acme.com/logo-dark.svg      # For dark backgrounds
    favicon: https://acme.com/favicon.ico
    
  # Color scheme
  colors:
    primary: "#0066CC"
    secondary: "#004499"
    accent: "#FF6600"
    background: "#FFFFFF"
    backgroundDark: "#1a1a2e"
    text: "#333333"
    textDark: "#FFFFFF"
    
  # Loading/splash screen
  loadingScreen:
    logo: https://acme.com/loading-logo.svg
    message: "Preparing your environment..."
    backgroundColor: "#0066CC"
    
  # Text customization
  text:
    platformName: "ACME Labs"           # Replaces "Teabar" everywhere
    tagline: "Hands-on Learning Platform"
    welcomeMessage: "Welcome to ACME Labs"
    supportEmail: "[email protected]"
    copyrightText: "2024 ACME Corporation"
    
  # Links
  links:
    documentation: https://docs.acme.com/labs
    support: https://support.acme.com
    termsOfService: https://acme.com/tos
    privacyPolicy: https://acme.com/privacy
    
  # Email templates
  emails:
    fromName: "ACME Labs"
    fromEmail: "[email protected]"
    replyTo: "[email protected]"

Apply the configuration:

teactl org branding set --config branding.yaml

Logo Configuration

Logo Requirements

Logo Type	Recommended Size	Format
Header (light)	200x50 px	SVG, PNG
Header (dark)	200x50 px	SVG, PNG
Favicon	32x32 px	ICO, PNG
Loading screen	300x100 px	SVG, PNG

Logo Placement

branding:
  logo:
    # Used in header on light backgrounds
    light: https://acme.com/logo-on-light.svg
    
    # Used in header on dark backgrounds
    dark: https://acme.com/logo-on-dark.svg
    
    # Browser favicon
    favicon: https://acme.com/favicon.ico
    
    # Square logo for mobile/apps
    square: https://acme.com/logo-square.svg

Hosting Logos

Logos can be hosted:

Your CDN: https://cdn.acme.com/logos/...
Public URL: Any publicly accessible URL
Teabar Assets: Upload via CLI

# Upload logo to Teabar
teactl org branding upload-asset logo-light.svg --type logo-light
teactl org branding upload-asset logo-dark.svg --type logo-dark
teactl org branding upload-asset favicon.ico --type favicon

Color Scheme

Color Configuration

branding:
  colors:
    # Main brand color - used for buttons, links, accents
    primary: "#0066CC"
    
    # Secondary brand color - used for hover states, secondary buttons
    secondary: "#004499"
    
    # Accent color - used for highlights, notifications
    accent: "#FF6600"
    
    # Background colors
    background: "#FFFFFF"           # Light mode background
    backgroundDark: "#1a1a2e"       # Dark mode background
    surface: "#F5F5F5"              # Card/panel backgrounds
    surfaceDark: "#252542"          # Dark mode surfaces
    
    # Text colors
    text: "#333333"                 # Light mode text
    textDark: "#FFFFFF"             # Dark mode text
    textMuted: "#666666"            # Secondary text
    
    # Status colors (optional - uses defaults if not specified)
    success: "#22C55E"
    warning: "#F59E0B"
    error: "#EF4444"
    info: "#3B82F6"

CSS Variables

The colors are applied as CSS variables:

:root {
  --color-primary: #0066CC;
  --color-secondary: #004499;
  --color-accent: #FF6600;
  --color-background: #FFFFFF;
  --color-text: #333333;
}

.dark {
  --color-background: #1a1a2e;
  --color-text: #FFFFFF;
}

Text Customization

Platform Name

Replace “Teabar” throughout the interface:

branding:
  text:
    platformName: "ACME Labs"

This affects:

Page titles: “ACME Labs - My Workshop”
Header: Shows “ACME Labs” logo/text
Footer: “Powered by ACME Labs” (or hidden)
Emails: “Welcome to ACME Labs”

Custom Messages

branding:
  text:
    # Welcome screen
    welcomeMessage: "Welcome to ACME Labs"
    welcomeSubtitle: "Your hands-on learning environment is ready"
    
    # Loading screen
    loadingMessage: "Preparing your environment..."
    loadingSubtitle: "This usually takes a few seconds"
    
    # Error messages
    errorTitle: "Something went wrong"
    errorMessage: "Please contact [email protected]"
    
    # Support
    supportEmail: "[email protected]"
    supportPhone: "+1 (555) 123-4567"
    supportHours: "Mon-Fri 9am-5pm EST"

Link Customization

Replace default links with your own:

branding:
  links:
    # Documentation
    documentation: https://docs.acme.com/labs
    gettingStarted: https://docs.acme.com/labs/quickstart
    
    # Support
    support: https://support.acme.com
    contactUs: https://acme.com/contact
    
    # Legal
    termsOfService: https://acme.com/tos
    privacyPolicy: https://acme.com/privacy
    
    # Social (optional)
    twitter: https://twitter.com/acmelabs
    linkedin: https://linkedin.com/company/acme

Hide Links

Set to null to hide specific links:

branding:
  links:
    # Hide Teabar-related links
    teabarDocs: null
    teabarStatus: null

Email Templates

Email Configuration

branding:
  emails:
    # Sender information
    fromName: "ACME Labs"
    fromEmail: "[email protected]"
    replyTo: "[email protected]"
    
    # Template selection
    templates:
      invite: custom        # Use custom template
      reminder: branded     # Use Teabar template with branding
      expiry: custom        # Use custom template
      welcome: branded

Custom Email Templates

Create custom HTML templates:

<!-- invite.html -->
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; line-height: 1.6; }
    .container { max-width: 600px; margin: 0 auto; padding: 20px; }
    .header { text-align: center; margin-bottom: 30px; }
    .button { 
      display: inline-block;
      background: {{ .Branding.Colors.Primary }};
      color: white;
      padding: 12px 24px;
      text-decoration: none;
      border-radius: 4px;
    }
    .footer { margin-top: 30px; color: #666; font-size: 12px; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <img src="{{ .Branding.Logo.Light }}" alt="{{ .Branding.PlatformName }}" height="50">
    </div>
    
    <h1>Welcome to {{ .Branding.PlatformName }}</h1>
    
    <p>You've been invited to join <strong>{{ .Environment.Name }}</strong>.</p>
    
    <p>Click the button below to access your environment:</p>
    
    <p style="text-align: center; margin: 30px 0;">
      <a href="{{ .AccessURL }}" class="button">Access Your Environment</a>
    </p>
    
    <p>This link expires on {{ .Expiry | formatDate "January 2, 2006" }}.</p>
    
    <div class="footer">
      <p>Need help? Contact <a href="mailto:{{ .Branding.SupportEmail }}">{{ .Branding.SupportEmail }}</a></p>
      <p>{{ .Branding.CopyrightText }}</p>
    </div>
  </div>
</body>
</html>

Template Variables

Available variables in email templates:

Variable	Description
`{{ .Branding.Logo.Light }}`	Logo URL
`{{ .Branding.PlatformName }}`	Platform name
`{{ .Branding.Colors.Primary }}`	Primary color
`{{ .Branding.SupportEmail }}`	Support email
`{{ .Environment.Name }}`	Environment name
`{{ .Participant.Name }}`	Participant name
`{{ .Participant.Email }}`	Participant email
`{{ .AccessURL }}`	Access URL
`{{ .Expiry }}`	Link expiration time

Upload Custom Templates

teactl org branding template set invite --file invite.html
teactl org branding template set reminder --file reminder.html
teactl org branding template set expiry --file expiry.html

Loading Screen

Customize the loading screen shown when environments start:

branding:
  loadingScreen:
    # Logo displayed during loading
    logo: https://acme.com/loading-logo.svg
    
    # Background color
    backgroundColor: "#0066CC"
    
    # Loading message
    message: "Preparing your environment..."
    
    # Show progress indicator
    showProgress: true
    
    # Animation style
    animation: pulse  # pulse, spin, dots

Login Page

Customize the participant login page:

branding:
  loginPage:
    # Background
    backgroundImage: https://acme.com/login-bg.jpg
    backgroundOverlay: "rgba(0, 0, 0, 0.5)"
    
    # Welcome text
    title: "Welcome to ACME Labs"
    subtitle: "Enter your credentials to access your environment"
    
    # Show/hide elements
    showLogo: true
    showRememberMe: true
    showForgotPassword: false

Preview Branding

Preview your branding changes before applying:

# Generate preview URL
teactl org branding preview --open

This opens a browser with:

Login page preview
Terminal interface preview
Email preview
Loading screen preview

Applying Branding

Apply to All Environments

teactl org branding set --config branding.yaml

Apply to Specific Environment

# In blueprint
apiVersion: teabar.dev/v1
kind: Blueprint
metadata:
  name: my-workshop
spec:
  branding:
    inherit: organization  # Use org branding
    overrides:
      text:
        welcomeMessage: "Welcome to the March Workshop"

Or override via CLI:

teactl env branding set my-workshop --welcome-message "Welcome to March Workshop"

Complete Example

# branding.yaml - Complete white-label configuration
branding:
  logo:
    light: https://cdn.acme.com/logos/acme-light.svg
    dark: https://cdn.acme.com/logos/acme-dark.svg
    favicon: https://cdn.acme.com/logos/favicon.ico
    square: https://cdn.acme.com/logos/acme-square.svg
    
  colors:
    primary: "#0066CC"
    secondary: "#004499"
    accent: "#FF6600"
    background: "#FFFFFF"
    backgroundDark: "#1a1a2e"
    surface: "#F5F5F5"
    surfaceDark: "#252542"
    text: "#333333"
    textDark: "#FFFFFF"
    success: "#22C55E"
    warning: "#F59E0B"
    error: "#EF4444"
    
  loadingScreen:
    logo: https://cdn.acme.com/logos/acme-loading.svg
    message: "Preparing your ACME Labs environment..."
    backgroundColor: "#0066CC"
    showProgress: true
    
  text:
    platformName: "ACME Labs"
    tagline: "Hands-on Learning Platform"
    welcomeMessage: "Welcome to ACME Labs"
    welcomeSubtitle: "Your environment is ready"
    supportEmail: "[email protected]"
    copyrightText: "2024 ACME Corporation. All rights reserved."
    
  links:
    documentation: https://docs.acme.com/labs
    support: https://support.acme.com
    termsOfService: https://acme.com/terms
    privacyPolicy: https://acme.com/privacy
    
  emails:
    fromName: "ACME Labs"
    fromEmail: "[email protected]"
    replyTo: "[email protected]"
    templates:
      invite: custom
      reminder: branded
      expiry: custom
      
  loginPage:
    backgroundImage: https://cdn.acme.com/images/login-bg.jpg
    backgroundOverlay: "rgba(0, 102, 204, 0.7)"
    title: "Welcome to ACME Labs"
    subtitle: "Sign in to access your learning environment"

Resetting Branding

# Reset to Teabar defaults
teactl org branding reset

# Reset specific element
teactl org branding reset --element colors
teactl org branding reset --element logo

Next Steps