How to add the Schedito booking widget to Wix
You can add Schedito to an existing Wix website without moving your services, availability or bookings into Wix. The simplest Wix integration uses an Embed HTML element containing the three Schedito widget elements supplied by your dashboard.
Wix handles embedded HTML differently from a normal website: the code runs inside an isolated iframe. This guide explains that Wix-specific difference and shows how to integrate Schedito without confusing it with the normal site-level integration used on platforms such as WordPress.
Before you open the Wix editor
A configured Schedito calendar
Configure the services, resources and availability you want Wix visitors to book before embedding the widget.
Access to your Wix editor
You need permission to edit the page where the booking interface should appear and add an HTML embed element.
The three Schedito code elements
Open the widget code in Schedito. Keep the CSS link, JavaScript script and calendar-specific widget DIV available for copying.
1. Understand why Wix is different
On a conventional website, our recommended Schedito integration is to load the CSS and JavaScript once and then place calendar-specific widget DIVs wherever they are needed.
The standard Wix Embed HTML element behaves differently. Wix places the embedded code inside a sandboxed iframe. Code loaded in the surrounding Wix page does not automatically become part of that iframe, and code inside the iframe cannot directly access the rest of the page.
For that reason, the simplest Wix installation is an intentional exception: the CSS link, JavaScript script and widget DIV all need to exist inside the same embedded iframe.
Normal website integration
JavaScript — once
Widget DIV — wherever needed
Wix Embed HTML
CSS link
JavaScript script
Calendar-specific widget DIV
2. Add an HTML embed element to the Wix page
Open the Wix page where customers should be able to book—for example a booking page, service page, consultation page or event page.
Add an HTML or code embed element using the Wix editor. Wix Editor and Wix Studio use slightly different labels, but both provide an element for embedding external HTML code.
Position the element where the booking interface should appear and give it enough horizontal and vertical space for the calendar.
3. Add the three Schedito elements inside the embed
Open the widget code in the Schedito dashboard. Copy the CSS link, JavaScript script and HTML widget DIV into the Wix embed code field.
A practical order is:
1. CSS link
2. Calendar-specific widget DIV
3. JavaScript script
Use exactly the current snippets shown by your Schedito dashboard. Do not replace the organization ID, public calendar ID or asset URLs with values copied from another calendar or an older guide.
This repetition of CSS and JavaScript is specific to the iframe-based Wix integration. It is not our general recommendation for conventional websites.
Inside the Wix Embed HTML element
Give the booking iframe enough space
The Wix HTML element has its own dimensions. The booking widget can respond to the width available inside that element, but the surrounding Wix page still controls the iframe's overall size.
Make the element wide enough for your page layout and tall enough for the complete booking flow. If the element is too short, later steps of the calendar may appear clipped or require scrolling inside the iframe.
Also remember that the iframe is visually isolated. CSS from your Wix site does not automatically style the Schedito content inside it. Use Schedito's own light or dark theme and widget customization settings instead.
Advanced Wix integrations: Custom Elements
Wix also supports Custom Elements based on standard Web Components. These can provide a more integrated approach than the ordinary HTML iframe and are useful when tighter page integration or reusable components are required.
Schedito does not currently require or provide a dedicated Wix Custom Element for the normal installation described in this guide. Building one therefore belongs to an advanced developer integration rather than the standard copy-and-paste setup.
If you need many Schedito widgets on one Wix site or want deeper Wix-specific behavior, a reusable Custom Element wrapper may be worth considering.
Which path should I use?
One or a few booking widgets
Use Embed HTML. It is the simplest approach.
Advanced integration or many reusable widgets
Consider a developer-built Wix Custom Element integration.
4. Publish and test the complete booking flow
Check the widget itself, the iframe dimensions and the resulting booking—not only whether an empty box appears on the page.
Test the published site
Test the published Wix page rather than relying only on the editor or preview. Confirm that the Schedito widget loads completely.
Complete a real test booking
Select a service, date and time and complete the process. Verify the resulting booking in your Schedito dashboard.
Check desktop and mobile
Verify both the widget layout and the dimensions of the Wix embed element at the responsive breakpoints used by your site.
Wix booking widget troubleshooting
Check all three elements inside the Wix embed code: the current Schedito CSS link, the JavaScript script and the calendar-specific widget DIV.
Verify the organization ID and public calendar ID and check the browser developer tools for failed asset or API requests.
This is expected if the DIV is inside a normal Wix HTML embed. The embed runs in its own iframe, while Wix Custom Code runs in the surrounding page. The two documents are isolated.
For the simple iframe integration, put the CSS link, JavaScript script and widget DIV together inside the embed itself.
Increase the height of the Wix HTML embed element. The parent Wix layout controls the dimensions of the iframe, so a correctly rendered Schedito widget can still be clipped if its container is too short.
The Wix integration is probably working. Check the Schedito configuration: service, required resources, recurring availability, exceptions, existing bookings, capacity and connected external-calendar commitments.
That is expected with an HTML iframe. The embedded Schedito document is isolated from the parent Wix page's styles.
Configure the light or dark theme, colors and other supported visual properties directly in Schedito.
Check both sides of the integration: Schedito responds to the width available inside the iframe, while Wix controls the embed element's width and height. Adjust the Wix element at the relevant responsive breakpoint and retest the published site.
Keep Wix focused on your website and Schedito focused on booking
Once the widget is working, continue managing services, resources, availability, capacity, calendar synchronization and widget styling in Schedito.
Start freeWix booking overview
Browse all Schedito guides · Widget customization · Google Calendar sync