Website

How to add a booking calendar to your website

The Hosta TeamPublished July 10, 20267 min read

A website without a booking calendar is a brochure. Guests read it, get interested, and then have to email you and wait. Many don't. Putting a live calendar with real availability on your site turns lookers into bookers while you sleep. Here are the three ways to do it, easiest first.

Option 1: Embed a booking widget (recommended)

An embed widget is a small snippet of HTML you paste into your existing site. It renders a live calendar and booking form right on your page, powered by your booking system, so availability is always current and every request is conflict-checked. Hosta's widget is two lines:

<div data-hosta-property="your-property-slug"></div>
<script src="https://hostahq.co/widget.js" async></script>

This works on WordPress, Wix, Squarespace, Webflow, or hand-written HTML, anywhere you can paste an HTML block. Full instructions live on our developers page, and our team embeds it for you free if you'd rather not touch code.

Option 2: Link to a hosted booking page

If you can't edit your site's HTML, or you don't have a site at all, link your "Book now" button to a hosted booking page instead. Every Hosta property gets one automatically. It's also the right link for Instagram bios, WhatsApp, and your Google Business Profile.

Option 3: Build against a booking API

If you have a developer and want full design control, use an availability API to render your own calendar and submit bookings programmatically. Hosta's public APIexposes availability, booking submission, and an iCal feed per property, keyed by your property's public slug.

Mistakes to avoid

Put a live calendar on your site today

Hosta gives you an embeddable widget, a hosted booking page, and a public API. Free setup help included with every plan.

Start free with Hosta
Hosta

Simple, affordable booking and property management software for hosts, worldwide.

PRODUCT
COMPANY
RESOURCES
© 2026 Hosta. All rights reserved.