# Voice Widget UX Research Report
## Voice AI Website Widget Design - Competitive Analysis & Best Practices

**Date**: 2026-02-16
**Purpose**: Research the best voice/talking website widget UX designs to inform Genesis Talking Widget development
**Focus**: Bottom-right floating voice AI widget for website visitor interaction

---

## Executive Summary

This research examines the leading voice AI and chat widget implementations across 10+ platforms to identify design patterns, interaction models, and UX best practices for premium voice-enabled website widgets. Key findings:

- **Slide-up panel > Modal overlay** for non-blocking voice interactions
- **Pulse + glow animations** are the gold standard for attracting attention
- **Live waveform visualization** is critical for voice state feedback
- **60-80px floating buttons** with percentage-based responsive sizing
- **Multi-modal support** (voice + text fallback) is becoming standard
- **Accessibility compliance** (WCAG 2.2 AA, screen reader support) is mandatory

---

## 1. Platform-by-Platform Analysis

### 1.1 Bland.ai

**Website**: [bland.ai](https://www.bland.ai/)

#### Floating Button Design
- **Appearance**: Not extensively documented in search results, but focus is on clean, professional design
- **Philosophy**: "No clutter, just a confident explanation of what the product does"

#### Expansion Behavior
- **Type**: Embeddable Web Widget with SMS/text integration
- **Animation**: Site recently revamped with focus on speed and clarity
- **Layout**: Fast-loading, no visual bloat

#### Voice Call UX
- **State Indicators**: Connects to conversational pathways used for calls and texts
- **Backend**: Same intelligent backend for all channels (phone, web, SMS)
- **Customization**: Fully customizable to match site's design

#### Key Strengths
- Channel flexibility (web chat, phone, SMS through same backend)
- Consistent support across all interaction methods
- Customizable to match brand identity
- Focus on clarity and speed over flashy animations

**Source**: [Bland AI Web Chat Blog](https://www.bland.ai/blogs/ai-web-chat-enterprise-support)

---

### 1.2 Retell.ai

**Website**: [retellai.com](https://www.retellai.com)

#### Floating Button Design
- **Implementation**: Single script tag integration
- **Authentication**: Uses public key system for frontend API calls (no backend proxy required)
- **Modes**: Chat mode OR callback mode (initiates phone calls via voice agents)

#### Expansion Behavior
- **Type**: Chat Widget with voice agent embedding
- **Deployment**: One-line embed via script tag
- **Customization**: Customizable and LLM-powered

#### Voice Call UX
- **Technology**: WebRTC for real-time conversation streaming
- **Testing**: Live demo at re-tell.ai (no signup required)
- **Testing Tools**: Manual Chat and AI Simulated Chat for pre-deployment testing
- **Automation**: Dynamic logic, real-time memory, LLM orchestration built-in

#### Key Strengths
- Zero backend requirement for widget deployment
- Real-time WebRTC voice streaming
- Pre-deployment testing tools (Manual + AI simulation)
- Choice between chat and callback modes

**Sources**:
- [Retell Chat Agents Blog](https://www.retellai.com/blog/meet-retell-chat-agents-build-smarter-web-chats)
- [Retell Widget Documentation](https://docs.retellai.com/deploy/chat-widget)

---

### 1.3 Vapi.ai

**Website**: [vapi.ai](https://vapi.ai/)

#### Floating Button Design
- **Implementation**: Drop-in web component, highly configurable
- **Technology**: React-based chat widget (react-chat library)
- **Customization**: Customizable styles, labels for all UI elements

#### Expansion Behavior
- **Type**: Web Widget with combined text + voice interface
- **Animation**: Supports waveform visualization and real-time transcripts
- **Responsiveness**: Responsive design optimized for all devices

#### Voice Call UX
- **Live Transcription**: Real-time text display during voice conversations
- **Waveform**: Visual audio feedback during calls
- **Call Controls**: Start, stop, mute functionalities
- **Event Handling**: Comprehensive event system for call and audio events
- **Function Calling**: Built-in support for triggering actions during conversation

#### Key Strengths
- Best-in-class waveform visualization
- Real-time transcription display
- Full event handling system for developers
- Open-source React component on GitHub
- Multimodal (voice + text chat in same interface)

**Sources**:
- [Vapi Web Widget Docs](https://docs.vapi.ai/chat/web-widget)
- [Vapi Voice Widget Example](https://docs.vapi.ai/assistants/examples/voice-widget)

---

### 1.4 ElevenLabs Conversational AI

**Website**: [elevenlabs.io](https://elevenlabs.io/)

#### Floating Button Design
- **Customization**: Colors, shapes, text content, language all customizable
- **Configuration**: Managed through dashboard Widget tab
- **Branding**: Full brand identity matching

#### Expansion Behavior
- **Type**: Interactive, animated widget
- **Integration**: Easy embed anywhere (WordPress, Wix, Webflow, Framer, etc.)
- **Modes**: Voice-only (default), Voice + Text (switchable), Chat-only (text-first)

#### Voice Call UX
- **Multimodal Processing**: Simultaneous voice + text input interpretation
- **Latency**: Industry-leading low latency for natural conversation
- **Visual Feedback**: Animated widget with real-time interaction states
- **Event System**: Client tools with event listeners for custom behaviors

#### Key Strengths
- Multimodal by design (voice + text simultaneously)
- Extremely low latency voice processing
- Widest platform integration support (10+ platforms documented)
- Event-driven extensibility for developers
- Voice + text mode switching during conversation

**Sources**:
- [ElevenLabs Widget Customization](https://elevenlabs.io/docs/conversational-ai/customization/widget)
- [ElevenLabs Webflow Integration](https://elevenlabs.io/blog/add-elevenlabs-conversational-ai-to-webflow-websites)

---

### 1.5 Intercom Messenger

**Website**: [intercom.com](https://www.intercom.com/)

#### Floating Button Design
- **Position**: Bottom-right corner (default), customizable via `alignment`, `horizontal_padding`, `vertical_padding`
- **Size**: Responsive, considers touch target sizing for mobile
- **Accessibility**: Built with screen reader support and keyboard navigation

#### Expansion Behavior
- **Type**: Slide-up panel (not full modal)
- **Animation**: Smooth slide-in from bottom-right
- **Height**: Recommended max 50% of messenger height for first canvas to avoid screen takeover
- **Consistency**: Either neutral branding or full-bleed branded approach

#### Best Practices from Intercom
- **Content**: 3-5 search results max, use "See more" button for pagination
- **Focus States**: Proper keyboard navigation with visual indicators
- **Localization**: Use `locale` attribute to adapt to user's language
- **Copywriting**: Platform controls text copy to maintain UX consistency
- **Multi-App Context**: Considerate of height since other apps appear in same messenger

#### Key Strengths
- Gold standard of chat widget UX (most referenced in industry)
- Accessibility-first design (WCAG compliance, keyboard nav, screen readers)
- Extensive positioning customization
- Multi-app ecosystem (other tools integrate into same widget)
- Strong focus on not taking over user's screen

**Sources**:
- [Intercom Customization Docs](https://developers.intercom.com/installing-intercom/web/customization)
- [Intercom Messenger Best Practices](https://developers.intercom.com/docs/canvas-kit/canvas-kit-messenger-best-practices)
- [Intercom Accessibility Blog](https://www.intercom.com/blog/messenger-accessibility/)

---

### 1.6 Drift

**Website**: [drift.com](https://www.drift.com)

#### Floating Button Design
- **Customization**: Widget colors, logo, and style fully customizable
- **Branding**: Match brand's visual identity
- **Configuration**: Settings > Apps > Draft Widget > Design and Language

#### Expansion Behavior
- **Type**: Conversational widget (slide-up panel)
- **Performance**: Lightweight widget for fast loading

#### Key Strengths
- Live chat + chatbots + email marketing in one widget
- CRM integrations
- Fast loading performance
- Clean, professional design

**Source**: [Drift Widget Design Guide](https://gethelp.drift.com/hc/en-us/articles/360019663113-How-to-Change-the-Design-of-Your-Widget-and-Bot)

---

### 1.7 Tidio

**Website**: [tidio.com](https://www.tidio.com/)

#### Floating Button Design
- **Icon**: Speech bubble with chat icon + short motivating text
- **Colors**: Match website color scheme
- **Position**: Bottom-right (default) or bottom-left
- **Size**: Three size options for mobile
- **Animation**: Pulse/glow to attract attention without distraction
- **Visibility**: Subtle side placement that doesn't obstruct browsing

#### Expansion Behavior
- **Type**: Slide-up chat panel
- **Mobile**: Responsive with separate mobile configuration
- **Label**: "Chat with us" CTA on closed widget for increased visibility

#### Design Philosophy
- **Universally Understandable**: Floating speech bubble is globally recognized
- **Simple & Engaging**: Design must be clean to encourage clicks
- **Brand Consistent**: Colors and fonts match site design
- **Non-Intrusive**: Visible but not distracting

#### Key Strengths
- One of the most popular chat widgets globally
- Excellent mobile responsiveness
- Clear design guidelines for universality
- Separate desktop/mobile configuration
- Strong CTA labeling on button

**Sources**:
- [Tidio Widget Position](https://help.tidio.com/hc/en-us/articles/5464851341724-Widget-Position)
- [Tidio Live Chat Icons Guide](https://www.tidio.com/blog/live-chat-icon/)

---

### 1.8 Ada.cx

**Website**: [ada.cx](https://ada.cx/)

#### Floating Button Design
- **Visibility**: Easy to identify, visually familiar
- **Consistency**: Consistent across different touchpoints
- **Placement**: Strategic on pages where customers access support or encounter friction (login, billing, cancellation pages)

#### Expansion Behavior
- **Type**: Web chat widget (classic style)
- **Customization**: Look and feel customizable via embed script
- **Branding**: Full brand guideline compliance

#### Voice Call UX
- **Technology**: Generative AI responses set it apart from traditional chat
- **Expectations**: Example prompts shown ("Try asking me about x, y, or z")
- **Transparency**: Clear indication that user is speaking to a bot, not human

#### Key Strengths
- Strategic placement guidance (friction points)
- Setting user expectations upfront (bot vs human clarity)
- Example prompts to guide conversation
- Generative AI for natural responses

**Sources**:
- [Ada Chat Onboarding](https://docs.ada.cx/docs/channels/chat/chat-onboarding)
- [Ada Positive Chatter Experiences](https://docs.ada.cx/scripted/docs/before-you-begin/design-positive-chatter-experiences)

---

### 1.9 Voiceflow

**Website**: [voiceflow.com](https://www.voiceflow.com/)

#### Floating Button Design
- **Configuration**: Brand colors, icons, launcher type all customizable
- **Settings**: Header image, input placeholder, privacy policy links
- **Styling**: Built-in configuration fields + custom CSS override support

#### Expansion Behavior
- **Type**: Web chat panel with voice input/output
- **Customization**: CSS class-based styling (`.vfrc` prefix)
- **Deployment**: Embeddable code snippet

#### Voice Call UX
- **Voice Providers**: ElevenLabs (default), Rhyme, Google, Amazon, Microsoft
- **Voice Selection**: Choose specific voice + model
- **Background Audio**: Configurable
- **Prototype Testing**: Designer tool includes voice input/output for flow refinement

#### Key Strengths
- Drag-and-drop conversation designer
- Multi-provider voice support (5 providers)
- Custom component support for advanced use cases
- Voice + text chat combined
- Open-source React chat component (react-chat)

**Sources**:
- [Voiceflow Web Chat Widget](https://docs.voiceflow.com/docs/chat-widget)
- [Voiceflow Styling Docs](https://docs.voiceflow.com/docs/embed-customize-styling)

---

## 2. Visual Feedback Patterns

### 2.1 "I'm Listening" State

Based on research of Vocalis and other voice AI implementations:

#### Visual Indicators
- **Pulsing Glow**: Green animation with rhythmic pulse during listening
- **Particle Animations**: Subtle particle effects during audio processing
- **Waveform**: Static or gentle waveform movement showing microphone input
- **Color**: Typically green, blue, or brand primary color
- **Label**: "Listening..." or microphone icon with visual pulse

#### Examples
- **Vocalis**: Pulsing green glow during listening state
- **CodeRush**: Green feedback UI animation with descriptive label
- **Jarvis AI**: Animated GIFs for emotional states with visual feedback

**Sources**:
- [Vocalis GitHub](https://github.com/Lex-au/Vocalis)
- [CodeRush Voice Setup](https://community.devexpress.com/Blogs/markmiller/archive/2024/03/05/voice-setup-in-coderush-for-visual-studio.aspx)

---

### 2.2 "I'm Speaking" State

#### Visual Indicators
- **Wave Motion**: Wave-like animations synced to speech output
- **Active Waveform**: Real-time audio visualization matching AI voice
- **Color**: Typically blue, purple, or different from "listening" state
- **Animation**: More dynamic than listening state
- **Intensity**: Matches speech volume/intensity

#### Advanced Features
- **Lip Sync Avatars**: AI avatars with facial animation synced to speech (HeyGen, SadTalker)
- **Real-Time Transcription**: Live text display of AI responses
- **Status Labels**: "Speaking...", "Responding...", or similar

**Sources**:
- [HeyGen AI Avatars](https://www.heygen.com/avatars)
- [SadTalker AI](https://sadtalkerai.com/)

---

### 2.3 Processing/Thinking State

#### Visual Indicators
- **Particle Animations**: Active particles or dots during LLM processing
- **Spinner/Loader**: Subtle loading indicator
- **Color Shift**: Orange or amber (CodeRush uses orange for code mode)
- **Pulsing**: Slower pulse compared to listening state
- **Label**: "Thinking...", "Processing...", or similar

---

### 2.4 Waveform Visualization Best Practices

Based on waveform research across platforms:

#### Design Patterns
- **Styles**: Classic bars, stacked bars, circular, bubble designs
- **Modes**: Static (frozen waveform) or Scrolling (live moving waveform)
- **Sensitivity**: Adjustable to pick up subtle voice details vs smooth flow
- **Performance**: Throttled UI updates, 16kHz sample rate for speech

#### Visual Design
- **High Contrast**: Clear readability against background
- **Color Psychology**: Warm tones (energy), cool tones (calm)
- **Non-Cluttered**: Clean, minimal UI
- **Pixel-Perfect**: Custom visualizations for brand consistency

**Sources**:
- [ElevenLabs Live Waveform](https://ui.elevenlabs.io/docs/components/live-waveform)
- [Flutter Audio Waveforms](https://blog.logrocket.com/audio-waveforms-flutter-app/)

---

## 3. Animation & Attention Patterns

### 3.1 Floating Button Animations

Based on CSS animation research:

#### Attention-Grabbing Effects
- **Pulse**: Rhythmic scale animation (breathing effect)
- **Glow**: Neon-style lighting with animated opacity/spread
- **Bounce**: Gentle bouncing effect (Tailwind's `animate-bounce`)
- **Heartbeat**: Sine-wave scale pulse
- **Notification Dots**: Pulsing badge for new messages

#### Animation Libraries
- **Animate.css**: bounce, flash, pulse, rubberBand, shake, headShake, swing, tada, wobble, jello, heartBeat
- **Tailwind CSS**: animate-pulse, animate-bounce, animate-spin
- **Custom**: CSS @keyframes with transform, filter, box-shadow

#### Best Practices
- **No JavaScript Required**: Pure CSS animations perform better
- **Dark Mode**: Glow effects especially effective on dark backgrounds
- **Subtle**: Attract attention without annoying users
- **Performance**: Use `transform` instead of `width`/`height` for GPU acceleration

**Sources**:
- [CSS Pulse Generator](https://colrlab.com/tools/pulse-glow-generator)
- [Tailwind Animations Guide](https://prismic.io/blog/tailwind-animations)
- [CSS Glow Effects](https://devsnap.me/css-glow-effects)

---

### 3.2 Expansion Animation Timing

Based on Nielsen Norman Group and Adobe UX research:

#### Timing Guidelines
- **Appear (Slide In)**: 200-300ms
- **Disappear (Slide Out)**: 150-250ms (slightly faster)
- **Substantial Screen Changes**: 300ms appropriate
- **Rule of Thumb**: Entering animations slightly longer than exiting

#### Panel Types
- **Slide-Up Panel**: Enters from bottom, doesn't fully obscure page
- **Modal Overlay**: Full screen overlay with backdrop blur
- **Recommendation**: Slide-up panel > modal for chat widgets (non-blocking, maintains context)

**Sources**:
- [Nielsen Norman Animation Duration](https://www.nngroup.com/articles/animation-duration/)
- [Adobe Slide-out Panel Patterns](https://developer.adobe.com/commerce/admin-developer/pattern-library/containers/slideouts-modals-overlays)

---

## 4. Size & Dimension Guidelines

### 4.1 Floating Button Size

Based on multiple platform implementations:

#### Desktop
- **Size**: 60-80px diameter for circular buttons
- **Touch Target**: Minimum 44x44px (WCAG guideline)
- **Offset**: 20-50px from screen edge
- **Position**: Bottom-right (90% of implementations) or bottom-left

#### Mobile
- **Size**: 3 size options commonly offered (small/medium/large)
- **Touch Target**: Minimum 48x48px (mobile WCAG)
- **Offset**: 16-24px from screen edge (thumb-friendly)
- **Responsive**: Use % or em values, not fixed px

#### Best Practices
- Use percentage values for responsiveness across screen sizes
- Test touch targets on actual devices (not just emulators)
- Ensure button doesn't obscure critical page content
- Consider safe zones on mobile (notches, gesture areas)

**Sources**:
- [Widget Dimensions Guide](https://support.gettalkative.com/support/solutions/articles/201000057476-adjust-chat-widget-dimensions-positioning-full-screen-mode)
- [Mobile Widget Best Practices](https://cygnis.co/blog/widget-development-in-mobile-apps/)

---

### 4.2 Expanded Panel Size

#### Desktop
- **Width**: 350-400px typical
- **Height**: 500-600px or 60-70% of viewport height
- **Max Height**: Leave parent page partially visible (context preservation)
- **Position**: Right-aligned, anchored to floating button

#### Mobile
- **Width**: 100% viewport width (full screen)
- **Height**: 80-90% viewport height (leave header visible)
- **Behavior**: Slide up from bottom
- **Safe Zones**: Respect device notches and gesture areas

---

## 5. Mobile Considerations

Based on responsive design and mobile UX research:

### 5.1 Mobile-Specific Design Patterns

#### Touch Interaction
- **Touch Targets**: 48x48px minimum (WCAG 2.2)
- **Spacing**: Adequate spacing to prevent accidental taps
- **Context**: Design for quick, on-the-go access
- **Gestures**: Swipe down to close, tap outside to dismiss

#### Performance
- **Minimize Animations**: Reduce complex processing on mobile
- **CPU/Memory**: Keep usage low to avoid battery drain
- **Lazy Loading**: Load resources only when widget expands
- **Caching**: Implement effective caching for offline scenarios

#### Voice on Mobile
- **Microphone Permissions**: Clear prompt for mic access
- **Error Handling**: Graceful degradation if mic denied
- **Background Noise**: Clear visual feedback if audio quality poor
- **Privacy**: Visual indicator when mic is active (recording dot)

**Sources**:
- [Mobile Widget Development](https://cygnis.co/blog/widget-development-in-mobile-apps/)
- [Voice UX Best Practices](https://designlab.com/blog/voice-user-interface-design-best-practices)

---

### 5.2 Responsive Breakpoints

#### Recommendations
- **Desktop**: 1024px+ (full panel, waveform, transcripts)
- **Tablet**: 768-1023px (medium panel, simplified UI)
- **Mobile**: <768px (full-screen takeover, simplified controls)
- **Micro**: <375px (ultra-minimal UI, voice-only mode)

---

## 6. Accessibility Requirements

Based on WCAG 2.2 and accessibility research:

### 6.1 WCAG 2.2 AA Compliance

#### Four Core Principles (WCAG)
1. **Perceivable**: Information presented in ways all users can perceive
2. **Operable**: Navigation usable by everyone (keyboard, screen reader, voice)
3. **Understandable**: Information and operation must be understandable
4. **Robust**: Content must work with assistive technologies

#### Required Features
- **Keyboard Navigation**: Full functionality without mouse
- **Focus States**: Clear visual indicators for keyboard users
- **ARIA Labels**: Proper semantic HTML with ARIA attributes
- **Screen Reader Support**: Works with JAWS, NVDA, VoiceOver, TalkBack
- **Color Contrast**: Minimum 4.5:1 for text, 3:1 for UI components
- **Voice Navigation**: Support alternative inputs/commands

**Sources**:
- [AXS Accessibility Toolbar](https://www.callingallminds.com/axs-toolbar)
- [Inaza AI Accessibility Guide](https://www.inaza.com/blog/accessibility-in-ai-customer-service-wcag-for-voice-chat)

---

### 6.2 Screen Reader Compatibility

#### Implementation
- Use semantic HTML (`<button>`, `<nav>`, `<main>`)
- Add `aria-label`, `aria-describedby`, `aria-live` attributes
- Announce state changes ("Listening", "Speaking", "Processing")
- Provide text alternatives for visual-only feedback
- Support voice input as alternative to clicking

#### Testing
- Test with JAWS (Windows), NVDA (Windows), VoiceOver (Mac/iOS), TalkBack (Android)
- Ensure all interactive elements are reachable via keyboard
- Verify announcements make sense in audio-only context

**Source**: [Screen Reader Accessibility Plugin](https://wordpress.org/plugins/screen-reader-with-fontsize/)

---

## 7. Premium vs Cheap Widget Design

Based on competitive analysis research:

### 7.1 What Makes a Widget Look "Premium"

#### Visual Design
- **Micro-Interactions**: Smooth animations, delightful transitions
- **Polish**: Attention to detail (shadows, gradients, spacing)
- **Branding**: Cohesive with site design, not generic
- **Typography**: Professional fonts, proper hierarchy
- **Icons**: Custom or high-quality icon sets
- **Animations**: Subtle, purposeful, not distracting

#### Functionality
- **AI Automation**: Not just live chat, but intelligent responses
- **Personalization**: Context-aware, remembers user
- **Multi-Channel**: Voice + text seamlessly integrated
- **Real-Time**: No lag, instant feedback
- **Smart Features**: Sentiment analysis, intent detection, proactive engagement

#### Performance
- **Fast Loading**: <500ms to interactive
- **Lightweight**: Doesn't slow down page
- **Optimized**: Lazy loading, efficient rendering
- **Reliable**: Minimal downtime, error handling

---

### 7.2 Common Cheap Widget Mistakes

#### Visual
- Generic, unstyled appearance
- Jarring, excessive animations
- Poor color choices (low contrast, clashing)
- Pixelated or low-quality icons
- Inconsistent with site branding

#### Functional
- No AI automation (requires live agent always)
- Slow response times
- Limited to text-only (no voice)
- No offline mode or fallback
- Poor error messages

#### Technical
- Slow loading, blocks page render
- Not mobile-responsive
- No accessibility support
- Breaks on certain browsers
- Doesn't handle network issues

**Sources**:
- [Best Chat Widgets Comparison](https://www.tidio.com/blog/chat-widgets/)
- [Free vs Premium Chat Widgets](https://seasalt.ai/en/blog/108-free-chatbot-widget/)

---

## 8. RECOMMENDATIONS FOR GENESIS TALKING WIDGET

Based on all research findings, here are the recommendations for our premium voice AI widget:

---

### 8.1 Floating Button Design

#### Visual Appearance
- **Shape**: Circular button, 70px diameter on desktop, responsive scaling on mobile
- **Icon**: Microphone icon (universally understood for voice) OR animated waveform icon
- **Color**: Brand primary color with 2px solid border in complementary color
- **Shadow**: Soft drop shadow (0 4px 12px rgba(0,0,0,0.15)) for depth
- **Animation**: **Continuous subtle pulse** (scale 1.0 to 1.05, 2s duration, ease-in-out)
- **Hover**: **Glow effect** (box-shadow with brand color, 0 0 20px rgba(primary, 0.6))
- **Notification**: **Badge with count** if there are unread messages (pulsing red dot)

#### Positioning
- **Default**: Bottom-right corner
- **Offset**: 24px from bottom, 24px from right (desktop), 16px on mobile
- **Z-Index**: 9999 to stay above all page elements
- **Configurable**: Allow client to choose bottom-left if needed

#### Accessibility
- **ARIA Label**: `aria-label="Start voice conversation with AI assistant"`
- **Keyboard**: Focusable via Tab, activatable with Enter/Space
- **Focus State**: 3px outline in high-contrast color
- **Screen Reader**: Announces button purpose and state

---

### 8.2 Expansion Animation & Panel Design

#### Animation Behavior
- **Type**: **Slide-up panel** (NOT full modal - maintains page context)
- **Duration**: 300ms slide-in (ease-out), 200ms slide-out (ease-in)
- **Overlay**: Semi-transparent backdrop (rgba(0,0,0,0.3)) with backdrop-blur(4px)
- **Dismissal**: Click outside panel, ESC key, or swipe down (mobile)

#### Panel Dimensions
- **Desktop**: 380px width × 600px height (or 65% viewport height, whichever is smaller)
- **Mobile**: 100% width × 85% height, slide up from bottom edge
- **Position**: Anchored to floating button on desktop, full-width bottom on mobile
- **Max Height**: Never exceed 80% of viewport to preserve context

#### Panel Structure
```
┌─────────────────────────────────┐
│  Header (AI Name + Close)       │ ← 60px height, brand colors
├─────────────────────────────────┤
│                                 │
│  Waveform Visualization         │ ← 200px height, animated
│  (Live Audio Feedback)          │
│                                 │
├─────────────────────────────────┤
│                                 │
│  Real-Time Transcript           │ ← Scrollable, auto-scroll
│  (AI + User Messages)           │
│                                 │
├─────────────────────────────────┤
│  Status Indicator               │ ← 40px, "Listening" / "Speaking"
│  [●] Recording...               │
├─────────────────────────────────┤
│  Voice Controls                 │ ← 80px, Mute | End Call
└─────────────────────────────────┘
```

---

### 8.3 Voice Call UX - Visual Feedback States

#### State 1: Idle / Ready
- **Waveform**: Flat line or gentle ambient pulse
- **Color**: Neutral gray (#6B7280)
- **Status**: "Tap to speak" or "Ready to listen"
- **Button**: Microphone icon, primary color

#### State 2: Listening (User Speaking)
- **Waveform**: **Real-time audio visualization** matching user's voice amplitude
- **Color**: **Green (#10B981)** for "active listening"
- **Animation**: **Pulsing glow** around waveform (2s pulse)
- **Status**: "Listening..." with animated dots
- **Particles**: Subtle particle effects flowing from mic icon to center

#### State 3: Processing (AI Thinking)
- **Waveform**: **Particle animation** or gentle wave motion
- **Color**: **Amber (#F59E0B)** for "processing"
- **Animation**: Slower pulse (3s), thinking indicator
- **Status**: "Thinking..." with spinner
- **Visual**: Small dots moving in circular pattern

#### State 4: Speaking (AI Responding)
- **Waveform**: **Dynamic visualization** synced to AI voice output
- **Color**: **Blue (#3B82F6)** for "AI speaking"
- **Animation**: **Wave-like motion** matching speech intensity
- **Status**: "Speaking..." or AI name speaking
- **Intensity**: Waveform amplitude matches AI voice volume

#### State 5: Error
- **Waveform**: Flat line or error icon
- **Color**: **Red (#EF4444)**
- **Status**: Clear error message ("Couldn't hear you, try again")
- **Action**: Suggest fallback (text chat, refresh, retry)

---

### 8.4 Premium Features to Include

#### 1. Multi-Modal Support
- **Voice Primary**: Voice is the default, primary interaction
- **Text Fallback**: Allow typing if voice fails or user prefers text
- **Seamless Switch**: Switch mid-conversation between voice and text
- **Visual Indicator**: Show current input mode (mic icon vs keyboard icon)

#### 2. Real-Time Transcription
- **Live Display**: Show user's words as they speak (like live captions)
- **AI Responses**: Display AI's spoken words as text simultaneously
- **Scrollable**: Auto-scroll to latest message, manual scroll to review
- **Copy/Share**: Allow user to copy transcript for reference

#### 3. Advanced Waveform Visualization
- **Technology**: Use Canvas API or WebGL for smooth 60fps animation
- **Sensitivity**: Auto-adjust sensitivity based on ambient noise
- **Style Options**: Bars, circular, blob, or custom brand style
- **Colors**: Match brand colors, shift with state (green → amber → blue)

#### 4. Avatar Option (Premium Tier)
- **Avatar Display**: Optional AI avatar with lip-sync (à la HeyGen, ElevenLabs)
- **Facial Animation**: Mouth movement synced to AI speech
- **Expressions**: Subtle facial expressions (neutral, thinking, smiling)
- **Fallback**: If avatar disabled, show waveform instead

#### 5. Smart Interruption Handling
- **Mid-Speech Interrupt**: Allow user to interrupt AI (like real conversation)
- **Visual Feedback**: Waveform immediately switches to "listening" when user speaks
- **Graceful Stop**: AI stops speaking, acknowledges interruption

#### 6. Proactive Engagement
- **Idle Detection**: If user visits certain pages, proactively offer help
- **Example**: "Need help with pricing? I can answer that!"
- **Pulse Animation**: Stronger pulse to attract attention
- **Dismissible**: User can dismiss and it won't re-appear for 24h

---

### 8.5 Technical Implementation

#### Voice Technology
- **Provider**: Telnyx (already integrated in Genesis stack)
- **Fallback**: ElevenLabs for voice synthesis if needed
- **WebRTC**: Real-time audio streaming
- **Latency**: <500ms response time target

#### Frontend Stack
- **Framework**: React (for react-chat style component) OR Vanilla JS (lighter)
- **Animation**: Framer Motion or GSAP for smooth animations
- **Waveform**: WaveSurfer.js or custom Canvas implementation
- **CSS**: Tailwind CSS for rapid styling + custom animations

#### Accessibility
- **WCAG 2.2 AA**: Full compliance
- **Screen Readers**: ARIA labels, live regions for status changes
- **Keyboard Nav**: Tab through all controls, Enter/Space to activate
- **Focus Management**: Trap focus in panel when open
- **Skip Links**: Allow keyboard users to skip to main controls

#### Mobile Optimization
- **Responsive**: Breakpoints at 768px (tablet), 375px (mobile)
- **Touch**: 48x48px touch targets minimum
- **Gestures**: Swipe down to close (native mobile pattern)
- **Performance**: Lazy load waveform library, throttle updates to 30fps on mobile

---

### 8.6 Branding & Customization

#### Client Customization Options
1. **Colors**: Primary, secondary, accent colors for all UI elements
2. **Logo**: Client logo in header (optional)
3. **AI Name**: Customizable AI assistant name
4. **Voice**: Choose from voice library (accent, gender, tone)
5. **Greeting**: Custom first message ("Hi! I'm here to help with...")
6. **Position**: Bottom-right or bottom-left
7. **Icon**: Microphone, waveform, or custom icon
8. **Avatar**: Enable/disable avatar display

#### Genesis Branding (Default)
- **Colors**: Signal Blue (#3B82F6) primary, Cosmic Void (#0B0C0E) dark
- **Font**: Modern sans-serif (Inter or similar)
- **Icon**: Animated waveform icon (brand signature)
- **Avatar**: Optional Genesis AI avatar with voice sync
- **Watermark**: Small "Powered by Sunaiva" in footer (removable on premium tiers)

---

### 8.7 Mobile-Specific Design

#### Mobile Optimization
- **Full Screen Takeover**: 100% width, 85% height on mobile
- **Swipe Gestures**: Swipe down to minimize/close
- **Large Touch Targets**: All buttons 48x48px minimum
- **Simplified UI**: Fewer visual elements, focus on waveform + transcript
- **Voice-First**: Text input as secondary option (voice is primary)
- **Landscape**: Adapt layout for landscape orientation (wider waveform)

#### Performance
- **Lightweight**: <100KB widget code (before voice SDK)
- **Lazy Load**: Load voice SDK only when widget opens
- **Throttle**: Reduce waveform update rate to 30fps on mobile (vs 60fps desktop)
- **Battery**: Minimize CPU usage, stop processing when minimized

---

### 8.8 Error Handling & Fallbacks

#### Common Errors
1. **Microphone Denied**: Show clear message, offer text chat fallback
2. **Poor Connection**: Indicate network issue, suggest retry
3. **No Speech Detected**: "I didn't catch that, could you repeat?"
4. **API Failure**: Graceful degradation, suggest callback or email
5. **Browser Not Supported**: Detect unsupported browser, show compatibility message

#### Fallback Hierarchy
1. **Voice AI** (primary)
2. **Text Chat** (if mic denied or voice fails)
3. **FAQ Links** (if AI unavailable)
4. **Contact Form** (if all else fails)

---

### 8.9 Premium vs Standard Tiers

#### Standard Tier (Free/Low-Cost)
- Text chat + basic voice
- Single voice option
- No avatar
- Standard waveform visualization
- 5-second response time
- "Powered by Sunaiva" watermark

#### Premium Tier (Paid)
- Advanced voice AI with low latency (<500ms)
- Voice library (10+ voices)
- Optional avatar with lip-sync
- Advanced waveform (custom brand style)
- Real-time transcription
- Proactive engagement
- Multi-language support
- White-label (no watermark)

#### Enterprise Tier
- Dedicated voice model (fine-tuned)
- Custom avatar (client's brand character)
- Unlimited conversations
- Advanced analytics dashboard
- Priority support
- Custom integrations
- SLA guarantees

---

## 9. Competitive Positioning

### 9.1 How Genesis Widget Differentiates

#### vs Intercom
- **Genesis**: Voice-first (Intercom is text-first)
- **Genesis**: More affordable for small businesses
- **Genesis**: Faster setup (no CRM complexity)

#### vs ElevenLabs
- **Genesis**: Better pricing (bundled with other services)
- **Genesis**: More customization options
- **Genesis**: Integrated with Genesis memory (learns over time)

#### vs Vapi/Retell
- **Genesis**: No backend required for clients (we host everything)
- **Genesis**: Simpler pricing (flat monthly, not per-minute)
- **Genesis**: Better for non-technical users (no code required)

#### vs Bland
- **Genesis**: Superior UI/UX (Bland is developer-focused)
- **Genesis**: More visual polish (Bland is functional but plain)
- **Genesis**: Better for B2C (Bland targets enterprises)

---

### 9.2 Target Market Positioning

#### Primary Audience
- **Tradie businesses** (plumbers, electricians, builders) needing 24/7 receptionist
- **Service businesses** (lawyers, accountants, consultants) wanting to qualify leads
- **E-commerce** (online stores) offering product support and recommendations
- **Healthcare** (clinics, dentists) for appointment booking and FAQs

#### Pricing Strategy
- **Widget Starter**: $97/mo (voice + text, 500 conversations, standard voice)
- **Widget Pro**: $197/mo (advanced voice, avatar, 2000 conversations, analytics)
- **Widget Enterprise**: $497/mo (custom voice, white-label, unlimited, SLA)

#### Value Proposition
> "The most beautiful voice AI widget on the market. Premium UX at a fraction of enterprise pricing. Install in 2 minutes, impress customers forever."

---

## 10. Implementation Roadmap

### Phase 1: MVP (Week 1-2)
- [ ] Floating button with pulse animation
- [ ] Slide-up panel with basic layout
- [ ] Telnyx voice integration (reuse AIVA backend)
- [ ] Basic waveform visualization (WaveSurfer.js)
- [ ] Simple transcript display
- [ ] Basic state indicators (listening/speaking)
- [ ] Mobile responsive design
- [ ] Accessibility basics (keyboard nav, ARIA labels)

### Phase 2: Polish (Week 3-4)
- [ ] Advanced waveform (custom Canvas implementation)
- [ ] Real-time transcription
- [ ] Multi-modal (voice + text switching)
- [ ] Error handling & fallbacks
- [ ] Client customization options (colors, logo, name)
- [ ] Analytics tracking (conversation starts, duration, satisfaction)

### Phase 3: Premium Features (Week 5-6)
- [ ] Avatar with lip-sync (ElevenLabs integration)
- [ ] Proactive engagement logic
- [ ] Advanced interruption handling
- [ ] Multi-language support
- [ ] White-label option
- [ ] Admin dashboard for analytics

### Phase 4: Scale & Enterprise (Week 7-8)
- [ ] Custom voice fine-tuning
- [ ] Custom avatar creation
- [ ] Advanced integrations (CRM, calendar, payments)
- [ ] A/B testing framework
- [ ] Enterprise SLA features

---

## 11. Key Takeaways & Design Principles

### 11.1 Core Design Principles

1. **Voice-First, Not Voice-Only**: Always provide text fallback, but optimize for voice
2. **Non-Blocking**: Slide-up panel > modal overlay (preserve page context)
3. **Clear State Feedback**: User should always know what's happening (listening/processing/speaking)
4. **Premium Feel**: Micro-interactions, smooth animations, attention to detail
5. **Accessibility**: WCAG 2.2 AA compliance is mandatory, not optional
6. **Performance**: Fast loading, lightweight, mobile-optimized
7. **Simplicity**: Complex under the hood, simple for user (no learning curve)

---

### 11.2 Must-Have Features

- ✅ **Pulse animation** on floating button (attracts attention)
- ✅ **Slide-up panel** expansion (non-blocking)
- ✅ **Real-time waveform** visualization (listening/speaking feedback)
- ✅ **Live transcription** (accessibility + user confidence)
- ✅ **Multi-modal** support (voice + text seamless switching)
- ✅ **Mobile responsive** (full-screen on mobile, gestures)
- ✅ **Keyboard navigation** (WCAG compliance)
- ✅ **Error handling** (graceful degradation, clear messages)

---

### 11.3 Nice-to-Have Features

- ⭐ **Avatar with lip-sync** (premium tier differentiator)
- ⭐ **Proactive engagement** (AI initiates conversation on key pages)
- ⭐ **Sentiment analysis** (adapt tone based on user emotion)
- ⭐ **Voice accent options** (Australian, American, British, etc.)
- ⭐ **Background blur** during call (focus user's attention)
- ⭐ **Smart interruption** (mid-speech interrupt like real conversation)

---

## 12. Success Metrics

### 12.1 Widget Performance KPIs

- **Engagement Rate**: % of visitors who click the widget
- **Conversation Start Rate**: % who actually start talking after opening
- **Completion Rate**: % who complete their query successfully
- **Satisfaction Score**: Post-conversation rating (1-5 stars)
- **Response Time**: Average time to first AI response (<500ms target)
- **Error Rate**: % of conversations with technical errors (<2% target)

### 12.2 Business KPIs

- **Lead Conversion**: % of conversations that result in qualified lead
- **Support Deflection**: % of support queries handled without human
- **Time Saved**: Hours of staff time saved per month
- **Revenue Attribution**: $ revenue generated from widget conversations
- **Customer Acquisition Cost**: Cost per new customer via widget

---

## Conclusion

The research clearly shows that **premium voice AI widgets** share these common traits:

1. **Subtle, continuous pulse animation** on the floating button (not annoying, just present)
2. **Slide-up panel** that doesn't block the entire page (maintains context)
3. **Real-time waveform visualization** that changes with state (listening/speaking)
4. **Live transcription** for accessibility and user confidence
5. **Multi-modal support** (voice + text) for maximum flexibility
6. **Mobile-first responsive design** with touch-optimized controls
7. **WCAG 2.2 AA accessibility** as a baseline requirement
8. **Fast performance** (<500ms load, <500ms response)

For Genesis, our competitive advantage will be:
- **Superior visual design** (polish, animations, micro-interactions)
- **Better pricing** (affordable for small businesses, not just enterprises)
- **Easier setup** (2-minute embed, no code required)
- **Integrated memory** (widget learns from previous conversations via Genesis memory stack)

By combining Vapi's waveform quality, Intercom's accessibility standards, ElevenLabs' voice quality, and Tidio's approachable design, we can build **the most beautiful and effective voice AI widget on the market**.

---

## Sources

### Voice AI Platforms
- [Bland AI Web Chat](https://www.bland.ai/blogs/ai-web-chat-enterprise-support)
- [Retell AI Chat Widget Docs](https://docs.retellai.com/deploy/chat-widget)
- [Retell Chat Agents Blog](https://www.retellai.com/blog/meet-retell-chat-agents-build-smarter-web-chats)
- [Vapi Web Widget Docs](https://docs.vapi.ai/chat/web-widget)
- [Vapi Voice Widget Example](https://docs.vapi.ai/assistants/examples/voice-widget)
- [ElevenLabs Widget Customization](https://elevenlabs.io/docs/conversational-ai/customization/widget)
- [ElevenLabs Webflow Integration](https://elevenlabs.io/blog/add-elevenlabs-conversational-ai-to-webflow-websites)

### Chat Widget Best Practices
- [Intercom Messenger Customization](https://developers.intercom.com/installing-intercom/web/customization)
- [Intercom Best Practices](https://developers.intercom.com/docs/canvas-kit/canvas-kit-messenger-best-practices)
- [Intercom Accessibility](https://www.intercom.com/blog/messenger-accessibility/)
- [Drift Widget Design](https://gethelp.drift.com/hc/en-us/articles/360019663113-How-to-Change-the-Design-of-Your-Widget-and-Bot)
- [Tidio Widget Position](https://help.tidio.com/hc/en-us/articles/5464851341724-Widget-Position)
- [Tidio Live Chat Icons](https://www.tidio.com/blog/live-chat-icon/)
- [Ada Chat Onboarding](https://docs.ada.cx/docs/channels/chat/chat-onboarding)
- [Ada Design Best Practices](https://docs.ada.cx/scripted/docs/before-you-begin/design-positive-chatter-experiences)
- [Voiceflow Web Chat](https://docs.voiceflow.com/docs/chat-widget)
- [Voiceflow Styling](https://docs.voiceflow.com/docs/embed-customize-styling)

### Visual Feedback & Animation
- [Vocalis GitHub](https://github.com/Lex-au/Vocalis)
- [CodeRush Voice Setup](https://community.devexpress.com/Blogs/markmiller/archive/2024/03/05/voice-setup-in-coderush-for-visual-studio.aspx)
- [HeyGen AI Avatars](https://www.heygen.com/avatars)
- [SadTalker AI](https://sadtalkerai.com/)
- [ElevenLabs Live Waveform](https://ui.elevenlabs.io/docs/components/live-waveform)
- [Flutter Audio Waveforms](https://blog.logrocket.com/audio-waveforms-flutter-app/)
- [CSS Pulse Generator](https://colrlab.com/tools/pulse-glow-generator)
- [Tailwind Animations](https://prismic.io/blog/tailwind-animations)
- [CSS Glow Effects](https://devsnap.me/css-glow-effects)

### UX & Design Patterns
- [Nielsen Norman Animation Duration](https://www.nngroup.com/articles/animation-duration/)
- [Adobe Slide-out Panels](https://developer.adobe.com/commerce/admin-developer/pattern-library/containers/slideouts-modals-overlays)
- [Widget Dimensions Guide](https://support.gettalkative.com/support/solutions/articles/201000057476-adjust-chat-widget-dimensions-positioning-full-screen-mode)
- [Mobile Widget Development](https://cygnis.co/blog/widget-development-in-mobile-apps/)
- [Voice UX Best Practices](https://designlab.com/blog/voice-user-interface-design-best-practices)

### Accessibility
- [AXS Accessibility Toolbar](https://www.callingallminds.com/axs-toolbar)
- [Inaza AI Accessibility](https://www.inaza.com/blog/accessibility-in-ai-customer-service-wcag-for-voice-chat)
- [Screen Reader Plugin](https://wordpress.org/plugins/screen-reader-with-fontsize/)

### Market Comparison
- [Best Chat Widgets](https://www.tidio.com/blog/chat-widgets/)
- [Free vs Premium Widgets](https://seasalt.ai/en/blog/108-free-chatbot-widget/)

---

**End of Report**

*Compiled by: Genesis Research Agent*
*Date: 2026-02-16*
*Next Step: Design mockups based on these findings*
