How to Add a Free Booking Calendar to Your Website (Wix, Squarespace, WordPress)

Make a free booking pageDownload the booking embed checklist (PDF)

What an embedded booking calendar actually is

When a booking tool says "embed it on your website", it almost always means an iframe: a small window in your page that shows the booking page from the booking tool's own server. Your website does not store the calendar or the bookings. It only displays them, which is why one line of code is enough and why the times stay up to date without you touching the website again.

The iframe element is a standard part of HTML, so any website can show one in principle. In practice, website builders decide what their customers may paste, and that is where most failed embeds come from.

Our free booking page gives you an embed code for each service. It looks like this, with your own address in it:

<iframe src="https://portal.fynl.io/book/your-business/consultation?embed=1"
  style="width:100%;min-height:900px;border:0" title="Consultation"></iframe>

The embed=1 part hides the page's own header so the calendar sits cleanly inside your design, the width follows your page, and the minimum height leaves room for the times and the booking form.

Check your website plan first

This is the step people skip, and it is why a calendar shows up in the editor and then vanishes when the page is saved.

• Squarespace. Its help page on code blocks says that adding JavaScript or an iframe to a code block needs the Core, Plus or Advanced plan.
• WordPress.com. The Custom HTML block guide lists iframe among the tags that need a paid plan with hosting features activated; a paid plan on its own is not enough. Self-hosted WordPress sites do not have that rule, though a security plugin can still strip iframes.
• Wix. Its guide to embedding a site or a widget says only https code and addresses display, and that the embed element itself is an iframe, so content does not resize on its own unless you give it room.

If your plan blocks iframes, do not fight it. A clear "Book now" button that opens the booking link in the same tab works on every plan, loads faster, and is often easier to use on a phone than a calendar squeezed into a column.

Step by step: from booking page to embedded calendar

1. Make the booking page

Open the free booking page builder, add your business name, up to three services with their lengths, your weekly hours, time zone, where appointments happen and any questions. Publish it with your email and open the link we send you.

2. Copy the embed code

In your free account go to Calendar, then Booking calendars. Each service has a row with Copy link, Edit and a More menu. Choose More, then Copy embed code. There is also a Copy all-calendars link button at the top if you would rather send people to one page listing every service. The video above shows this screen.

3. Check your website plan

Use the list above. If iframes are blocked, skip to the button approach at the end of this guide.

4. Paste it into a code block

Squarespace: open the page for editing, add a block and choose Code, paste the code and set Mode to HTML. WordPress: add a Custom HTML block, paste the code and update the page. Wix: Add Elements, then Embed Code, then Embed HTML; click Enter Code, paste and apply, then drag the element's height so the whole calendar fits.

Put the calendar in a full-width section on a page of its own, such as /book, rather than in a narrow sidebar. A dedicated page is also easier to link to from everywhere else.

5. Test on a phone

Publish the website page, open it on your phone and make a real booking. Check that nothing is cut off, that you can scroll to the form, and that the booking appears in your account. Then cancel it from the confirmation page so it does not sit in your calendar.

Embed or link: which works better

An embedded calendar keeps people on your site, which feels tidy, but it is not automatically the better choice. On a phone, an iframe inside a page means two scroll areas, and a calendar squeezed below your header and menu has less room than the booking page has on its own. A plain link opens the full booking page, which is built for phones, loads only what it needs and works on every website plan.

A sensible split for most small businesses: embed the calendar on one dedicated Book page for people browsing on a computer, and use a plain "Book now" link everywhere else, including your menu, your home-page button, your email signature and your social profiles. If you have three services, consider embedding the all-services page rather than one calendar, so the client picks the service first and the times follow.

Whichever you choose, make sure the address people see is one you are happy to share. The booking page link is the same one you would put in an email, so it is worth testing it on its own before you test the embedded version.

Common problems and fixes

1. The calendar is cut off at the bottom. The block is shorter than the content. Give the embed element more height, or keep the min-height in the code.
2. It shows in the editor but not on the live page. Almost always the plan rule above. Use a button with the booking link instead.
3. The calendar is squashed. It is in a column. Move it to a full-width section.
4. Clients book the wrong service. Embed each service on its own page, or use the all-calendars link so they choose first.
5. Nobody finds the page. Link to it from your menu and from a "Book now" button on the home page, and put the plain link in your email signature.

On the free plan nobody receives emails, so the confirmation screen is what tells a client they are booked. The paid plan adds confirmation and reminder emails sent from your own Gmail. For where else to put the link, read how to make a booking link and place it; for comparing booking tools before you commit, see free Calendly alternatives. Every free tool is on one page.

Questions people also ask

Sources

• MDN Web Docs — The iframe element
• Squarespace Help — Code blocks
• WordPress.com Support — Custom HTML block
• Wix Help — Embedding a site or a widget