Embed your booking page on your website

Our embed modal makes embedding your booking page in your website fast and easy - even on mobile. Copy & paste the code and get your booking page embedded quickly. 

Embedding an iFrame

An  iFrame is a frame within a frame. It is a component of an HTML element that allows you to embed documents, videos, and interactive media within a page. By doing this, you can display a secondary webpage on your main page.

From your dashboard, select the booking page you want to edit. Next to Edit settings, click the dropdown menu and select Share & embed. 

On the pop-up window, click Embed and select Copy Embed Code. Paste this code to a page on your website.

Embedding with a Redirect URL after booking

If you choose to use the redirect to a specific URL after booking feature and you embed your booking page into your website, check the box "Update the whole browser window when using an iframe" so that the redirected URL will load correctly, instead of in the iframe itself.

Embedding with your Booking page intro and Footer

The embed code we provide only displays the grid of available booking times - not the Booking page intro with your image, or the footer. To embed your booking page with that information, you'll want to replace the &skipHeaderFooter=true with &embed=true line from your embed code.

Your embed code will look like this: 

<iframe src="https://testpage.youcanbook.me/?noframe=true&embed=true" id="ycbmiframetestpage" style="width:100%;height:1000px;border:0px;background-color:transparent;" frameborder="0" allowtransparency="true"></iframe><script>window.addEventListener && window.addEventListener("message", function(event){if (event.origin === "https://testpage.youcanbook.me"){document.getElementById("ycbmiframtestpage").style.height = event.data + "px";}}, false);</script>

Embedding in WordPress

1. On YouCanBook.me click Edit Settings for the booking page you want to embed. 
2. Click the Share & Embed button on the left hand menu.
3. Click Wordpress on the modal, and follow the directions

Embedding in WIX

WIX prevents the embedded site from firing correctly by sandboxing the iFrame. Reach out to Wix support if your embed is not working properly. 

1. Go to the Wix Editor
2. Click on "Add" (the +) on the left-hand column.
3. Click on Apps (you may need to scroll down to see it) and then "HTML".
4. You will see a box appear on the web page. Click on that and choose "Settings".
5. For "Mode", choose "HTML code" from the drop-down list. 
6. Paste the HTML code that you have copied from the Embed section into the HTML box. 
7. Click on Update (you may need to scroll down to see this).
8. Your schedule should appear in the box. You can use the Drag Handle to resize your box to fit the schedule.

Embedding in Squarespace

You'll need to use the Code block to embed your booking page on Squarespace. 

1. Copy the Embed code.
2. In your Squarespace site, open a page or post editor.
3. Add a Code Block to a page.
4. Paste the code into the block. 

Embedding in PageCloud

PageCloud has created their own step by step instructions on how to embed your booking page into your site.