A booking calendar for website use means taking a calendar you built on the levelpartner.ai platform and placing it on a site that lives somewhere else, so visitors book without leaving your page. This article answers the technical question that follows: embed it inline, open it in a pop-up, or link out to a hosted booking page, and what each choice does to page speed, mobile layout, tracking and consent. If your site is already built in Sites, you do not need an embed at all; drop the calendar element into the page instead.
The three ways to put a calendar on an external site
Inline embed. You paste a short snippet into the page and the calendar appears inside it, at the width of its container. The visitor never leaves your site. This suits a contact page or a service page where booking is the main action.
Button to a hosted page. You link a button to the calendar's own booking page on the platform. Nothing loads on your site until the visitor clicks. This suits article pages, footers and email signatures. If you want that hosted page to carry its own headline and explanation, follow the steps for a standalone booking page.
Pop-up. The button opens the calendar over the current page. It keeps the visitor in context, but it adds script to the page and can be awkward on small screens. Use it sparingly.
The trade-off is weight against friction. An inline calendar removes a click but adds an embedded frame to the page. A link adds a click but keeps the page light. On a page where search ranking and load time matter, a link is often the better choice.
Before you start
- A calendar on the platform that is live, tested and has the right team assigned.
- Edit access to the external site, with permission to add custom code or an embed block.
- Agreement from whoever manages the site's cookie consent, because an embed may set cookies.
- A thank-you page on your site, or a decision to use the calendar's own confirmation screen.
- A phone to test on, not only a desktop browser.
How to set it up
- Go to Calendars, then Calendar Settings.
- Click the three dots beside the calendar and select Share.
- Click Copy Link and keep it for the button option.
- Select the Embed Code tab and click Copy.
- Paste the code into a custom code element on your site.
- Check on mobile that no fixed height cuts off the form.
- In Advanced settings, open Form & confirmation and set a redirect URL under Confirmation page.
- Preview the draft on a phone and desktop, then book a test.
- Open Contacts and confirm the test contact and appointment exist.
- Publish the page once both tests pass.
What to check after it goes live
Load time. Run the page through a speed test before and after the embed. If the page slows noticeably, load the calendar lower on the page or switch to a button.
Layout shift. An embed that loads after the page can push content down. Give the container a minimum height roughly matching the calendar, so the page does not jump.
Consent. If your site uses a consent manager, check whether the embedded frame is blocked until consent is given. A calendar that silently fails to load for visitors who decline cookies is a lost booking. Talk to whoever owns consent before you change anything there.
Source tracking. Visitors who arrive with UTM parameters should keep them through to the booking. Test with a tagged link and check the contact record.
Imagine the agency places the inline calendar on its contact page and a button on each of its 30 blog articles. The contact page would carry the extra script weight; the blog pages, which load nothing until a click, would stay as fast as before. If most bookings then came from the contact page and the buttons added a smaller stream, the source data would still show which article each of those bookings started from.
What it replaces
It replaces the contact form that asks visitors to suggest a time, the separate booking tool whose data never reached your CRM, and the copy and paste a coordinator does to move booking details into contact records. Bookings made through the embed land straight on the contact with the owner assigned.
If you are deciding where on the site booking should appear at all, read mapping booking to every commercial page. If you would rather replace the external site entirely, see building a booking-led website in Sites.
The mistake most firms make
They paste the embed into a narrow sidebar. The calendar squeezes into a column a third of the page wide, the time slots wrap badly, and on a phone the form fields fall off the edge. Give the calendar its own full-width section, or use a button.
Changing the calendar's settings without retesting the live embed. The embed reflects changes immediately, so a new form field or a shorter date range appears on your site at once. Retest after every change.
When not to embed
Skip the inline embed on pages that rank well in search and carry long reading content. The added frame rarely helps those pages and can hurt their speed. Use a button that opens the hosted booking page. Also avoid embedding on pages where the visitor has not yet been told what the meeting is for; a calendar with no context is ignored.
Troubleshooting
The calendar is blank on the live page. The site's security settings or consent manager is blocking the frame. Check the browser console for blocked content and ask the site owner to allow the platform's domain.
The form is cut off at the bottom. The embed block has a fixed height. Remove it or set it to adjust to content.
Bookings work but the thank-you page never loads. The confirmation page under Form & confirmation is wrong or missing. Enter the exact thank-you page address there.
Two contacts appear for the same person. The visitor used a different email from one already on file. Merge the records and add phone number to the form to improve matching.
Frequently asked questions
Does an embedded calendar slow the page down?
It adds some weight. Place it lower on the page, or use a button to the hosted booking page on pages where speed matters most.
Can we style the embedded calendar to match our site?
You can set colours and some layout options in the calendar settings. Keep it clean and readable rather than trying to match every detail.
Do bookings from the embed go into the CRM?
Yes. Each booking creates or updates the contact and attaches the appointment, the same as a booking made on the hosted page.
Can one page carry calendars for two teams?
It can, but it rarely should. Give each page one calendar and one clear meeting, or use a calendar group so visitors pick the team first.