How to add an availability calendar to your Weebly 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 Weebly.

• 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 the Embed Code element

These steps follow Weebly's instructions for embedding code. Weebly is now part of Square; these steps are for the Weebly editor.

1. 1

   Add an Embed Code element

   In the Weebly editor, drag the Embed Code element from the Build tab onto the page where guests should see availability.

2. 2

   Paste your code

   Click inside the element, select Edit Custom HTML, and paste your SingleCal code.

3. 3

   Save and publish

   Click outside the element, then publish your site. Some embedded code doesn't show in the editor, so check the live page.

Getting the size right

Weebly inserts the code directly into your page, so the calendar's script can fit the frame to the calendar. Check the live page on a phone after publishing.

• Place the element in a full-width section so the dates stay readable.
• If you edit the code, keep the width at 100%.