How to add an availability calendar to your Google Sites site

Before you start

Set up the calendar in SingleCal first. Under Connected calendars, add the iCal links from Airbnb, Vrbo or Booking.com for the rental. Under Booking links, choose where guests book. Then publish the calendar.

Open Share & embed and click Copy embed code under Website embed. That is the code you paste into Google Sites.

• The embed code contains your calendar's public ID only. It never includes your private iCal links.
• The code is an iframe plus a short script that fits the frame to the calendar. If a builder removes the script, the calendar still works at a fixed height of 680 pixels.
• Free calendars show a small SingleCal badge. Pro removes it and lets you use your brand color.

Add the calendar with Embed code

These steps follow Google's instructions for adding HTML, CSS or JavaScript to a site.

1. 1

   Open the page

   Open your site in Google Sites on a computer and go to the page where guests should see availability.

2. 2

   Insert an embed

   On the right, click Insert, then Embed.

3. 3

   Paste your code

   Choose the Embed code tab, paste your SingleCal code, click Next, then Insert.

4. 4

   Size the box

   Drag the edges of the embed box so it's about 700 pixels tall and spans the page width.

5. 5

   Publish

   Click Publish at the top right, then check the live page on a phone.

Getting the size right

Google Sites shows embedded code inside its own frame, so the calendar can't make the box taller by itself. If the bottom is cut off, drag the box taller in the editor and publish again.