Product

How to Add a Booking Calendar to Your Website (WordPress, Webflow, and Custom Sites)

September 19, 2026 · BookMyDay Team

A "Book a call" button that opens a new tab on someone else's domain is the weakest point in most service websites. The visitor was on your page, reading about your work, ready to act — and you sent them away to do it.

Embedding the booking calendar on your own site fixes that, and it does not require a developer. This guide walks through the three ways to embed, then gives numbered steps for WordPress, Webflow, and hand-coded sites, followed by how to style the widget and what to test before you call it done.

Why embed scheduling directly on your site

• Fewer steps, fewer drop-offs. Every redirect is a point where a visitor can lose the thread: a slow load, an unfamiliar page, a tab they forget about. Booking in place removes it.
• Your brand stays in view. The visitor sees your header, your colours, and your domain from first click to confirmation. That matters most when a payment is involved.
• The surrounding page keeps selling. Testimonials, pricing, and a description of what happens in the meeting sit right next to the calendar.
• Cleaner measurement. The booking happens on a page you already track, so you can see which pages and campaigns produce bookings without stitching two sets of analytics together.

A plain link still has its place — in an email signature, a social profile, or a text message. On your website, embed.

Before you start: inline, popup, or button

There are three ways to put booking on a page. Choose before you touch any code, because they suit different pages.

A good default is an inline calendar on your contact or booking page plus a popup on your main call-to-action buttons. Add the floating button only if it does not fight with something already in that corner.

In BookMyDay you choose the embed type in your sharing settings and copy the snippet it gives you. Have that snippet on your clipboard before starting any of the sections below. If you have not built a booking page yet, do that first — connect your calendar, set your availability, and create at least one event type.

Adding a booking calendar to WordPress

These steps use the block editor, which is the default in current WordPress.

1. Open the page where the calendar should appear, or create a new one called "Book a call".
2. Click the + block inserter where you want the calendar and search for Custom HTML.
3. Paste your embed snippet into the block.
4. Click Preview in the block toolbar to check that the calendar renders, then preview the whole page.
5. Click Update or Publish.

Things that catch people out:

• Page builders. In Elementor, use the HTML widget; in Divi, the Code module; in Beaver Builder, the HTML module. The snippet is the same.
• Classic editor. Switch from the Visual tab to the Text tab before pasting. Pasting into Visual turns the code into visible text.
• Scripts being stripped. WordPress.com sites on lower plans, and some multisite installations, remove script tags when a non-administrator saves a page. If the snippet vanishes on save, that is why; check your plan or ask a site administrator to add it.
• Floating button site-wide. This snippet belongs in the site footer rather than on one page. Use your theme's custom-code setting or a header-and-footer scripts plugin instead of editing theme files, so a theme update does not erase it.
• Caching and optimisation plugins. If the calendar shows in preview but not on the live page, clear the cache, and exclude the embed script from any "delay JavaScript" or "combine scripts" option.

Adding a booking calendar to Webflow

1. Open the page in the Designer.
2. Open the Add panel and drag an Embed element (listed under Components) to where the calendar should sit.
3. Paste your snippet into the code editor that opens, then click Save & Close.
4. Give the Embed element, or the div around it, a width of 100% and a sensible minimum height so the layout does not collapse.
5. Publish the site and view the published URL.

Things that catch people out:

• The Designer canvas shows a placeholder. Script-based embeds generally do not run inside the Designer. A grey box there is normal; judge the result on the published site.
• Custom code needs a paid plan. The Embed element and custom code fields are not available on Webflow's free Starter site plan.
• Popup from an existing button. Add the script once in Page settings → Custom code → Before </body> tag, then set the trigger attribute or link from your embed instructions on the button itself.
• Floating button site-wide. Put the snippet in Site settings → Custom code → Footer code so it loads on every page.

Adding a booking calendar to a custom-coded site

1. Open the HTML file or template for the page.
2. Paste the inline snippet at the point in the markup where the calendar should appear — inside your main content container, not in the head.
3. If the snippet includes a separate script tag, keep it immediately after the container element, or place it just before the closing body tag.
4. Wrap the calendar in a container with a maximum width so it does not stretch across a very wide screen.
5. Deploy, and load the live page.

Things that catch people out:

• React, Vue, and other frameworks. A script tag pasted into JSX or a template will not execute. Load the script once in your root HTML file or in a mount hook, and render the container element in the component.
• Single-page apps. If the calendar appears on first load but not after navigating back to the page, the widget needs to be initialised again when the route mounts.
• Content Security Policy. If your site sends a CSP header, the browser console will show a blocked script or frame. Add the embed's domain to the script-src and frame-src directives.
• Cookie consent tools that block third-party scripts until consent is given may hold the calendar back too. Categorise the embed as functional rather than marketing.

Styling the widget to match your brand

• Set brand options at the source. Logo, accent colour, and button text are configured in your scheduling tool's branding settings, not with CSS on your site. Custom branding is part of BookMyDay's Professional plan; see pricing.
• Give it room. An inline calendar reads best in a single full-width column. Avoid placing it in a narrow sidebar or beside a long block of text.
• Reserve the height. Set a minimum height on the container so the page does not jump as the calendar loads. That jump is counted against you in Google's layout-stability measurements, and it is irritating to watch.
• Match the background. A white calendar on a dark section looks bolted on. Either set the widget's background to suit or place it on a light section.
• Write a specific button. "Book a 30-minute consultation" outperforms "Submit" or "Schedule".
• Keep the choice short. Embed one event type, or a page with two or three, rather than your entire list.

Testing across devices and time zones

Do not announce the page until you have made a real booking through it.

• Phone first. Open the published page on an actual phone, not just a narrowed browser window. Check that the calendar fits the width, that you scroll the page rather than getting trapped inside the widget, and that a popup can be closed with a thumb.
• Time zones. The calendar should detect the visitor's time zone and show slots in it. Change your device's time zone, reload, and confirm the times shift. Then check that the confirmation email states the time zone explicitly.
• A complete booking. Book a slot with a personal email address. Confirm the event appears on your calendar, the invitation reaches the guest, and the video link is attached.
• Payment, if you charge. Run a booking through your processor's test mode, and try a cancellation to see the refund rule applied.
• A private window. Ad blockers and strict privacy settings sometimes block third-party embeds. Make sure there is a plain link to your booking page near the widget as a fallback.
• Speed. Run the page through a speed test before and after. If the calendar is below the fold, loading it lazily keeps the initial load fast.

Frequently asked questions

Do I need a developer to embed a booking calendar?

No. On WordPress and Webflow it is a copy-and-paste job that takes a few minutes. A developer helps only if your site is a JavaScript application or has a strict content security policy.

Will an embedded calendar slow my site down?

Slightly, as any third-party script does. Reserving the container height and lazy-loading a calendar that sits below the fold keeps the effect small.

Does embedding help SEO?

Not directly: the calendar's contents are not indexed as part of your page. The benefit is indirect — visitors stay on your site and complete the action they came for. Keep descriptive text on the page around the widget so search engines have something to read.

Can I take payment inside the embed?

Yes. If the event type has a price or deposit, the visitor pays as part of the same flow. See payments at booking.

Can I embed different calendars on different pages?

Yes. Each event type or team page has its own snippet, so a services page can offer a consultation while a support page offers a callback.

What about Squarespace, Wix, or Shopify?

The same principle applies: each has a code or embed block that accepts the snippet. Our shorter overview of embedding a booking widget covers the options.

Put it live

Pick the page with your most-clicked "contact us" button, replace the button's destination with an embedded calendar, and compare bookings over the next month. It is one of the few website changes you can make in ten minutes and measure in a week.

Explore the product overview, or start free, copy your embed code, and add booking to your site today.