Skip to main content

Customizing Appearance

Learn how to customize your ChatMaven bot's appearance to match your brand and provide an optimal user experience. This guide covers all visual customization options available in the Appearance panel.

Chat Widget​

Basic Customization​

  1. Widget Position

    • Bottom right/left
    • Custom position
    • Mobile position
    • Responsive behavior

  2. Size and Dimensions

    • Widget height
    • Widget width
    • Minimize/Maximize
    • Mobile responsiveness

  3. Launch Button

    • Button style
    • Icon selection
    • Custom images
    • Animation effects

Visual Design​

Color Scheme​

  1. Primary Colors

    /* Example color configuration */
    :root {
      --chatmaven-primary: #007bff;
      --chatmaven-secondary: #6c757d;
      --chatmaven-background: #ffffff;
      --chatmaven-text: #212529;
    }

  2. Theme Options

    • Light theme
    • Dark theme
    • Custom theme
    • Auto-switching

  3. Color Elements

    • Header background
    • Message bubbles
    • Buttons
    • Links

Typography​

  1. Font Settings

    • Font family
    • Font size
    • Font weight
    • Line height

  2. Text Styles

    • Message text
    • Headers
    • Buttons
    • Links

  3. Custom Fonts

    /* Example custom font */
    @font-face {
      font-family: 'CustomFont';
      src: url('path/to/font.woff2');
    }

Layout Configuration​

Chat Interface​

  1. Header Design

    • Logo placement
    • Title configuration
    • Menu options
    • Status indicators

  2. Message Area

    • Bubble style
    • Spacing
    • Timestamps
    • User avatars

  3. Input Area

    • Input field style
    • Send button
    • Attachments
    • Suggestions

Custom Elements​

  1. Welcome Screen

    • Logo
    • Welcome message
    • Quick actions
    • Branding elements

  2. Loading States

    • Loading indicators
    • Progress bars
    • Animations
    • Placeholders

Advanced Styling​

Custom CSS​

/* Example custom styles */
.chatmaven-widget {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.chatmaven-message {
  padding: 12px 16px;
  margin: 4px 0;
}

.chatmaven-button {
  transition: all 0.2s ease;
}

Responsive Design​

  1. Breakpoints

    /* Mobile devices */
    @media (max-width: 768px) {
      .chatmaven-widget {
        width: 100%;
        height: 100%;
      }
    }

  2. Mobile Optimization

    • Touch targets
    • Viewport handling
    • Orientation changes
    • Keyboard behavior

Branding​

Brand Assets​

  1. Logo

    • File formats
    • Size requirements
    • Placement options
    • Dark/light versions

  2. Icons

    • Favicon
    • App icons
    • Action icons
    • Custom emojis

  3. Brand Guidelines

    • Color usage
    • Typography rules
    • Spacing standards
    • Visual hierarchy

Best Practices​

Design Tips​

  1. Consistency

    • Match website design
    • Use brand colors
    • Maintain spacing
    • Follow patterns

  2. Accessibility

    • Color contrast
    • Text size
    • Focus states
    • Screen readers

  3. Performance

    • Optimize images
    • Minimize CSS
    • Reduce animations
    • Load time

Testing​

Cross-platform Testing​

  1. Devices

    • Desktop
    • Mobile phones
    • Tablets
    • Different screens

  2. Browsers

    • Chrome
    • Firefox
    • Safari
    • Edge

  3. Orientations

    • Portrait
    • Landscape
    • Responsive
    • Breakpoints

Next Steps​