Widget Troubleshooting

Widget IssuesDisplay & Integration Problems

Fix widget loading issues, styling conflicts, mobile display problems, and browser compatibility

Widget Not Loading

Symptoms

Blank space where widget should be
Console errors
Infinite loading spinner

Solutions

Verify script tag is in <head> or before closing </body>
Check API key is valid and for correct environment
Ensure domain is whitelisted in dashboard
Clear browser cache and hard reload (Ctrl+Shift+R)
Check browser console for JavaScript errors
Verify no ad blockers are interfering

Code Example

<!-- Correct widget installation -->
<script src="https://widget.dailyevent.com/v1/widget.js"></script>
<script>
  DailyEventWidget.init({
    apiKey: 'YOUR_PUBLIC_KEY',
    containerId: 'insurance-widget'
  });
</script>
<div id="insurance-widget"></div>

Styling Conflicts

Symptoms

Widget looks broken or misaligned
Colors don't match site theme
Buttons or text overlapping

Solutions

Use custom CSS to override widget styles
Apply CSS isolation with iframe mode
Check for !important rules conflicting
Use widget theming API for brand colors
Verify z-index values don't conflict
Test with default browser styles

Code Example

// Custom widget styling
DailyEventWidget.init({
  apiKey: 'YOUR_KEY',
  theme: {
    primaryColor: '#14B8A6',
    fontFamily: 'Inter, sans-serif',
    borderRadius: '12px'
  },
  customCSS: '.dei-button { /* your styles */ }'
});

Mobile Display Problems

Symptoms

Widget cut off on mobile
Buttons too small to tap
Horizontal scrolling

Solutions

Enable responsive mode in widget config
Set viewport meta tag in <head>
Use mobile-optimized layout option
Test on actual devices, not just browser resize
Check touch target sizes (minimum 44x44px)
Verify no fixed widths preventing scaling

Code Example

<!-- Add viewport meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<script>
DailyEventWidget.init({
  apiKey: 'YOUR_KEY',
  responsive: true,
  mobileLayout: 'compact'
});
</script>

Browser Compatibility

Symptoms

Works in Chrome but not Safari
IE11 showing errors
Features missing in Firefox

Solutions

Check browser version meets minimum requirements
Include polyfills for older browsers
Test in all major browsers before deploying
Use feature detection, not browser detection
Verify CORS headers for cross-origin requests
Check console for browser-specific errors

Code Example

// Browser support check
if (!DailyEventWidget.isSupported()) {
  // Show fallback form or message
  document.getElementById('widget').innerHTML =
    '<p>Please use a modern browser or contact us directly.</p>';
} else {
  DailyEventWidget.init({ /* config */ });
}

Browser Support Matrix

Browser	Minimum Version	Support Level
Chrome	90+	Full
Firefox	88+	Full
Safari	14+	Full
Edge	90+	Full
Safari iOS	14+	Full
Chrome Android	90+	Full
IE 11	11	Limited (polyfills required)

 <script src="https://widget.dailyevent.com/v1/widget.js"></script> <script> DailyEventWidget.init({ apiKey: 'YOUR_PUBLIC_KEY', containerId: 'insurance-widget' }); </script> <div id="insurance-widget"></div>

// Custom widget styling DailyEventWidget.init({ apiKey: 'YOUR_KEY', theme: { primaryColor: '#14B8A6', fontFamily: 'Inter, sans-serif', borderRadius: '12px' }, customCSS: '.dei-button { /* your styles */ }' });

 <meta name="viewport" content="width=device-width, initial-scale=1"> <script> DailyEventWidget.init({ apiKey: 'YOUR_KEY', responsive: true, mobileLayout: 'compact' }); </script>

// Browser support check if (!DailyEventWidget.isSupported()) { // Show fallback form or message document.getElementById('widget').innerHTML = '<p>Please use a modern browser or contact us directly.</p>'; } else { DailyEventWidget.init({ /* config */ }); }

Browser

Minimum Version

Support Level

Chrome

90+

Full

Firefox

88+

Full

Safari

14+

Full

Edge

90+

Full

Safari iOS

14+

Full

Chrome Android

90+

Full

IE 11

Limited (polyfills required)