Popup Button #
A popup keeps visitors on the current page and opens the scheduler in an overlay. Add the loader script once, then declare the button:
Any element carrying data-mixcal-url becomes a trigger, so the same attribute works on links, cards, and menu items. Styling is entirely yours; the loader attaches behaviour and nothing else.
Text Link #
Use the same attribute on an anchor. Keep a real href pointing at the booking page so the link still works if scripts are blocked or fail to load.
Schedule a time
Opening Programmatically #
Call window.MixCalendar.push(['open', { url: '...' }]) from your own code to open the overlay after a form submission or a timed prompt.
Closing Behaviour #
The overlay closes on the escape key, on a click outside the panel, and on the close control. Set dismissible: false to require an explicit close, which is occasionally wanted inside a guided flow.
Mobile #
On narrow viewports the overlay expands to full screen automatically. No separate mobile snippet is needed.
