Embed your booking page on your website

You work hard to get customers to your website or social media pages. Make sure they don't have to leave them to make a booking with you. Our embed modal makes embedding your booking grids fast and easy - even on mobile. You can find it on the settings pages with all the options and simple copy & paste instructions for getting you up and running fast.

Embedding - General

  1. Click Edit Settings for the booking profile you want to embed. 
  2. Click the Share & Embed button on the left hand menu.

On the pop-up window, click Emed and select Copy Embed code.

Paste this code to a page on your website.

Embedding with your Header and Footer

By default, the embed code we provide strips the header and footer from your booking page, and only displays the booking grid. If you want to embed your booking grid with the header and footer, you'll want to change it to &skipHeaderFooter=false.

Your embed code will look like this: 

<iframe src="https://testpage.youcanbook.me/?noframe=true&<strong>skipHeaderFooter=false</strong>" 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 - WordPress

  1. On Youcanbook.me click Edit Settings for the booking profile 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

Did you know upgraded users can also style their booking grid to match the styles on their website? Find out more about styling your booking grid.

Embedding - WIX

Note: 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 YCBM 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 - Squarespace

Squarespace has created a help page to walk you through exactly how to do this. You can find it here: http://help.squarespace.com/guides/using-youcanbookme-with-squarespace.

Embedding - PageCloud

PageCoud have created their own step by step instructions on this page:  https://answers.pagecloud.com/help/you-can-book-me

Embed the grid in a pop-up on your site

You can find the instructions by clicking on the 'embed' button on your dashboard. Then go to "Get a button for your site" in the menu on the right.


Still need help? Contact Us Contact Us