Skip to main content

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

  1. Open Settings → Connections → Schedule iFrame.
  2. 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.