This project provides a custom frontend and backend integration for Microsoft 365 Bookings. It enables a modern, user-friendly booking experience while leveraging Microsoft Bookings as the backend. The backend is OpenAPI-compliant, making it easy to integrate with the frontend and other systems. The frontend is built as a widget using LitElement web components, and the backend exposes endpoints for business info, services, staff availability, and appointment creation.
- Sign up for Cloudflare Workers. The free tier is more than enough for most use cases.
- Create an Azure EntraID app.
- Continue to either the Development or Deployment instructions.
- Clone this project and install dependencies with
npm install - Set the needed env vars in a file named
.dev.vars
TENANT_ID=[Directory (tenant) ID]
CLIENT_ID=[Application (client) ID]
CLIENT_SECRET=[Client secret value]
- Update index.html with information about your booking page.
- Run
wrangler devto start a local instance of the API. - Open
http://localhost:8787/docsin your browser to see the Swagger interface where you can try the endpoints. - Changes made in the
src/folder will automatically trigger the server to reload, you only need to refresh the Swagger interface.
- Sign up for Cloudflare Workers. The free tier is more than enough for most use cases.
- Deploy to CloudFlare:
- On the deploy screen, under
Advanced settings > Build variablesadd the following variables. Click the encrypt button forCLIENT_SECRET:
TENANT_ID=[Directory (tenant) ID]
CLIENT_ID=[Application (client) ID]
CLIENT_SECRET=[Client secret value]
ALLOWED_ORIGINS=[Domain/subdomain that can use this widget],[another (optional) domain/subdomain that can use this widget]
Tip
If you already deployed the app, you can add this using the Cloudflare Dashboard.
- Embed the widget into your website. Example:
<!DOCTYPE html>
<head>
<script type="module" src="(your worker domain)/index.js"></script>
</head>
<body>
<booking-card api-url="(your worker domain)" bookings-id="[email protected]" service-displayName="My Service" icon="🔧"></booking-card>
</body>-
Sign in to the Microsoft Entra admin center as at least an Application Developer.
-
If you have access to multiple tenants, use the Settings icon in the top menu to switch to the tenant in which you want to register the application.
-
Browse to
Entra ID > App registrationsand selectNew registration. -
Enter a meaningful name for the app, for example
booking-widget. -
Select
Accounts in this organizational directory only (John McShane Auto Body only - Single tenant)forSupported account types -
Click
Register -
On the app
Overviewscreen, note theApplication (client) IDandDirectory (tenant) ID. These will be used later. -
Navigate to
Certificates & secrets > Client secretsand clicknew client secret. Name it accordingly, clickAdd. Note the value for use later. We will refer to this as theClient secret valuein future steps -
Navigate to
API Permissions > Add a permission > Microsoft Graph > Application Permissions. Assign the following GraphAPI permissions:
Bookings.Read.All
BookingsAppointment.ReadWrite.All
-
Click
Add Permissionsto set the permissions. Then, clickGrant Admin Consent for [COMPANY]button to grant the app access to these API endpoints. -
Return to either the Development or Deployment instructions.
