Booking Plugin Demo

<!-- Add the CSS file -->
<link rel="stylesheet" href="style.css">

<!-- Add the container where you want the booking plugin -->
<div id="booking-plugin"></div>

<!-- Add the JavaScript file at the end of your body -->
<script src="script.js"></script>

The plugin uses CSS variables that you can override in your own stylesheet:

:root {
    --primary-color: #4a90e2;
    --secondary-color: #2c3e50;
    --success-color: #27ae60;
    --error-color: #e74c3c;
    --background-color: #f5f6fa;
    --text-color: #2c3e50;
    --border-color: #dcdde1;
}

The plugin supports all modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Update the apiBaseUrl in script.js to point to your backend:

this.apiBaseUrl = 'http://your-api-url/api';

The plugin expects two endpoints:

• /available_slots?date=YYYY-MM-DD - GET request to fetch available slots
• /book_appointment - POST request to create a booking