Branding

Customize Ask0's chat widget to match your brand with custom colors, logos, and styling. Apply your branding to the AI assistant.

Make Ask0 feel like a native part of your product by applying your brand identity. From colors and typography to logos and custom themes, create a cohesive user experience.

Brand Configuration

Quick Branding

Apply basic branding quickly:

window.ask0.branding = {
  // Company info
  company: 'Your Company',
  product: 'Your Product',

  // Visual identity
  logo: '/path/to/logo.svg',
  favicon: '/path/to/favicon.ico',

  // Colors
  primaryColor: '#0066CC',
  secondaryColor: '#F0F4F8',

  // Typography
  fontFamily: 'Inter, sans-serif',

  // Messaging
  tagline: 'How can we help?',
  welcomeMessage: 'Welcome to our support!'
};

Logo Integration

Add your logo to the widget:

const logoConfig = {
  // Logo variations
  logo: {
    light: '/logo-light.svg',
    dark: '/logo-dark.svg',


: '/logo.png'
  },

  // Logo display
  display: {
    position: 'header', // 'header', 'bubble', 'both'
    size: {
      header: '120px x 32px',
      bubble: '40px x 40px'
    },
    padding: '8px',
    background: 'transparent'
  },

  // Alternatives
  fallback: {
    text: 'YC',
    fontSize: '18px',
    fontWeight: 'bold'
  }
};

Color Schemes

Brand Colors

Define your color palette:

const brandColors = {
  // Primary palette
  primary: {
    50: '#EFF6FF',
    100: '#DBEAFE',
    200: '#BFDBFE',
    300: '#93C5FD',
    400: '#60A5FA',
    500: '#3B82F6', // Main brand color
    600: '#2563EB',
    700: '#1D4ED8',
    800: '#1E40AF',
    900: '#1E3A8A'
  },

  // Secondary palette
  secondary: {
    50: '#F8FAFC',
    100: '#F1F5F9',
    200: '#E2E8F0',
    300: '#CBD5E1',
    400: '#94A3B8',
    500: '#64748B',
    600: '#475569',
    700: '#334155',
    800: '#1E293B',
    900: '#0F172A'
  },

  // Semantic colors
  semantic: {
    success: '#10B981',
    warning: '#F59E0B',
    error: '#EF4444',
    info: '#3B82F6'
  }
};

// Apply brand colors
window.ask0.setColors(brandColors);

Color Modes

Support light and dark modes:

const colorModes = {
  light: {
    background: '#FFFFFF',
    foreground: '#000000',
    card: '#FFFFFF',
    cardForeground: '#000000',
    popover: '#FFFFFF',
    popoverForeground: '#000000',
    primary: brandColors.primary[500],
    primaryForeground: '#FFFFFF',
    secondary: brandColors.secondary[100],
    secondaryForeground: brandColors.secondary[900],
    muted: brandColors.secondary[100],
    mutedForeground: brandColors.secondary[600],
    accent: brandColors.primary[100],
    accentForeground: brandColors.primary[900],
    border: brandColors.secondary[200],
    input: brandColors.secondary[200],
    ring: brandColors.primary[500]
  },

  dark: {
    background: '#09090B',
    foreground: '#FAFAFA',
    card: '#09090B',
    cardForeground: '#FAFAFA',
    popover: '#09090B',
    popoverForeground: '#FAFAFA',
    primary: brandColors.primary[400],
    primaryForeground: '#000000',
    secondary: brandColors.secondary[800],
    secondaryForeground: brandColors.secondary[100],
    muted: brandColors.secondary[800],
    mutedForeground: brandColors.secondary[400],
    accent: brandColors.secondary[800],
    accentForeground: brandColors.secondary[100],
    border: brandColors.secondary[800],
    input: brandColors.secondary[800],
    ring: brandColors.primary[400]
  }
};

Typography

Font Configuration

Set up brand typography:

const typography = {
  // Font families
  fonts: {
    sans: 'Inter, system-ui, -apple-system, sans-serif',
    serif: 'Merriweather, Georgia, serif',
    mono: 'SF Mono, Consolas, monospace',
    display: 'Cal Sans, Inter, sans-serif'
  },

  // Font sizes
  sizes: {
    xs: '0.75rem',    // 12px
    sm: '0.875rem',   // 14px
    base: '1rem',     // 16px
    lg: '1.125rem',   // 18px
    xl: '1.25rem',    // 20px
    '2xl': '1.5rem',  // 24px
    '3xl': '1.875rem', // 30px
  },

  // Font weights
  weights: {
    thin: 100,
    light: 300,
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
    black: 900
  },

  // Line heights
  lineHeights: {
    none: 1,
    tight: 1.25,
    snug: 1.375,
    normal: 1.5,
    relaxed: 1.625,
    loose: 2
  },

  // Letter spacing
  letterSpacing: {
    tighter: '-0.05em',
    tight: '-0.025em',
    normal: '0',
    wide: '0.025em',
    wider: '0.05em',
    widest: '0.1em'
  }
};

Custom Fonts

Load and use custom fonts:

/* Load custom fonts */
@font-face {
  font-family: 'YourBrandFont';
  src: url('/fonts/brand-font.woff2') format('woff2'),
       url('/fonts/brand-font.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'YourBrandFont';
  src: url('/fonts/brand-font-bold.woff2') format('woff2'),
       url('/fonts/brand-font-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Apply to widget */
.ask0-widget {
  font-family: 'YourBrandFont', sans-serif;
}

Theme Presets

Industry-Specific Themes

Pre-built themes for different industries:

const saasTheme = {
  colors: {
    primary: '#5E5ADB',
    secondary: '#F7F7FB',
    accent: '#22D3EE'
  },
  style: {
    modern: true,
    minimal: true,
    tech: true
  },
  messaging: {
    tone: 'professional',
    greeting: 'Hi! Need help with our platform?'
  }
};

const ecommerceTheme = {
  colors: {
    primary: '#F97316',
    secondary: '#FEF3C7',
    accent: '#10B981'
  },
  style: {
    friendly: true,
    vibrant: true,
    trustworthy: true
  },
  messaging: {
    tone: 'helpful',
    greeting: 'Hi! Shopping for something special?'
  }
};

const healthcareTheme = {
  colors: {
    primary: '#0891B2',
    secondary: '#E0F2FE',
    accent: '#10B981'
  },
  style: {
    clean: true,
    professional: true,
    calming: true
  },
  messaging: {
    tone: 'caring',
    greeting: 'Hello! How can we assist you today?'
  }
};

const financeTheme = {
  colors: {
    primary: '#0F172A',
    secondary: '#F1F5F9',
    accent: '#059669'
  },
  style: {
    serious: true,
    trustworthy: true,
    secure: true
  },
  messaging: {
    tone: 'formal',
    greeting: 'Welcome. How may I assist you?'
  }
};

const educationTheme = {
  colors: {
    primary: '#7C3AED',
    secondary: '#EDE9FE',
    accent: '#FBBF24'
  },
  style: {
    friendly: true,
    encouraging: true,
    accessible: true
  },
  messaging: {
    tone: 'supportive',
    greeting: 'Hi there! Ready to learn something new?'
  }
};

shadcn Theme Integration

Using shadcn Themes

Import themes from shadcn:

// Import theme from shadcn
import { themes } from '@shadcn/themes';

// Apply a shadcn theme
window.ask0.applyTheme(themes.zinc);

// Or use custom shadcn theme
const customShadcnTheme = {
  name: 'custom',
  cssVars: {
    light: {
      background: '0 0% 100%',
      foreground: '224 71.4% 4.1%',
      card: '0 0% 100%',
      'card-foreground': '224 71.4% 4.1%',
      popover: '0 0% 100%',
      'popover-foreground': '224 71.4% 4.1%',
      primary: '220.9 39.3% 11%',
      'primary-foreground': '210 20% 98%',
      secondary: '220 14.3% 95.9%',
      'secondary-foreground': '220.9 39.3% 11%',
      muted: '220 14.3% 95.9%',
      'muted-foreground': '220 8.9% 46.1%',
      accent: '220 14.3% 95.9%',
      'accent-foreground': '220.9 39.3% 11%',
      destructive: '0 84.2% 60.2%',
      'destructive-foreground': '210 20% 98%',
      border: '220 13% 91%',
      input: '220 13% 91%',
      ring: '224 71.4% 4.1%'
    },
    dark: {
      // Dark mode colors...
    }
  }
};

window.ask0.applyTheme(customShadcnTheme);

Community Themes

Use themes from the community:

// Import from tweakcn.com
import { fetchTheme } from '@tweakcn/api';

async function applyTweakTheme(themeId) {
  const theme = await fetchTheme(themeId);
  window.ask0.applyTheme(theme);
}

// Apply community theme
applyTweakTheme('ocean-breeze-pro');

// Browse themes
const themes = await fetchThemes({
  style: 'minimal',
  mode: 'light',
  industry: 'saas'
});

Visual Elements

Icons & Graphics

Customize visual elements:

const visualElements = {
  // Icon set
  icons: {
    chat: '💬',
    send: '➤',
    close: '✕',
    minimize: '—',
    maximize: '□',
    user: '👤',
    bot: '🤖',
    attachment: '📎',
    emoji: '😊',
    settings: '⚙️'
  },

  // Or use icon library
  iconLibrary: 'lucide', // 'lucide', 'heroicons', 'feather', 'fontawesome'

  // Graphics
  graphics: {
    emptyState: '/graphics/empty-chat.svg',
    loading: '/graphics/loading.gif',
    error: '/graphics/error.svg',
    success: '/graphics/success.svg'
  },

  // Backgrounds
  backgrounds: {
    chat: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    bubble: 'radial-gradient(circle, #6366f1, #4f46e5)'
  }
};

Animation & Motion

Brand-appropriate animations:

const motionConfig = {
  // Animation presets
  preset: 'smooth', // 'none', 'subtle', 'smooth', 'playful', 'dramatic'

  // Custom animations
  animations: {
    // Widget entrance
    entrance: {
      type: 'slide', // 'slide', 'fade', 'scale', 'rotate'
      direction: 'up',
      duration: 300,
      easing: 'ease-out'
    },

    // Message appearance
    message: {
      type: 'fade-slide',
      delay: 100,
      stagger: 50
    },

    // Micro-interactions
    hover: {
      scale: 1.02,
      duration: 200
    },

    // Loading states
    loading: {
      type: 'pulse',
      duration: 1000,
      repeat: 'infinite'
    }
  },

  // Respect user preferences
  respectReducedMotion: true
};

Brand Voice & Tone

Message Customization

Align messaging with brand voice:

const brandVoice = {
  // Personality traits
  personality: {
    professional: 0.8,
    friendly: 0.9,
    helpful: 1.0,
    casual: 0.3,
    technical: 0.6
  },

  // System messages
  messages: {
    greeting: 'Welcome to [Company]! I\'m here to help you succeed.',
    firstTime: 'Hi! I\'m your AI assistant. Ask me anything about our product.',
    returning: 'Welcome back! How can I assist you today?',

    thinking: 'Let me find that for you...',
    error: 'I apologize for the inconvenience. Let me try again.',
    noResult: 'I couldn\'t find exactly what you\'re looking for. Can you provide more details?',

    feedback: {
      request: 'Was this answer helpful?',
      positive: 'Great! I\'m glad I could help.',
      negative: 'I\'m sorry I couldn\'t be more helpful. Your feedback helps us improve.'
    },

    closing: 'Thanks for chatting! Feel free to return anytime.'
  },

  // Response style
  responseStyle: {
    format: 'conversational', // 'concise', 'detailed', 'conversational'
    includeEmoji: false,
    useMarkdown: true,
    includeSources: true,
    suggestFollowUps: true
  }
};

White-Label Options

Complete White-Labeling

Remove Ask0 branding:

const whiteLabelConfig = {
  // Remove Ask0 branding
  hideBranding: true, // Pro/Enterprise only

  // Custom attribution
  poweredBy: {
    show: false,
    text: 'Powered by YourCompany',
    link: 'https://yourcompany.com'
  },

  // Custom domain
  customDomain: {
    widget: 'https://chat.yourcompany.com',
    api: 'https://api.chat.yourcompany.com'
  },

  // Custom emails
  emailBranding: {
    from: 'support@yourcompany.com',
    name: 'Your Company Support',
    template: 'custom'
  }
};

Brand Guidelines

Consistency Checklist

Ensure brand consistency:

Accessibility

Maintain accessibility with branding:

// Check color contrast
const checkContrast = (fg, bg) => {
  // Returns WCAG compliance level
  return getContrastRatio(fg, bg) >= 4.5 ? 'AA' : 'Fail';
};

// Ensure branded colors are accessible
const accessibleBrand = {
  primary: {
    color: '#0066CC',
    onPrimary: '#FFFFFF', // Contrast ratio: 5.9:1 ✓
  },
  secondary: {
    color: '#F0F4F8',
    onSecondary: '#000000', // Contrast ratio: 20.1:1 ✓
  }
};

Best Practices

Branding Best Practices:

Maintain consistency across all touchpoints
Ensure accessibility with color choices
Test branded widget on your actual site
Consider both light and dark modes
Keep messaging aligned with brand voice
Optimize logos and images for web
Document brand configuration for team

Next Steps

Configure Widget

Set up the chat interface

Advanced Customization

Deep customization options

Add to Your Site

Integration guide

Branding

Configure Widget

Advanced Customization

Add to Your Site

On this page