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

• 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 in the Wix Editor

These steps follow Wix's own instructions for embedding a widget. Menu names can differ slightly in Wix Studio.

1. 1

   Open the page

   Open your site in the Wix Editor and go to the page where guests should see availability.

2. 2

   Add an Embed HTML element

   Click Add Elements on the left, then Embed Code, then Popular Embeds, and choose Embed HTML.

3. 3

   Paste your code

   Click the new element, click Enter Code, paste your SingleCal code under Add your code here, and click Apply.

4. 4

   Size the element

   Drag the element's handles so it spans your content width and is at least 700 pixels tall.

5. 5

   Publish and check

   Publish the site, then open the page on your phone to check the calendar fits.

Getting the size right

Wix shows embedded code inside its own frame, so the calendar can't make the element taller by itself. If the bottom of the calendar is cut off, drag the element taller.

Check the mobile view separately. If the calendar looks cramped there, adjust the element's size in Wix's mobile editor.

• Start with a height of about 700 pixels.
• Use the full content width so the dates stay readable.
• Wix only shows embeds that use HTTPS. SingleCal's code already does.