Restaurant Booking Widget

Default Widget

This is the default widget configuration using the original data source.

Theme:

API Demo

Test the widget's public API methods.

Integration Examples

Basic HTML Integration

<div id="restaurant-booking-widget"></div>
<script src="booking-widget.umd.js"></script>
      

Advanced Configuration

<div id="restaurant-booking-widget" 
     data-max-guests="10"
     data-default-guests="2"
     data-theme="elegant"
     data-waitlist-url="https://example.com/waitlist"></div>
<script src="booking-widget.umd.js"></script>
      

JavaScript API

const widget = RestaurantBookingWidget.init({
  container: '#my-widget',
  config: {
    maxGuests: 10,
    defaultGuests: 2,
    waitlistUrl: 'https://example.com/waitlist'
  }
});

// API methods
widget.setGuestCount(4);
widget.showCalendar();
widget.refresh();
      

Event Listening

document.getElementById('restaurant-booking-widget')
  .addEventListener('rbw:ready', (e) => {
    console.log('Widget is ready');
  });
  
document.getElementById('restaurant-booking-widget')
  .addEventListener('rbw:error', (e) => {
    console.error('Widget error:', e.detail);
  });
      