Browser Support

Comprehensive browser compatibility information for Focus Chat.

Supported Browsers

Desktop Browsers

Browser	Minimum Version	Full Support	Notes
Chrome	54+	✅	Recommended browser
Firefox	63+	✅	Full feature support
Safari	10.1+	✅	macOS and iOS
Edge	79+	✅	Chromium-based Edge
Opera	41+	✅	Chromium-based

Mobile Browsers

Browser	Minimum Version	Full Support	Notes
Chrome Mobile	54+	✅	Android
Safari Mobile	10.3+	✅	iOS
Firefox Mobile	63+	✅	Android
Samsung Internet	6.2+	✅	Android

Legacy Browsers (Not Supported)

Browser	Last Version	Alternative
Internet Explorer	All versions	Use Edge
Edge Legacy	18 and below	Upgrade to Chromium Edge
Chrome	53 and below	Update browser
Firefox	62 and below	Update browser
Safari	10.0 and below	Update browser

Required Web Standards

Focus Chat requires the following modern web standards:

Core Technologies

• Custom Elements v1: For <focus-chat> element
• Shadow DOM v1: For style isolation
• ES6+ JavaScript: Arrow functions, classes, modules
• Fetch API: For HTTP requests
• Promise API: For asynchronous operations

Optional Technologies

• Server-Sent Events: For streaming responses (graceful fallback)
• Web Storage: For conversation history (graceful fallback)
• CSS Custom Properties: For dynamic theming (fallback to static)

Feature Detection

Automatic Detection

Focus Chat automatically detects browser capabilities:

// Custom Elements support
if ('customElements' in window) {
  console.log('Custom Elements supported');
} else {
  console.log('Custom Elements not supported');
}

// Shadow DOM support  
if ('attachShadow' in Element.prototype) {
  console.log('Shadow DOM supported');
}

// Fetch API support
if ('fetch' in window) {
  console.log('Fetch API supported');
}

Graceful Degradation

When optional features aren't available:

• No Server-Sent Events: Falls back to regular HTTP requests
• No Web Storage: History not persisted (still works per session)
• No CSS Variables: Uses static fallback colors

Polyfills

Web Components Polyfill

For browsers that need Web Components support:

<!-- Load polyfills before Focus Chat -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2/webcomponents-loader.js"></script>
<script src="https://embed.agents.inhotel.io/focus-chat/latest/focus-chat.min.js"></script>

Fetch Polyfill (Optional)

Focus Chat relies on the browser’s fetch API. Most modern browsers support it natively.
If you need to support very old browsers that do not have fetch, you can include a polyfill.

Note: InHotel does not host a fetch polyfill.
You may use a publicly available one (such as whatwg-fetch) or host a copy yourself.

Example using whatwg-fetch:

<script src="/path/to/whatwg-fetch.umd.js"></script>

Performance Characteristics

Loading Performance by Browser

Browser	Script Load Time	Initialization Time	Memory Usage
Chrome	~50ms	~80ms	~2MB
Firefox	~60ms	~90ms	~2.2MB
Safari	~70ms	~100ms	~2.5MB
Edge	~55ms	~85ms	~2.1MB

Times are approximate and vary by device

Runtime Performance

Feature	Chrome	Firefox	Safari	Edge
Message Rendering	60fps	60fps	60fps	60fps
Streaming Updates	✅	✅	✅	✅
Shadow DOM	✅	✅	✅	✅
CSS Variables	✅	✅	✅	✅

Mobile Considerations

Touch Interactions

• All buttons sized for touch (44px minimum)
• Proper touch event handling
• No hover states on touch devices

Viewport Handling

<meta name="viewport" content="width=device-width, initial-scale=1.0">

iOS Safari Specifics

• Input field zoom prevention (use 16px+ font size)
• Safe area handling for newer iPhones
• Proper keyboard handling

Android Specifics

• Chrome Custom Tabs compatibility
• WebView compatibility
• Various Android browser support

Testing Strategy

Browser Testing Matrix

We test on:

• Latest versions of all supported browsers
• Previous major version of each browser
• Mobile versions on actual devices
• WebView environments (mobile apps)

Automated Testing

// Feature detection tests
describe('Browser Support', () => {
  test('Custom Elements supported', () => {
    expect('customElements' in window).toBe(true);
  });
  
  test('Shadow DOM supported', () => {
    expect('attachShadow' in Element.prototype).toBe(true);
  });
  
  test('Fetch API supported', () => {
    expect('fetch' in window).toBe(true);
  });
});

Manual Testing Checklist

• Widget loads and displays
• Chat opens and closes
• Messages send and receive
• Styling applies correctly
• Touch interactions work (mobile)
• No console errors

Content Security Policy

Focus Chat is compatible with strict CSP policies:

Recommended CSP

<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self' https://embed.agents.inhotel.io;;
  connect-src 'self' https://embed.agents.inhotel.io; https://your-agent-domain.com; wss://your-agent-domain.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
">

CSP Compatibility

• No eval(): Focus Chat doesn't use eval
• No inline scripts: All JavaScript is in external files
• Inline styles: Required for Shadow DOM (use 'unsafe-inline' for style-src)

Accessibility

Screen Reader Support

• Proper ARIA labels and roles
• Keyboard navigation support
• Focus management

Keyboard Navigation

• Tab order follows logical flow
• Enter key sends messages
• Escape key closes chat

High Contrast Mode

• Respects system high contrast settings
• Maintains usability with custom colors

Known Issues and Workarounds

Safari iOS Keyboard

Issue: Virtual keyboard can cover chat input Workaround: Chat automatically adjusts position

Chrome Android WebView

Issue: Some WebView versions have Custom Elements bugs Workaround: Use polyfill for WebView environments

Firefox Focus

Issue: Limited Web Components support Status: Works with polyfills

Browser-Specific Optimizations

Chrome

• Uses native Custom Elements implementation
• Optimal Shadow DOM performance
• Full streaming support

Firefox

• Custom Elements polyfill for older versions
• Good Shadow DOM performance
• Full feature support

Safari

• iOS-specific touch optimizations
• Safe area handling
• WebKit-specific CSS fixes

Edge

• Chromium-based versions fully supported
• Legacy Edge not supported
• Good performance characteristics

Future Compatibility

Upcoming Features

• Web Components v2: Will adopt when available
• CSS Containment: For better performance

Deprecation Timeline

• Legacy browser support: Reviewed annually
• Polyfill requirements: Minimize over time
• New web standards: Adopt as available

Next Steps

• Explore configuration options