'%3e%3cpath%20d='M8%200C12.4183%200%2016%203.58172%2016%208C16%2012.4183%2012.4183%2016%208%2016C3.58172%2016%200%2012.4183%200%208C0%203.58172%203.58172%200%208%200ZM11.6162%204.38379C11.2257%203.99337%2010.5927%203.99338%2010.2021%204.38379L8%206.58594L5.79785%204.38379C5.40732%203.99334%204.77429%203.99329%204.38379%204.38379C3.99331%204.77429%203.99335%205.40733%204.38379%205.79785L6.58594%208L4.38379%2010.2021C3.99348%2010.5927%203.99341%2011.2257%204.38379%2011.6162C4.77426%2012.0066%205.40734%2012.0065%205.79785%2011.6162L8%209.41406L10.2021%2011.6162C10.5927%2012.0066%2011.2257%2012.0067%2011.6162%2011.6162C12.0067%2011.2257%2012.0066%2010.5927%2011.6162%2010.2021L9.41406%208L11.6162%205.79785C12.0066%205.40735%2012.0066%204.77429%2011.6162%204.38379Z'%20fill='%23080E17'%20fill-opacity='0.46'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_3761_713'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
How to Embed Microsoft Bookings Pages in a Power Pages Website
Question details
The user wants to create a central Power Pages website that provides event attendees access to multiple Microsoft Bookings pages.
- Product
- Microsoft Power Pages
- Device & OS
- not provided
- Scenario
- Building a centralized event or booking portal where users can schedule appointments directly from a Power Pages site.
- Observed behavior
- The user needs the correct method and code integration to display multiple Microsoft Bookings calendars seamlessly within the Power Pages layout.
Ensure you have administrator or editor permissions for both your Microsoft Bookings calendars and your Power Pages website environment.
Embed the Bookings Page Using an Iframe
Generate the iframe embed code from your Microsoft Bookings page and insert it into a custom HTML section on your Power Pages website.
Microsoft Bookings provides a built-in feature to generate an iframe code, which allows you to place the booking calendar seamlessly on any external website, including Power Pages. This method is straightforward and ensures the booking system updates in real-time.
Open Microsoft Bookings, navigate to your desired booking calendar, configure your services and availability, and ensure the Bookings page status is set to published.
In the Microsoft Bookings left navigation pane, click on 'Bookings page'. Look for the 'Embed' option, select it, and copy the provided HTML iframe code.
Log into Microsoft Power Pages, select your target website, and open it in the Design Studio. Navigate to the specific page where you want attendees to see the calendar.
Add a new section to your page and select the 'Custom Code' or 'HTML' component. Paste the iframe code you copied earlier into the code editor.
Modify the width and height attributes in the iframe code (e.g., setting width to '100%') to ensure it fits well on both desktop and mobile screens. Save your changes and preview the site to verify the calendar loads correctly.
Manage Your Event Schedules Effectively with WPS Office
While you use Power Pages and Microsoft Bookings to handle appointments online, managing event data, attendee lists, and promotional materials offline requires a robust office suite. WPS Office is a lightweight, completely free alternative to Microsoft Office that covers all your document productivity needs.
- 1. Download and Install: Visit the official WPS Office website to download the free suite and follow the quick installation prompts.
- 2. Open Event Documents: Launch WPS Office and open your existing .xlsx attendee lists or .docx event plans directly without worrying about formatting issues.
- 3. Edit and Collaborate: Utilize the built-in tools to finalize your event schedules and export them as PDFs to share with your team securely.
Frequently Asked Questions
Can I embed multiple different Bookings pages on the same Power Pages website?
Yes, you can embed multiple Microsoft Bookings pages by adding multiple iframe components to your Power Pages site. Each iframe should contain the unique embed code for the specific Bookings calendar you want to display.
Why is my Microsoft Bookings iframe cutting off on mobile devices?
If the iframe is clipping or not displaying fully on mobile, you likely need to adjust the width property in the embed code. Change the width from a fixed pixel value to '100%' so the iframe automatically scales to fit the screen size.
Do event attendees need a Microsoft account to book an appointment through the embedded page?
No, as long as you configure your Microsoft Bookings page settings to not require a Microsoft 365 account from the customer, anyone visiting your Power Pages site can schedule an appointment.
Where can I get additional help if the embed code isn't working?
If you experience technical difficulties integrating services, you can visit the Microsoft Power Automate Community or Power Pages forums to seek advice and troubleshooting steps from other platform developers.
