Chat Widget - Theme Showcase & Demo

🎨 Choose a Theme

Click to switch between different theme examples showing how to customize the widget for your brand:

Corporate Blue

Professional and trustworthy design perfect for enterprise and financial services.

Accent Color:

Background: White

💡 How to Customize

The chat widget is embedded with theme variables that can be customized in real-time:

        <script
  src="http://your-widget-server:30871/embed.js"
  data-label="Chat with us!"
  data-accent="#0e7cc8"
  data-text-color="#ffffff">
</script>
      

Or update theme at runtime with CSS custom properties on #mini-chat-host

🎭

Multiple Themes

Choose from pre-built themes or create your own with custom colors and branding.

⚡

Fast & Lightweight

Minimal JavaScript footprint, loads async, doesn't block page rendering.

🔐

Secure & Private

End-to-end encrypted messages, no tracking, GDPR compliant.

📱

Responsive Design

Works perfectly on mobile, tablet, and desktop devices.

📚 Widget Customization Guide

Available CSS Custom Properties

--mc-accent / --mc-text-color: Accent pill fill and readable text
--mc-font-family-light / --mc-font-family-dark, --mc-font-size, --mc-font-weight: Typography controls
--mc-surface-*: Widget surfaces (primary, elevated, header, badge, pill, hover)
--mc-text-* & --mc-msg-text: Primary, muted, and message text colors
--mc-control-* & --mc-button-*: Close button and send button palettes
--mc-msg-user / --mc-msg-bot: Message bubble backgrounds
--mc-feedback-*, --mc-shadow-control: Feedback icon colors and control shadow
--mc-window-width, --mc-window-height, --mc-window-radius: Layout sizing

Theme Modes & Fonts

Control the default theme directly on the embed script:

<script src="https://your-domain/embed.js"
        data-theme="auto"
        data-font-light="Inter, system-ui, sans-serif"
        data-font-dark="Inter, 'Segoe UI', sans-serif"
        data-theme-persist="true"></script>

data-theme: light, dark, or auto (default follows system)
data-font-light / data-font-dark: Override font stacks per theme
data-theme-persist: Set to false to skip localStorage preference
data-theme-storage: Override the storage key when you host multiple widgets

Runtime Theme API

Switch themes programmatically after load:

// Force dark mode for this session
MiniChat.setThemeMode('dark');

// Follow system again without clearing stored preference
MiniChat.setTheme('auto', { persist: false });

// Provide custom fonts per theme
MiniChat.setFonts({
  light: 'Inter, system-ui, sans-serif',
  dark: 'Inter, "Segoe UI", sans-serif'
});

// Theme-specific color tokens
MiniChat.setTheme({
  light: { 'mc-msg-text': '#1f2937' },
  dark: { 'mc-msg-text': '#f8fafc' }
});

// Inspect current state
MiniChat.getThemeState();