How to add the Schedito booking widget to Webflow
Webflow works particularly well with Schedito's three-part widget integration. Load the Schedito stylesheet once, load the JavaScript once, then place the calendar-specific widget DIV exactly where the booking interface should appear.
This guide shows the recommended setup using Webflow Custom Code for the shared assets and a Code Embed element for the booking calendar itself.
Before you open Webflow
A configured Schedito calendar
Set up the services, resources and availability that customers should be able to book.
Webflow editing access
You need access to the Webflow project and the custom-code functionality available for the site or page.
The three Schedito elements
Open the widget code in Schedito and keep the CSS link, JavaScript script and calendar-specific HTML DIV ready to copy.
1. Keep the three integration elements separate
The Schedito dashboard provides three pieces of frontend code:
CSS link — provides the widget styles.
JavaScript script — initializes and operates Schedito widgets.
Widget DIV — identifies the organization and public booking calendar and marks the position where that calendar should render.
Webflow lets us place each of these where it naturally belongs. The shared CSS and JavaScript are loaded once, while each booking location gets its own calendar-specific DIV.
Schedito CSS link
Schedito JavaScript
Calendar-specific widget DIV
2. Add the Schedito CSS link to Webflow Head code
From your Schedito dashboard, copy the CSS <link>.
If Schedito may be used on several pages, add it to the site's Head custom code so the stylesheet is available across the site.
If Schedito is needed on only one page, you can instead use that page's Head custom-code section.
Do not copy the stylesheet into every individual Code Embed. One correctly scoped stylesheet is sufficient.
3. Add the Schedito JavaScript to Footer code
Copy the JavaScript <script> from the Schedito dashboard.
For the normal Schedito setup, place it in Webflow's Footer code, which inserts it before the closing </body> tag after the page content.
As with the stylesheet, choose the correct scope: site-wide if Schedito is used across the website, or page-specific if booking exists only on selected pages.
The script should normally be loaded once, not repeated inside every calendar embed.
4. Place the calendar DIV in a Code Embed
Open the page where booking should appear and add a Webflow Code Embed element at the appropriate position in the design.
From Schedito, copy only the calendar-specific HTML widget DIV and paste it into the Code Embed editor.
The DIV contains values such as data-organization-id and data-calendar-public-id. Use the values generated for the calendar you actually want to publish.
Because the shared CSS and JavaScript are already loaded separately, the embed itself stays small and calendar-specific.
Should the Schedito assets be site-wide or page-specific?
Use site-wide custom code if Schedito appears on several pages, multiple service pages or reusable layouts. The shared CSS and JavaScript are then loaded once through the site's global configuration.
Use page-specific custom code if Schedito exists on only one or a small number of pages and you do not want its assets loaded elsewhere.
In both cases, avoid adding the same stylesheet or JavaScript repeatedly for individual calendar DIVs.
Using Schedito with Webflow CMS or components
Webflow Code Embeds can reference dynamic values from CMS items, component properties, locale settings and page settings.
This creates useful advanced patterns when similar booking layouts need different calendar values. For example, a reusable service layout could eventually receive a calendar identifier from structured Webflow content rather than requiring a completely separate hand-written embed on every page.
For a normal first installation, keep things simpler: use the exact DIV copied from Schedito. Introduce dynamic bindings only when you have a clear reusable-content requirement and understand how those values are managed.
Start simple
Standard setup
Copy the exact calendar DIV from Schedito.
Advanced reusable setup
Use Webflow CMS or component properties to supply selected values dynamically.
5. Publish and test the complete booking flow
Verify that the assets load, the calendar renders, availability is correct and a customer can actually complete the booking.
Publish and open the page
Test the actual published site. Some custom-code behavior is best verified after publishing rather than only inside the Designer.
Complete a booking
Select a service, date and time and submit a real test booking. Verify the result inside Schedito.
Check responsive layouts
Test the Code Embed and surrounding Webflow containers at desktop, tablet and mobile widths.
Webflow booking widget troubleshooting
Verify all three parts independently: the Schedito CSS link in Head code, the JavaScript in Footer code and the correct calendar DIV in the Code Embed.
Check the browser developer tools for failed asset requests, JavaScript errors or API requests that do not complete successfully.
Webflow does not always execute embedded scripts exactly as they will run on the published site. Publish the project and test the actual public page before concluding that the integration is broken.
The Webflow integration is probably working. Check the Schedito configuration: service, required resources, recurring availability, date-specific exceptions, existing bookings, capacity and connected external-calendar commitments.
Check both site-wide and page-level custom code. If the same Schedito script or stylesheet exists in both places, remove the unnecessary duplicate and keep it at the scope that matches your site structure.
Check the Code Embed itself and its parent Webflow containers. Width limits, grid columns, flex settings, padding and overflow rules in the surrounding design can constrain the widget even when Schedito is responding correctly.
Configure the light or dark presentation and supported colors in Schedito. Also check whether broad custom CSS in Webflow is unintentionally affecting buttons, form controls or other widget elements.
Keep Webflow focused on design and Schedito focused on booking
Once the integration is working, continue managing services, resources, availability, capacity, calendar synchronization and widget styling in Schedito.
Start freeWebflow booking overview
Browse all Schedito guides · Widget customization · Google Calendar sync