Mobile Experience - Vaile Documentation

Overview

With over 60% of website traffic coming from mobile devices, optimizing your chat widget for mobile users is crucial. Vaile’s widget automatically adapts to mobile screens, but understanding and configuring mobile-specific features ensures the best possible experience.

Mobile Detection

Automatic Adaptation

The widget detects mobile devices and adjusts:

Screen Size Detection

Viewport width < 768px
Touch capability check
Device orientation
Pixel density (retina)

Auto Adjustments

Full-screen chat mode
Larger touch targets
Optimized keyboard handling
Simplified animations

Device-Specific Optimization

iOS (iPhone/iPad)
Android
Tablets

Special handling for Apple devices:

Safe area insets (notch/home bar)
Smooth scrolling with momentum
Keyboard height detection
Safari-specific fixes
Haptic feedback support

Full-Screen Mode

Layout Transformation

On mobile, the widget becomes a full-screen experience:

Trigger

User taps the chat button

Animation

Smooth slide-up transition

Coverage

100% viewport height and width

Safe Areas

Respects device notches and bars

Mobile UI Components

Header Bar

Mobile-optimized header:

Dealership name/logo
Close button (top-right)
Connection status indicator
Fixed position during scroll

/* Safe area handling */
.mobile-header {
  padding-top: env(safe-area-inset-top);
  position: fixed;
  width: 100%;
}

Message Area

Optimized conversation view:

Full height minus header/input
Smooth scroll with momentum
Pull-to-refresh gesture
Auto-scroll on new messages
Larger text for readability

Input Bar

Mobile input optimization:

Fixed to viewport bottom
Rises with keyboard
Larger input field
Prominent send button
Voice input support (future)

Touch Interactions

Gesture Support

Native mobile gestures:

Touch Target Sizing

Ensure easy tapping:

Minimum Sizes

Buttons: 44x44px minimum
Links: 48px tap area
Close button: 48x48px
Send button: Prominent size

Spacing

8px minimum between targets
Padding around clickables
Avoid accidental taps
Clear visual boundaries

Keyboard Handling

Smart Keyboard Management

Prevent common mobile keyboard issues:

Viewport Adjustment
Focus Management
Keyboard Types

Handle keyboard appearance:

// Detect keyboard
visualViewport.addEventListener('resize', () => {
  const keyboardHeight = 
    window.innerHeight - visualViewport.height;
  adjustChatLayout(keyboardHeight);
});

Shift content above keyboard
Maintain input visibility
Prevent content jump

Optimize input types:

<!-- Email collection -->
<input type="email" autocomplete="email">

<!-- Phone collection -->
<input type="tel" autocomplete="tel">

<!-- General chat -->
<input type="text" autocorrect="on">

Input Accessories

Enhance mobile typing:

Autocorrect: Enable for chat
Autocomplete: For contact fields
Predictive Text: System default
Voice Input: When available

Performance Optimization

Mobile-First Loading

Optimize for limited bandwidth:

Critical CSS

Inline essential styles (< 14KB)

Lazy Loading

Load widget on interaction

Image Optimization

WebP format
Responsive sizing
Lazy load avatars

Code Splitting

Mobile-specific JavaScript bundle

Data Usage

Minimize mobile data consumption:

Message Compression

Gzip all API calls
Minimal JSON payloads
Batch message updates
Efficient polling

Asset Caching

Cache widget assets
Store recent conversations
Offline message queue
Progressive Web App features

Network Detection

Adapt to connection quality:

Reduce animations on 3G
Delay non-critical loads
Show connection status
Offline mode support

Visual Design

Mobile UI Patterns

Follow platform conventions:

iOS Design

SF font family
iOS-style buttons
Native animations
System colors

Material Design

Roboto font
Material buttons
Elevation shadows
Touch ripples

Responsive Typography

Scale text appropriately:

/* Mobile font sizing */
.mobile-chat {
  font-size: 16px; /* Prevent zoom on iOS */
  line-height: 1.5;
}

.mobile-message {
  font-size: 1rem;
  padding: 12px 16px;
}

.mobile-timestamp {
  font-size: 0.75rem;
  opacity: 0.7;
}

Accessibility on Mobile

Touch Accessibility

Support all users:

Mobile Screen Readers

Optimize for assistive technology:

VoiceOver (iOS): Proper ARIA labels
TalkBack (Android): Semantic HTML
Focus Management: Logical tab order
Announcements: Status updates

Special Considerations

Battery Impact

Minimize power consumption:

Reduce Animations
Efficient Polling

Detect low battery mode
Simplify transitions
Reduce refresh rates
Minimize repaints

Orientation Handling

Support both orientations:

Portrait Mode

Default mobile layout

Landscape Mode

Adjust header height
Side-by-side option
Maintain usability

Rotation

Smooth transitions
Maintain scroll position
Resize appropriately

Testing Mobile Experience

Device Testing

Test on real devices:

Mobile Analytics

Track mobile-specific metrics:

Device types and OS versions
Touch interaction patterns
Keyboard usage statistics
Performance metrics
Error rates by device

Common Mobile Issues

Troubleshooting Guide

Widget Not Appearing

Keyboard Overlaps Chat

Update viewport handling
Check CSS position values
Test on multiple keyboards
Implement resize observer

Slow Performance

Reduce animation complexity
Optimize image sizes
Minimize JavaScript
Enable hardware acceleration

Touch Not Responding

Increase touch target size
Remove hover states
Check z-index conflicts
Test gesture handlers

Best Practices

Mobile-First Design

Design for mobile first
Progressive enhancement
Test early and often
Real device testing

Performance Budget

< 3s load time on 3G
< 200KB initial payload
60fps animations
Minimal battery impact

Platform-Specific Features

iOS-Specific

// Add to home screen support
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Android-Specific

// Theme color for browser UI
<meta name="theme-color" content="#6366F1">

Getting Started

Installation & Setup

Setup & Configuration

Integrations

​Overview

​Mobile Detection

​Automatic Adaptation

Screen Size Detection

Auto Adjustments

​Device-Specific Optimization

​Full-Screen Mode

​Layout Transformation

​Mobile UI Components

​Touch Interactions

​Gesture Support

​Touch Target Sizing

Minimum Sizes

Spacing

​Keyboard Handling

​Smart Keyboard Management

​Input Accessories

​Performance Optimization

​Mobile-First Loading

​Data Usage

​Visual Design

​Mobile UI Patterns

iOS Design

Material Design

​Responsive Typography

​Accessibility on Mobile

​Touch Accessibility

​Mobile Screen Readers

​Special Considerations

​Battery Impact

​Orientation Handling

​Testing Mobile Experience

​Device Testing

​Mobile Analytics

​Common Mobile Issues

​Troubleshooting Guide

​Best Practices