Branding Customization

SmarterAvatar is fully white-label. Customize every visual element to match your brand.

Configuration

All branding is controlled through a central configuration:

// config/branding.config.ts
{
  companyName: 'Your Company',
  logo: {
    light: '/branding/logo-light.svg',
    dark: '/branding/logo-dark.svg',
  },
  primaryColor: '#2563eb',
  secondaryColor: '#1e40af',
  accentColor: '#3b82f6',
  favicon: '/branding/favicon.ico',
  metaTitle: 'Your AI Assistant',
  metaDescription: 'Interactive AI-powered assistant',
  welcomeMessage: 'Hello! How can I help you today?',
  avatarPersonaName: 'Alex',
  featureToggles: {
    showDocumentCart: true,
    showRelatedLinks: true,
    showSessionTimer: true,
  }
}

Logo Files

Requirements

Asset	Format	Recommended Size
Logo (Light)	SVG	200x50px viewBox
Logo (Dark)	SVG	200x50px viewBox
Favicon	ICO/PNG	32x32px

Placement

Place logo files in /public/branding/:

public/
└── branding/
    ├── logo-light.svg
    ├── logo-dark.svg
    └── favicon.ico

Colors

Primary Color

Used for buttons, links, and primary actions:

primaryColor: '#2563eb'  // Blue

Secondary Color

Used for hover states and secondary elements:

secondaryColor: '#1e40af'  // Darker blue

Accent Color

Used for highlights and decorative elements:

accentColor: '#3b82f6'  // Lighter blue

Applying Colors

Colors are automatically applied throughout the UI. For custom components, use CSS variables:

.my-element {
  background: var(--brand-primary);
  color: var(--brand-text-primary);
}

Text Content

Company Name

Appears in navigation and meta tags:

companyName: 'Your Company'

Welcome Message

Initial message shown when avatar loads:

welcomeMessage: 'Hello! How can I help you today?'

Avatar Persona Name

How the avatar introduces itself:

avatarPersonaName: 'Alex'

Meta Tags

Control how your site appears in search and social:

metaTitle: 'Your AI Assistant | Your Company'
metaDescription: 'Get instant answers from our AI-powered assistant'

Feature Toggles

Enable/disable UI features:

featureToggles: {
  showDocumentCart: true,     // Document suggestions panel
  showRelatedLinks: true,     // Related links after responses
  showSessionTimer: true,     // Session duration display
}

Runtime Updates

Branding can be updated at runtime via the Admin Panel:

1. Navigate to Admin → Branding
2. Update desired fields
3. Changes apply immediately (no redeploy needed)

Verification

After updating branding:

1. Clear browser cache
2. Check light and dark modes
3. Verify mobile appearance
4. Test social sharing preview