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

• 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 Custom HTML block

These steps are for the WordPress block editor, which WordPress.com and current self-hosted WordPress both use.

1. 1

   Edit the page

   Open the page or post where guests should see availability.

2. 2

   Add a Custom HTML block

   Click + to add a block, search for Custom HTML, and choose it.

3. 3

   Paste your code

   Paste your SingleCal code into the block. Use the block's Preview option to check it.

4. 4

   Publish

   Click Update or Publish, then check the live page on a phone.

WordPress.com and other setups

WordPress.com removes iframe and script tags unless your site is on a paid plan with hosting features activated. If the calendar shows in the editor but disappears after you save, that's the reason.

On self-hosted WordPress, administrators can add iframes. On a multisite network, only super admins can, because WordPress removes iframes for other roles.

If you use the classic editor, switch to the Text tab and paste the code there. Most page builders, such as Elementor, have an HTML or code widget that works the same way.

If you can't embed code

If your WordPress.com plan doesn't allow iframes, the embedded calendar won't appear.

You can still show availability by linking to your hosted SingleCal page. In SingleCal, open Share & embed and click Copy page link. In WordPress, add a button or text link such as "Check availability" and paste the link. Guests see the same calendar on a SingleCal page, with buttons to book on your listings.