01Free
Classic
Month calendar beside the day's times — the layout visitors already know.
- Best for
- Contact and booking pages
- Designed width
- wide · adapts below it
- Attribute
template="classic"
Templates · 3 free, 4 on Pro
Seven ways to show your Microsoft Bookings calendar.
Each template below is the real widget running against a demo clinic's calendar, not a screenshot. Pick one per widget, or override it per page with a single attribute.
02Free
Compact
A scrolling day strip over a grid of times, built for sidebars and phones.
- Best for
- Sidebars, landing pages, mobile-heavy traffic
- Designed width
- narrow · adapts below it
- Attribute
template="compact"
03Free
Next available
The soonest open times as one list — one tap to pick, nothing to browse.
- Best for
- Sales calls and quick consultations
- Designed width
- narrow · adapts below it
- Attribute
template="minimal"
04Pro
Split
Your business and service details on the left, the calendar on the right.
- Best for
- Hosted booking pages and full-width sections
- Designed width
- wide · adapts below it
- Attribute
template="split"
05Pro
Week view
Seven days side by side so visitors compare times at a glance.
- Best for
- Clinics, salons and advisers with busy calendars
- Designed width
- wide · adapts below it
- Attribute
template="week"
06Pro
Guided
One question per step — service, person, day, time, details — with progress.
- Best for
- Many services or staff; highest completion on mobile
- Designed width
- medium · adapts below it
- Attribute
template="stepper"
07Pro
Service cards
Services as rich cards with duration and price, then a clean time picker.
- Best for
- Menus of services with prices
- Designed width
- medium · adapts below it
- Attribute
template="cards"
The demo widgets run in preview mode, so no booking can be made from this page. “Northwind Wellness” is a fictional business. On your site the widget reads your own services, staff and open times from your public Microsoft Bookings page.
Styling
What you can change, by plan.
Every template takes your accent colour and light or dark mode on the Free plan. Pro opens the rest of the theme and removes the badge.
| Option | Free | Pro and Business |
|---|---|---|
| Accent colour | Any colour | Any colour |
| Light, dark or follow the visitor | Yes | Yes |
| Templates | Classic, Compact, Next available | All seven |
| Font | System font | System, Geist, serif, rounded or mono |
| Corner radius (0–28 px), density, button style (solid, soft, outline) | Defaults | Adjustable |
| Background colour or transparent | Template default | Any colour, or transparent |
| “Powered by BookingsXP” badge | Shown | Removable |
Your calendar, in your site's colours.
Paste your public Microsoft Bookings link, choose a template and copy one line of code. Free plan, no card.