How to add online booking to your existing website
You do not need to rebuild your website or replace your CMS to start accepting bookings online. With Schedito, you configure services, resources and availability separately, then add the booking widget to the page where customers should book.
This guide explains the general process. The exact editor steps differ between WordPress, Wix, Webflow, Squarespace, Joomla and custom websites, but the booking architecture remains the same.
What you need before you start
Access to your website
You need access to the page or template where HTML, embedded content or custom code can be added.
A configured booking calendar
Your Schedito calendar should already contain the services, resources and availability you want customers to book.
A few minutes for testing
After publishing the widget, make a real test booking and verify the complete customer experience before promoting the page.
1. Configure what customers can book
Start in Schedito rather than in your website editor. Create the booking calendar and add the services that customers should be able to choose.
For each service, configure the appropriate duration and associate the people or other resources required to provide it. Resources can represent staff members, rooms, equipment or capacity used by a shared session or event.
This separation is important: your website displays the booking experience, while Schedito remains responsible for the booking configuration.
What the customer is booking
How much time the booking requires
Who or what is needed to provide it
09:00–17:00
Closed or different hours
Available only at a selected date and time
2. Define when bookings are available
Configure normal recurring availability for the people or resources involved. Then add date-specific exceptions when the normal schedule should not apply.
This allows you to represent ordinary working hours, holidays, closures, special opening periods and sessions that exist only on a particular date.
Schedito calculates the booking times from these rules rather than forcing you to create every possible slot manually in advance.
3. Add the Schedito booking widget to your website
Choose the page where booking makes the most sense—for example a Book now, Appointments, Contact or service-specific page.
Add the Schedito widget container using the organization and public calendar identifiers for your booking calendar. Your website must also load the Schedito widget assets required by the integration.
On a website builder, you normally place this inside an HTML, embed or custom-code component. On a custom website, it can be added directly to the appropriate template.
Widget container example
<div class="schedito-widget"
data-organization-id="YOUR_ORGANIZATION_ID"
data-calendar-public-id="YOUR_CALENDAR_PUBLIC_ID">
</div>Now choose your website platform
The Schedito booking model stays the same, but the best way to place the three widget elements depends on how your website is built.
WordPress
Use the WordPress-specific instructions for loading the shared Schedito assets and placing the booking calendar in your site.
Wix
Follow the Wix-specific iframe integration, where the Schedito CSS, widget DIV and JavaScript stay together inside the HTML embed.
Webflow
Use Webflow custom code for the shared assets and a Code Embed where the booking calendar should appear.
Squarespace
Use Squarespace Code Injection for the shared assets and a Code Block for the calendar-specific widget.
Joomla
Load the shared frontend assets at site or template level and place individual calendars through Joomla Custom modules.
Custom website
Integrate Schedito directly with your own HTML, CSS and JavaScript architecture.
4. Test before you send customers there
A booking page is part of your customer journey. Test it like a customer, not only like the person who configured it.
Test the customer flow
Open the published page as a normal visitor. Select a service, date and time and complete a test booking from beginning to end.
Verify availability
Check that the times displayed match the availability rules, exceptions, existing bookings and any connected calendar constraints.
Check mobile and theme
Test the widget on a smaller screen and confirm that its light or dark presentation and visual settings fit the surrounding website.
Common questions when embedding online booking
First verify that the organization and calendar identifiers are correct and that the required Schedito widget assets are loaded by the page. Also check the browser console for blocked scripts, content-security restrictions or other frontend errors.
If you are using a website builder, confirm that it allows the required embedded content and does not remove or rewrite the widget markup when the page is published.
A working widget does not automatically mean that bookable time exists. Verify that the service is available through the calendar, that the required resources have availability, and that date-specific exceptions are not closing the requested period.
Existing bookings, capacity limits and connected external-calendar commitments can also remove times that would otherwise be available.
Place the widget inside a responsive page container rather than forcing it into a fixed-width element. Also check padding and width rules inherited from your website theme.
The Schedito widget is designed to adapt to different screen sizes, but the surrounding website layout still determines how much usable space it receives.
Yes. Schedito supports configurable visual properties, individual colors and light or dark presentation modes. Choose the mode that fits the surrounding page and then refine the styling as needed.
Eligible plans also provide additional branding options. Remember that visual consistency and accessibility are related but not identical: contrast and readability should still be checked across the complete page.
You will normally need to place the widget into the new website, but your Schedito booking configuration remains separate. Services, resources, availability and booking data do not need to be rebuilt simply because the CMS or frontend changed.
Need instructions for your specific website platform?
The integration principle is the same across websites, but the editor steps differ. Platform-specific Schedito guides for WordPress, Wix, Webflow, Squarespace, Joomla, and custom websites will cover exactly where and how to add the widget.
Browse Schedito resources · See how Schedito works · Explore the booking widget