Skip to main content
If you have a website of your own, you can show your Overviu calendar on it. Guests pick their dates and the number of guests, see whether the place is free and what the stay costs, and continue to your booking site with everything filled in. The booking itself, the payment and your terms stay on your booking site. It works on any website where you can paste HTML: Wix, Squarespace, Webflow, or a site your developer built. No API token is needed. On WordPress, use the WordPress plugin instead.

​
Before you start

  • The name of your booking site: the first part of its overviu.app address. For villa-laut.overviu.app it is villa-laut. Find the address in Settings → Domains under Managed subdomain. If your booking site uses your own domain, you still use the overviu.app name here.
  • For a calendar, the listing’s short name: the last part of the listing’s address on your booking site. For villa-laut.overviu.app/listings/sea-view it is sea-view.
  • A place on your website where you can paste HTML. Site builders call it an “embed”, “custom code” or “HTML” block.

​
Steps

1

Add the script

Paste this once on every page that shows a calendar or the search bar:
2

Add a calendar for one listing

Paste this where the calendar should appear, with your own names in place of villa-laut and sea-view:
It shows the calendar, the guests, the price for the chosen dates and a button to reserve. For a building, guests first pick one of its unit types.
3

Or add a search bar for all your listings

Guests choose where, when and who, and your booking site opens with the places that are free. Where there is little room, such as on a phone, the bar becomes a button that opens the same choices.

​
What happens next

  • The calendar shows your real availability and prices, and follows your prices and stay rules: minimum stays, days closed for arrival, and how far ahead guests can book.
  • When a guest clicks the button, your booking site opens with their dates and guests filled in, in the same language.
  • A booking that started on your website is an ordinary booking on your booking site.
  • The calendar uses the colours and font from your branding. To change more, see Style the calendar.
Renaming your team changes your overviu.app address. Change the team name in your website’s code afterwards, or the calendar stops loading.

​
Options

Add any of these inside the tag:

​
In a frame

Some site builders put custom code inside a frame. The calendar works there, and the button opens your booking site in the whole window. Give the frame enough height: about 650 pixels for a calendar, about 480 for the search bar, whose choices open below it.

​
For developers

The same elements are on npm as @overviu/widgets, with typed components for React (@overviu/widgets-react) and Vue (@overviu/widgets-vue). Each element sends an overviu-change event when the guest changes something and an overviu-continue event when they click the button; cancel the second to handle the step yourself. The packages’ pages on npm have the details.