Hotelier Widgets

A set of ready-to-use hotel booking widgets. Lightweight, responsive, Shadow DOM friendly, and supports dark mode via Tailwind-compatible classes.

✨ Features

• 📦 Booking form with date and guest inputs
• 🌙 Dark mode support
• ⚙️ One-line CDN integration
• 🧩 Works inside Shadow DOM

🚀 Quick Start (CDN)

1. Add the CDN Script

<script src="https://cdn.jsdelivr.net/npm/hotelier-widgets@latest/dist/hotelier-widgets.js" type="module"></script>

2. Insert the Widget Element

<div hotelier-widget="horizontal-compact" data-url="https://yourdomain.com"></div>

3. Special Cases

For floating action widget (appears as a floating button):

<div hotelier-widget="floating-action" data-url="https://yourdomain.com"></div>

💡 Available Widgets

| Widget Name | Description | Best For | | -------------------------- | ------------------------------------------------------------ | ------------------- | | horizontal-compact | Compact and responsive horizontal form | Desktop layouts | | horizontal-minimalis | Minimalistic horizontal form with clean layout | Modern websites | | horizontal-rounded | Horizontal form with rounded input and button styles | Elegant designs | | horizontal-glassmorphism | NEW! Modern glassmorphism effect with backdrop blur | Premium websites | | vertical-prominent | Vertical layout with large, bold input fields and buttons | Sidebar placements | | vertical-dark | Dark-themed vertical layout, ideal for dark backgrounds | Dark mode sites | | vertical-gradient | Stylish vertical layout with gradient button styling | Creative designs | | vertical-modern | NEW! Modern card design with enhanced UX features | Modern applications | | compact-mobile | NEW! Mobile-optimized compact widget with touch-friendly | Mobile-first sites | | floating-action | NEW! Floating action button with modal booking form | Any website overlay |

✨ Enhanced Features (v2.0)

• 🎯 Multiple new widget designs with modern UI patterns
• 📱 Mobile-first responsive design for all widgets
• 🌙 Automatic dark mode synchronization
• ⚡ Loading states and better user feedback
• 🔄 Enhanced form validation with real-time checks
• 🎨 Glassmorphism effects for premium feel
• 🚀 Floating action modal for overlay booking
• 🎭 Smooth animations and micro-interactions

📚 Documentation

View full documentation at: 👉 here