How to add the Schedito booking widget to Squarespace
Squarespace can use Schedito's preferred three-part integration: load the shared stylesheet once, load the JavaScript once and place the calendar-specific widget DIV in the page where customers should book.
This guide uses Squarespace Header and Footer Code Injection for the shared Schedito assets and a Code Block for the booking calendar itself.
Before you open Squarespace
A configured Schedito calendar
Configure the services, resources and availability customers should be able to book before publishing the widget.
A Squarespace plan with Code Injection
The recommended integration requires Squarespace Code Injection. Current Core, Plus and Advanced plans support it, together with some legacy plans.
The three Schedito elements
Open the widget code in Schedito and keep the CSS link, JavaScript script and calendar-specific widget DIV ready to copy.
1. Keep the three Schedito elements separate
The Schedito dashboard gives you three pieces of frontend code:
CSS link — provides the widget styling.
JavaScript script — loads and operates Schedito widgets.
Widget DIV — identifies the organization and public booking calendar and marks where that calendar should render.
On Squarespace, the CSS and JavaScript can be loaded once through Code Injection, while the calendar-specific DIV belongs in the page content.
Schedito CSS link — once
Schedito JavaScript — once
Calendar-specific widget DIV
2. Add the Schedito CSS link to Header Code Injection
Copy the CSS <link> from your Schedito dashboard.
Open Squarespace Code Injection and paste the link into the Header field. Code placed there is added to the <head> of your site pages.
Do not copy the stylesheet into every booking Code Block. Loading the shared Schedito stylesheet once is the cleaner setup.
3. Add the Schedito JavaScript to Footer Code Injection
Copy the JavaScript <script> supplied by the Schedito dashboard.
In the Squarespace Code Injection panel, paste it into the Footer field.
This keeps the shared Schedito JavaScript outside individual booking blocks and makes it available to the calendar DIVs rendered on the site.
Load it once rather than copying the same script into every booking location.
4. Place the calendar DIV in a Code Block
Open the Squarespace page where customers should book and add a Code Block at the desired position.
Set the block to HTML and paste only the calendar-specific widget DIV copied from Schedito.
The DIV contains values such as data-organization-id and data-calendar-public-id. Make sure you use the values generated for the calendar you actually want to publish.
Because CSS and JavaScript are already loaded separately, the Code Block remains small and specific to that calendar.
Check your Squarespace plan
Squarespace Code Blocks can contain ordinary HTML on all current plans, so placing the Schedito widget DIV itself is not the limiting part.
The recommended Schedito setup also requires Code Injection for the shared JavaScript and stylesheet. Squarespace currently provides Code Injection on Core, Plus and Advanced plans and on certain legacy plans.
If your current plan does not expose Code Injection, upgrade the Squarespace plan before following this integration method rather than trying to work around the platform restriction.
Using multiple Schedito calendars on Squarespace
If several Squarespace pages need booking, keep the shared Schedito CSS link and JavaScript in Code Injection only once.
Then add a separate Code Block wherever a calendar should appear and paste that calendar's own widget DIV.
This means a services page, consultation page and workshop page can use different Schedito calendars without repeatedly loading the same frontend assets.
Shared once
JavaScript script
Per booking location
Page B → Calendar DIV B
Page C → Calendar DIV C
5. Publish and test the complete booking flow
Do not stop when the calendar becomes visible. Verify actual availability and complete a booking from the public website.
Open the public page
Test the live Squarespace page. Confirm that the CSS, JavaScript and calendar DIV combine into a working booking interface.
Complete a booking
Select a service, date and time and complete a real test booking. Verify the result in Schedito.
Check mobile layout
Check mobile as well as desktop. Make sure the Squarespace section and block around the widget provide enough usable width.
Squarespace booking widget troubleshooting
Check the three integration parts independently: the CSS link in Header Code Injection, the JavaScript in Footer Code Injection and the calendar-specific DIV in the Code Block.
Also verify the organization ID and public calendar ID and inspect the browser developer tools for failed asset or API requests.
Check your Squarespace billing plan. Code Injection is a premium feature and is not available on the current Basic plan.
If the site is on Basic, the recommended Schedito integration requires upgrading to a plan that supports Code Injection.
The Squarespace integration is probably working. Check Schedito instead: service configuration, required resources, recurring availability, date-specific exceptions, existing bookings, capacity and connected external calendars.
Check whether you copied the shared assets both into Code Injection and individual Code Blocks. Keep CSS and JavaScript in Code Injection and remove unnecessary copies from page content.
Check the surrounding Squarespace section and block layout. Columns, spacing and container width can constrain the widget even when Schedito itself is responsive.
Use Schedito's light or dark widget theme and supported color settings. Also check whether broad Squarespace Custom CSS rules are unintentionally modifying form controls, buttons or other elements.
Keep Squarespace focused on your website and Schedito focused on booking
Once the integration is working, continue managing services, resources, availability, capacity, calendar synchronization and widget styling in Schedito.
Start freeSquarespace booking overview
Browse all Schedito guides · Widget customization · Google Calendar sync