How to Override CSS Styles on an Embedded Microsoft Bookings Page
Question details
The user is attempting to modify the appearance of an embedded Microsoft Bookings form on a WordPress site using custom CSS, but the styling changes are not applying.
- Product
- Microsoft Bookings
- Device & OS
- not provided
- Scenario
- Customizing the frontend user interface of a Microsoft Bookings form embedded within a WordPress webpage iframe.
- Observed behavior
- Custom CSS classes (such as .WpLer and .Qkr3P) added to the WordPress parent page are ignored by the Microsoft Bookings iframe due to browser same-origin policies.
Ensure you have administrative access to your Microsoft 365 Bookings configuration dashboard, as you will need to adjust the native theme settings instead of relying on external code.
Utilize Native Microsoft Bookings Configuration Options
Since same-origin policies block external CSS from modifying iframes, you must use the built-in customization settings provided within Microsoft Bookings.
Because the Microsoft Bookings iframe is hosted on a different domain than your WordPress site, browser security rules restrict external CSS from altering the embedded content. To change the colors and styling, you must use Microsoft's native configuration options.
Access your Microsoft 365 account and open the Microsoft Bookings application dashboard.
In the left-hand navigation menu, click on 'Booking page' to reveal the public-facing customization options.
Scroll to the 'Customize your page' section. Here, you can select a predefined color theme or input a custom hex color code that matches your WordPress site's branding.
Click 'Save and publish' at the top of the screen. The embedded iframe on your WordPress website will automatically update to reflect these new native styles.
Seek Advanced Customization Support in the Microsoft Community
If the native configuration options do not meet your design requirements, consult the official Microsoft Community Hub for feature requests or API-based alternatives.
Boost Your Daily Productivity with WPS Office
While cross-domain web integrations like Microsoft Bookings can be restrictive, your daily office software shouldn't be. Choose WPS Office as a free, lightweight, and highly compatible alternative to Microsoft Office for all your document, spreadsheet, and presentation needs.
- 1. Download the Installer: Visit the official WPS Office website and click the free download button for your operating system.
- 2. Run the Installation: Open the downloaded setup file and follow the straightforward on-screen prompts to install the suite.
- 3. Launch and Create: Open WPS Office and instantly start creating, editing, and saving your documents with full Microsoft format compatibility.
Frequently Asked Questions
Why doesn't my custom CSS work on an embedded iframe?
Modern web browsers enforce a security standard known as the same-origin policy. Because the content inside the iframe (Microsoft Bookings) is hosted on a different domain than your parent page (WordPress), the parent page is blocked from applying CSS or JavaScript to the iframe's internal HTML.
Can I remove the Microsoft Bookings logo from the embedded page?
Yes, to a limited extent. You can navigate to your Booking page settings within Microsoft 365 and uncheck the option labeled 'Display Microsoft Bookings logo on the booking page', then save your changes.
Is there a way to inject CSS into the iframe using JavaScript?
No. The same cross-domain security policies that block CSS also block JavaScript. Scripts running on your WordPress parent page cannot access or manipulate the Document Object Model (DOM) of an iframe loaded from a different domain.
