Embed a 6am booking calendar on any website

Embed a published 6am calendar where visitors expect to book. The embed is standard HTML: an iframe and a separate link to the hosted calendar. It does not require a WordPress plugin, a JavaScript SDK, a frontend framework or third-party session cookies.

• Outcome: a visitor chooses a date and time, submits a reservation and sees confirmation inside the embedded calendar.
• Owner: a company administrator or member with Manage contacts permission, plus an authorized editor of the destination website.
• Prerequisite: a published calendar already tested using SOP 077. Use the correct company in the 6am dashboard.

01. Choose the calendar and destination

Confirm the host, meeting instructions, duration, timezone, weekly hours, blocked dates, buffer, notice and booking horizon. Explain the meeting briefly above the embed; do not promise a video link or email that this version does not generate.

Choose a page you are authorized to edit. Keep a backup of its previous content. A site must allow iframe markup and loading the calendar origin. Hosting plans, editor permissions, plugins and site security policies can limit this; no embed can bypass those restrictions.

02. Copy the actual code from 6am

1. Open Booking calendars in the correct company. The calendar must show Published.
2. Choose Embed on a website on its row. Select the entire HTML embed code field and copy it. Keep the Public booking link for comparison and fallback. There is no separate save action in this window.
3. The code contains the actual calendar URL and an escaped accessible title, width 100%, height 900, lazy loading and a no-referrer policy. A separate link opens the hosted calendar in a new tab. Copy both the iframe and this link; empty content inside an iframe is not a reliable fallback.
4. Paste the code as HTML, not as visible text or a Markdown code block. Do not copy a dashboard URL, a ticket, an appointment reference or a sample UUID into src.

The frame follows the width of its container. Height is fixed at 900 pixels and can be adjusted in the copied HTML. Longer content scrolls inside it; this version does not automatically resize the parent page or send booking events to the parent. The host page cannot read the visitor form across origins. Keep the default internal scrolling and avoid containers that clip the frame.

03. Add it to your platform

HTML or a page builder

Paste the complete snippet in the page body, or in the builder's HTML/embed component, below a useful heading. Keep it out of another form. Preview, save and open the actual visitor page. Confirm the builder retained both the iframe and fallback link.

Astro

Paste the snippet directly into the markup of a .astro page or component. It is native HTML; do not add a client:* directive or install an integration for it. Build and preview your site with its existing commands, then deploy through your normal authorized workflow. The calendar remains live even when the surrounding page is generated statically. Astro component documentation.

WordPress

Edit the chosen page, add a Custom HTML block and paste the full snippet into its HTML editor. Save the block when that control is shown, then save/update the page. Reopen the editor and confirm the iframe was retained. Test the visitor page, not only the editor preview.

WordPress can remove iframe markup for accounts without the required HTML permission; WordPress.com plans and security plugins may impose additional limits. Ask the authorized site administrator to review the supported publishing method. Do not disable site-wide protections or grant broad permissions simply to pass a test. Keep a normal link to the hosted calendar if embedding is unavailable. WordPress Custom HTML documentation.

04. Verify the visitor flow

1. Open the destination page as a visitor, preferably in a private window. Confirm title, instructions, timezone, privacy link and controls. The calendar uses its own configured language and timezone; the surrounding site's language does not override them.
2. Choose an available future date and select Show available times. The result should load inside the frame without replacing the host page. Check a blocked date as well.
3. Test at a narrow mobile width and on an actual phone before customer rollout. Scroll to the last slot, required name/email fields, privacy link and submit button. Keep the keyboard usable and verify the fallback link opens the hosted calendar. Increase the copied iframe height if useful; do not hide overflowing controls.
4. With synthetic name and an example.test email, submit one controlled reservation. Record the confirmation reference, local time and timezone shown inside the frame. This version confirms on the page and does not send an email, invitation or reminder.
5. In 6am, open Appointments from that calendar. Verify the calendar filter, confirmed status, attendee, time and Details. Check View contact, or the explicit identity-review state when no safe contact match exists. Booking does not subscribe the attendee to marketing.
6. Reload the destination page and choose the same date. The reserved slot must no longer be available. Cancel the synthetic appointment in 6am and confirm the slot returns when other rules permit. Unpublish a QA-only calendar when finished.

Troubleshooting and operating limits

• Blank/blocked frame: compare the hosted link. If it works directly, check the destination page's frame-src Content Security Policy and whether the editor retained the iframe. Request a narrowly scoped allowance for the exact calendar origin from the responsible administrator; do not disable CSP globally. See iframe reference.
• 404 in the frame and direct link: confirm the calendar still exists and is published. Saving any calendar edit returns it to Draft; inspect and publish again. The same URL then resumes accepting bookings. Unpublishing closes new bookings while preserving existing appointments.
• No times: inspect the calendar's own rules and host availability using SOP 077. Do not reduce lead time or buffers just to make a test pass.
• Validation/expired form: use the reload link inside the calendar and select a current slot. Do not embed a previously saved HTML copy of the form or cache its ticket/confirmation.
• Privacy: visitor details are submitted to 6am inside the iframe, not to the host site's form handler. Do not append personal data to the iframe URL. No external calendar synchronization, generated meeting links, payment, analytics callback or automatic height adjustment is included. To enable customer rescheduling and cancellation, configure SOP 079; its private management link appears on eligible booking confirmations inside the embed as well.

Acceptance and handoff

Record the company/calendar, destination URL, platform and editor, saved snippet, tested viewport, confirmation reference, CRM/contact outcome, occupied-slot check, cancellation and fallback result. Retest after site theme, CSP, editor or calendar changes. A working preview alone is insufficient. Keep any platform-specific limitation explicit; standard HTML compatibility does not certify every builder, plugin or browser configuration.