How to add the Schedito booking widget to WordPress
The easiest setup for a non-technical WordPress user is to install WPCode once, load the shared Schedito CSS and JavaScript through WPCode, and place only the calendar-specific widget DIV on the booking page.
This guide follows exactly that approach. You do not need to edit your WordPress theme, touch PHP files or install a Schedito-specific plugin.
Before you start
A working Schedito calendar
Configure the services, resources and availability that customers should be able to book before publishing the widget.
WordPress administrator access
You need permission to install and activate a plugin and to create or edit pages.
Your Schedito widget code
Open the widget code in the Schedito dashboard. Keep the CSS link, JavaScript script and calendar-specific widget DIV available for copying.
1. Install WPCode
In WordPress admin, open Plugins → Add New Plugin and search for WPCode. Install it and activate it.
WPCode lets you add the Schedito CSS and JavaScript globally without editing theme files. You only need to configure this part once for the website.
2. Add Schedito CSS and JavaScript in WPCode
Open Code Snippets → Header & Footer in WordPress.
Paste the complete Schedito CSS <link> tag into the Header field. Paste the complete Schedito JavaScript <script> tag into the Footer field. Leave the Body field empty.
Click Save Changes. Do not remove the <link> or <script> tags: copy the complete elements exactly as Schedito provides them.
3. Create the booking page and add the widget
Open Pages → Add New Page and create a page such as Book, Booking or Appointments.
Add a Custom HTML block. You can search for “Custom HTML” or type /html in a new block.
From Schedito, copy only the calendar-specific widget DIV and paste it into this block. Do not paste the CSS link or JavaScript script again: WPCode already loads them.
Publish the page. If you want customers to reach it from the main navigation, add the new page to your WordPress menu or navigation.
What goes where
WPCode Header: Schedito CSS <link> — once for the website.
WPCode Footer: Schedito JavaScript <script> — once for the website.
Booking page → Custom HTML block: the calendar-specific Schedito <div> — once for each calendar you want to display.
Keeping these three pieces separate avoids duplicate scripts and also makes additional Schedito calendars easy to add later.
4. Publish and test like a customer
Open the real published page and complete a booking from start to finish.
Open the public page
Test the published page, not only the WordPress editor preview. Confirm that the Schedito interface appears.
Complete a booking
Select a service, date and time and submit a real test booking. Verify that the booking appears inside Schedito.
Check mobile too
Open the page on a phone or narrow browser window and verify that the widget remains usable and correctly sized.
WordPress booking widget troubleshooting
Check the three parts separately: the widget DIV must be present on the page, the CSS link must be in WPCode Header, and the JavaScript script must be in WPCode Footer. Then verify that WPCode changes were saved and that the snippets are not being blocked by a cache, security or optimization plugin.
Move the CSS link to WPCode Header and the JavaScript script to WPCode Footer. Leave only the calendar-specific widget DIV in the Custom HTML block.
In WordPress admin, open Code Snippets → Header & Footer. You do not need to create separate PHP or JavaScript snippets for this setup.
The WordPress integration is probably working. Check Schedito instead: service configuration, required resources, recurring availability, date-specific overrides, existing bookings and connected external calendars.
Check the width, padding and layout of the WordPress block or theme container around the widget. Avoid placing the booking interface inside an unnecessarily narrow fixed-width column.
Clear relevant WordPress, CDN and browser caches. If an optimization plugin delays or rewrites JavaScript, exclude the Schedito asset when that optimization prevents the widget from loading correctly.
Your WordPress site is now connected to Schedito
From now on, manage services, availability, calendars and widget appearance in Schedito. WordPress only needs the shared CSS/JavaScript connection and the widget DIV where you want booking to appear.
Start freeWordPress booking overview
Browse all Schedito guides · Widget customization · Google Calendar sync