Skip to main content

​
Overview

The Vaile chat widget is highly customizable to match your dealership’s brand and website design. This guide covers all customization options available to create a seamless user experience.

​
Accessing Customization Settings

  1. Log in to your Vaile Dashboard
  2. Navigate to Settings → Chat Configuration
  3. Select the Appearance tab
Changes preview in real-time on the right side of your screen

​
Color Customization

​
Primary Colors

Define your widget’s main color scheme:
  • Widget Button
  • Chat Header
  • Message Bubbles
The floating chat button color:
  • Background Color: Main button color
  • Icon Color: Chat icon color
  • Hover State: Color on mouse over
  • Shadow: Drop shadow settings
/* Example custom styling */
.vaile-widget-button {
  background-color: #6366F1;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

​
Color Picker Options

Brand Colors

  • Use eyedropper tool
  • Enter hex codes
  • RGB/HSL values
  • Save color presets

Contrast Check

  • WCAG compliance
  • Readability scores
  • Auto-suggestions
  • Accessibility warnings

​
Size and Position

​
Widget Button Size

Choose from preset sizes or custom dimensions:
1

Small (48px)

Minimal footprint, mobile-friendly
2

Medium (56px)

Balanced visibility (default)
3

Large (64px)

Maximum prominence
4

Custom

Set exact pixel dimensions

​
Position Options

Standard position for most websites:
  • 20px from bottom
  • 20px from right
  • Adjustable margins
Alternative placement:
  • Avoid conflicts with other widgets
  • Better for RTL languages
  • Custom offset values
Advanced CSS positioning:
.vaile-widget-container {
  bottom: 30px;
  right: 30px;
  z-index: 9999;
}

​
Chat Window Dimensions

Configure the chat interface size:
  • Width: 350px - 450px (default: 380px)
  • Height: 500px - 700px (default: 600px)
  • Mobile: Always full screen
  • Responsive: Auto-adjust to viewport
Larger windows may obscure website content on smaller screens

​
Typography

​
Font Settings

  • Font Family
  • Font Sizes
  • Font Weight
Choose your typography:
  • System Default: Native device fonts
  • Sans Serif: Clean, modern look
  • Custom Font: Match your website
font-family: 'Inter', -apple-system, sans-serif;

​
Icons and Graphics

​
Custom Icons

Replace default icons:

Chat Icon

  • SVG format recommended
  • 24x24px optimal
  • Two-tone support
  • Animation options

Close Icon

  • Minimize button
  • Custom X design
  • Color inheritance
  • Hover effects

​
Avatar Options

For the AI assistant avatar:
1

Default Avatar

Vaile logo or initials
2

Custom Image

Upload your logo/mascot
  • JPG, PNG, SVG
  • 40x40px minimum
  • Circular crop
3

Animated Avatar

Typing indicator animations

​
Animation Settings

​
Entrance Animations

How the widget appears:
  • Fade In
  • Slide Up
  • Scale
  • None
Smooth opacity transition
  • Duration: 200-500ms
  • Easing: ease-out
  • No motion sickness

​
Interaction Feedback

User interaction responses:
  • Button Hover: Scale, glow, or color shift
  • Click Feedback: Ripple effect or press state
  • Message Send: Slide and fade animation
  • Typing Indicator: Pulsing dots

​
Custom CSS

​
Advanced Styling

Add custom CSS for complete control: 
/* Example customizations */
.vaile-widget-container {
  /* Container styling */
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.vaile-chat-header {
  /* Header modifications */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.vaile-message-user {
  /* User message styling */
  background-color: #e0e7ff;
  color: #4338ca;
}

.vaile-message-ai {
  /* AI message styling */
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
}

​
CSS Variables

Use CSS custom properties: 
:root {
  --vaile-primary: #6366F1;
  --vaile-text: #1F2937;
  --vaile-bg: #FFFFFF;
  --vaile-border: #E5E7EB;
  --vaile-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
Test custom CSS across browsers and devices before deploying

​
Theme Presets

​
Pre-built Themes

Quick-start with professional themes:

Modern

Clean, minimal design with subtle shadows

Classic

Traditional business appearance

Friendly

Rounded corners, warm colors

Dark Mode

Dark theme for modern sites

​
Creating Custom Themes

Save your customizations as themes:
  1. Configure all appearance settings
  2. Click “Save as Theme”
  3. Name your theme
  4. Apply to other widgets/accounts

​
Responsive Design

​
Breakpoint Customization

Different styles for different screens:

​
Mobile-Specific Settings

  • Auto-hide on scroll
  • Compact button mode
  • Gesture support
  • Safe area respect

​
Accessibility Options

​
WCAG Compliance

Ensure accessibility:

​
Accessibility Settings

  • Focus Visible: Clear focus outlines
  • ARIA Labels: Descriptive labels
  • Alt Text: For images/icons
  • Color Contrast: 4.5:1 minimum

​
Testing Your Customization

​
Preview Options

1

Live Preview

See changes in real-time
2

Device Preview

Test on different screen sizes
3

A/B Testing

Compare different designs
4

User Testing

Get feedback before launch

​
Performance Considerations

Heavy customizations may impact load time. Monitor:
  • CSS file size
  • Custom font loading
  • Animation performance
  • Mobile data usage

​
Best Practices

  • Match your website’s design language
  • Use consistent colors and fonts
  • Maintain visual hierarchy
  • Consider your target audience
  • Don’t obstruct important content
  • Ensure text is readable
  • Test on real devices
  • Consider cultural preferences
  • Optimize custom images
  • Minimize CSS overrides
  • Test load times
  • Monitor engagement metrics

​
Troubleshooting

Common customization issues:
  • Styles Not Applying: Clear cache, check specificity
  • Mobile Layout Issues: Test responsive breakpoints
  • Color Contrast Warnings: Use accessibility checker
  • Font Loading Problems: Verify font URLs

​
Next Steps

Widget Behavior

Configure interaction settings

Mobile Experience

Optimize for mobile users