Embed a Schedule iFrame
Drop your live calendar anywhere—let visitors book classes right on your site.
You control which location(s) and category(s) appear, and whether visitors can change them.
1 Choose the controls you want
- Open Settings → Connections → Schedule iFrame.
- Toggle Show location dropdown and Show event-category dropdown. Off hides the selector and locks the iFrame to your chosen default.
2 Pick a default Location / Category
Use the two select boxes to pre-filter what the iFrame loads with:
- All Locations / All Categories – everything on your calendar.
- A specific location or category – only show those events.
(Hidden or archived items won’t appear unless currently selected.)
3 Copy the embed snippet
Click Installation Code, then paste the whole block—iframe + script—into any HTML block on your site.
<iframe
id="quoflo-iframe"
style="
display: block;
border: none;
width: 100%;
height: 100%;
max-width: 1200px;
max-height: 800px;
margin: 0 auto;
"
></iframe>
<script>
const params = {
parentDomain: window.location.origin, // your site
locationId: "SELECTED_LOCATION_ID", // "all" for any
categoryId: "SELECTED_CATEGORY_ID", // "all" for any
locationSelectDisabled: "false", // "true" hides dropdown
categorySelectDisabled: "false", // "true" hides dropdown
};
const qs = new URLSearchParams(params).toString();
const iframe = document.getElementById("quoflo-iframe");
iframe.src = "https://YOUR-SUBDOMAIN.quoflo.com/iframe/host-schedule?" + qs;
// auto-resize & smooth-scroll helpers
window.addEventListener("message", (e) => {
if (e.origin === "https://YOUR-SUBDOMAIN.quoflo.com") {
const { height, scrollToTop, scrollToIFrame } = e.data;
if (height) {
iframe.style.maxHeight = height + "px";
}
if (scrollToTop) {
window.scrollTo({ top: 0, behavior: "smooth" });
}
if (scrollToIFrame) {
const top = iframe.getBoundingClientRect().top + window.pageYOffset;
window.scrollTo({ top, behavior: "smooth" });
}
}
});
</script>
4 Style as needed
- The iFrame is
100%
wide by default—wrap it in a container if you need a narrower column. - Adjust the inline
max-width
/max-height
values, or move them into your own CSS.
How it works
- The script adds query-string parameters (
parentDomain
,locationId
, etc.) to the iFrame’s URL. - The embedded calendar posts its height back to the parent, so the iFrame expands to fit—with no scroll bars.
- Optional messages let you auto-scroll the page when a visitor opens the booking flow.
Need more customization? Reach out at support@quoflo.com and we’ll help you dial it in.