Getting the Snippet #
Open an event type, choose Embed, and select the inline option. MixCalendar generates a snippet you can paste into any page. The scheduler renders inside the container you provide and resizes itself as the invitee moves between steps.
The Snippet #
Sizing #
Give the container a minimum height of roughly 680 pixels on desktop and 560 on mobile. The widget posts its measured height to the parent page and the loader adjusts automatically, but a sensible minimum avoids a visible jump on first paint.
Theming #
Pass a theme object to override the accent colour, text colour, and background so the scheduler matches the host page. Values are applied inside the widget only and do not change your hosted booking page.
Content Security Policy #
If your site sets a policy, allow https://mixcalendar.mixcommerce.co in the script-src and frame-src directives. A blocked frame is the most common cause of an embed that loads a blank area.
Events #
The loader emits mixcal:date_selected, mixcal:booking_started, and mixcal:booking_completed on the window object. Listening for the completion event is how most sites fire an analytics conversion or redirect to a thank-you page.
