🏨 Hotel Analyzer Widget

Embeddable widget demo - Vanilla HTML

📋 Method 1: Simple (Data Attributes)

The simplest way to add the widget - just 2 lines of code!

<div data-hotel-analyzer></div>
<script src="../dist/hotel-analyzer.js"></script>

✨ Result: The widget will automatically initialize with default settings.

🎨 Method 2: With Custom Theme

Customize the widget colors using data attributes:

<div data-hotel-analyzer
     data-theme-primary="#ff6b6b"
     data-locale="en">
</div>
<script src="../dist/hotel-analyzer.js"></script>

✨ Result: Widget with red primary color theme.

⚙️ Method 3: Advanced (JavaScript API)

Full control with JavaScript initialization:

<div id="hotel-analyzer-advanced"></div>
<script src="../dist/hotel-analyzer.js"></script>
<script>
  const widget = HotelAnalyzer.init({
    container: '#hotel-analyzer-advanced',
    theme: {
      primary: '#10b981',
      secondary: '#f3f4f6'
    },
    defaultOTAs: ['booking', 'expedia'],
    onAnalysisComplete: (results) => {
      console.log('Analysis complete!', results);
    }
  });
</script>

✨ Result: Widget with green theme and custom event handlers.

📚 Documentation

For more information, check the README.md file in the widget package.