How to add the Schedito booking widget to WordPress
You do not need a Schedito-specific WordPress plugin. Configure the booking calendar in Schedito, open its widget code and add the three integration elements to WordPress: the shared stylesheet, the shared JavaScript and the calendar-specific widget container.
This guide uses the native WordPress block editor. The same integration principle also applies to page builders that provide HTML, embed or site-level custom-code functionality.
Before you open WordPress
A working Schedito calendar
Configure the services, resources and availability you want WordPress visitors to book before publishing the widget.
WordPress editing access
You need permission to edit the target page and, if CSS or JavaScript must be added at site level, access to an appropriate frontend code-management method.
Your Schedito widget code
Open the widget code in the Schedito dashboard. Schedito provides three separate copyable elements: the CSS link, the JavaScript script and the calendar-specific HTML widget container.
1. Copy the three Schedito integration elements
Open the widget code for the booking calendar in your Schedito dashboard. The integration is intentionally presented as three separate elements:
CSS link — loads the Schedito widget styles.
JavaScript script — loads and initializes the booking functionality.
Widget container — identifies the organization and public booking calendar and marks the position where the interface should render.
Keep these three elements separate. The stylesheet and JavaScript normally need to be loaded only once, while you can place one or more calendar-specific widget containers wherever booking should appear.
The three elements in Schedito
1. CSS link
Load once
2. JavaScript script
Load once
3. Widget DIV
Place where this calendar should render
2. Place the widget DIV in a Custom HTML block
Open the WordPress page where customers should be able to book—for example a Book now, Appointments, Contact or service-specific page.
Add a Custom HTML block. You can also type /html in a new block to find it quickly.
From the Schedito dashboard, copy only the HTML widget container and paste it into the block. This is the calendar-specific element containing values such as data-organization-id and data-calendar-public-id.
Do not duplicate the Schedito CSS link and JavaScript script inside every widget block. Add those separately as shared frontend assets.
3. Load the Schedito CSS and JavaScript once
Return to the widget code in the Schedito dashboard and copy the two remaining elements: the CSS <link> and JavaScript <script>.
These are shared frontend assets. They normally need to be loaded only once on a page or, more commonly, once for the website pages where Schedito may be used. Do not repeat them for every calendar widget.
If your WordPress setup or page builder provides a global custom-code area, that can be an appropriate place for these two elements. On a professionally maintained WordPress theme, a developer can instead load the corresponding stylesheet and script using WordPress's normal frontend enqueue mechanism.
If you have several Schedito calendars on the same website, they can share the same loaded CSS and JavaScript. Each calendar only needs its own widget <div>.
Recommended WordPress structure
CSS link — once
JavaScript script — once
Custom HTML block
Calendar-specific Schedito DIV
A note about WordPress permissions and JavaScript
Recent WordPress versions allow Custom HTML content through the block editor, but JavaScript and other potentially unsafe markup depend on the user's capabilities. WordPress may sanitize disallowed content when a user without the required permissions saves the page.
For Schedito, you normally do not need to put everything into the page block anyway. Keep the calendar-specific widget DIV in the page and load the shared CSS and JavaScript once through an appropriate site-level mechanism.
If a script or stylesheet disappears after saving, do not repeatedly paste it into the page. Check your WordPress permissions and use the site's approved method for loading frontend assets.
4. Publish and test like a customer
A page that looks correct in the WordPress editor is not enough. Test the final page, availability and booking submission.
Open the public page
Test the published frontend, not only the editor preview. Confirm that the Schedito interface actually loads for a normal visitor.
Complete a booking
Select a service, date and time and submit a real test booking. Verify the resulting booking inside Schedito.
Check responsive layout
Test desktop and mobile widths and verify that your WordPress theme does not constrain, hide or distort the booking widget.
WordPress booking widget troubleshooting
Check the integration as three independent pieces. First verify that the calendar-specific Schedito DIV is present and contains the correct organization and public calendar identifiers. Then confirm that the Schedito CSS and JavaScript are actually loaded on the public page.
Use the browser developer tools to check for failed CSS or JavaScript requests, JavaScript errors, content-security restrictions or markup modified by WordPress or another plugin.
If WordPress removes the widget DIV itself, check the HTML markup and user permissions. If it removes a script or other executable markup, this is usually a permission or sanitization issue.
The preferred Schedito setup avoids repeatedly embedding those scripts in content: keep the widget DIV in the page and load the shared CSS and JavaScript once through the site's approved frontend integration method.
The WordPress integration is probably working. Check Schedito instead: verify the service, required resources, recurring availability, date-specific exceptions, existing bookings, capacity and any connected external-calendar commitments.
Check the width, overflow, padding and layout rules of the parent WordPress block or theme container. Avoid placing the booking interface in an unnecessarily narrow fixed-width column.
If the widget itself loads correctly outside that container, the issue is likely caused by surrounding WordPress layout CSS rather than by the booking configuration.
Use Schedito's widget styling configuration to select an appropriate light or dark presentation and adjust supported colors and visual properties.
Also check whether your WordPress theme applies broad CSS rules to buttons, forms or other elements that interfere with the booking interface.
After changing integration markup or frontend assets, clear relevant WordPress, CDN and browser caches. JavaScript optimization or delayed-loading functionality can also affect external frontend code, so exclude the required Schedito assets if your optimization configuration prevents them from executing correctly.
Your WordPress site is only the presentation layer
Once the widget is working, continue configuring services, availability, calendar synchronization, capacity and styling in Schedito rather than rebuilding those rules inside WordPress.
Start freeWordPress booking overview
Browse all Schedito guides · Widget customization · Google Calendar sync