How to add the Schedito booking widget to a custom website
A custom website can use Schedito directly through three frontend elements: a shared CSS link, a shared JavaScript script and a calendar-specific HTML DIV.
Load CSS and JavaScript once at the appropriate application or page scope, then place a Schedito widget DIV wherever a booking calendar should render.
Before you edit your website
A configured Schedito calendar
Configure the services, resources and availability customers should be able to book.
Access to your frontend code
You need to be able to add a stylesheet, JavaScript and HTML markup to the website or application.
The three Schedito snippets
Open the integration area in Schedito and keep the current CSS link, JavaScript script and calendar-specific DIV ready to copy.
1. Understand the three-part integration
The Schedito dashboard provides three independent elements:
CSS link — provides widget styling.
JavaScript script — initializes and operates Schedito widgets.
Widget DIV — identifies the organization and public booking calendar and defines the render location.
The CSS and JavaScript are shared assets. The DIV is specific to the calendar being displayed.
Schedito CSS — once
Calendar-specific DIV
Schedito JavaScript — once
2. Load the Schedito stylesheet once
Copy the CSS <link> shown by your Schedito dashboard and add it to the document <head> or your application's normal stylesheet-loading layer.
If the entire site can contain Schedito widgets, load it globally. If booking exists only in a dedicated bundle or route, scope it there instead.
Do not add a new copy of the same stylesheet for every calendar DIV.
3. Place the calendar-specific widget DIV
Copy the HTML DIV for the calendar you want to publish and insert it in the template, component or page where the booking interface should appear.
The markup contains values such as data-organization-id and data-calendar-public-id. Use the exact values generated by Schedito for that calendar.
If needed, you can also use supported optional attributes such as the widget language.
Calendar location
<div class="schedito-widget"
data-organization-id="..."
data-calendar-public-id="...">
</div>Use the exact values supplied by your Schedito dashboard.
4. Load the Schedito JavaScript once
Copy the current <script> element shown by Schedito and add it with your normal frontend scripts, typically near the end of the document before </body>.
If several calendars exist on the same page or across the application, they normally share this one script.
Avoid adding identical script tags beside every widget DIV.
Using multiple Schedito calendars
Load the shared CSS and JavaScript once, then add a different widget DIV for each calendar or booking location.
This works whether several calendars appear on one page or different calendars appear on separate pages.
Keep the organization and calendar identifiers specific to each DIV. Do not duplicate the shared asset tags unnecessarily.
Shared
Schedito JavaScript
Per calendar
Calendar B → DIV B
Calendar C → DIV C
Using Schedito in dynamic or single-page frontends
If your application renders the Schedito DIV as part of the initial HTML document, the standard integration is normally sufficient.
If the widget container is inserted later by client-side routing, hydration or another dynamic rendering mechanism, test that the Schedito initialization runs after the container exists.
Do not assume that repeatedly injecting the Schedito script is the correct solution. Keep the shared script single-loaded and verify the initialization behavior of the current widget version in your application lifecycle.
5. Test the complete booking flow
Verify rendering, availability, booking creation and responsive behavior—not only whether the JavaScript loaded.
Load the public page
Confirm that the stylesheet and script load successfully and that the calendar replaces the widget DIV on the actual public website.
Complete a test booking
Select a service, date and time and complete a real test booking. Verify the resulting record in Schedito.
Check responsive containers
Test the parent layout at desktop, tablet and mobile widths. Make sure your own CSS does not unnecessarily constrain the widget.
Custom website booking widget troubleshooting
Check all three elements independently: the Schedito stylesheet, the JavaScript and the calendar-specific DIV.
Use browser developer tools to look for failed asset requests, JavaScript errors and failed API calls.
Check the data-organization-id and data-calendar-public-id values against the current snippet shown in Schedito.
Check shared templates, bundles and individual components. Keep the common assets at one appropriate scope and remove duplicate inclusions.
The frontend integration is probably working. Check Schedito configuration: service, required resources, recurring availability, exceptions, existing bookings, capacity and connected external calendars.
Inspect your own parent containers, grid or flex rules, max-width, padding and overflow settings. The surrounding application layout can constrain an otherwise responsive widget.
Your application may be inserting the widget DIV after Schedito initialized. Review when the container enters the DOM and how widget initialization should be triggered in your frontend lifecycle.
Keep building your application. Let Schedito manage booking.
Once the widget is integrated, continue managing services, resources, availability, capacity, calendar synchronization and widget styling in Schedito.
Start freeCustom website booking overview
Browse all Schedito guides · Widget customization · Google Calendar sync