Booking Engine: Calendar Widget – Hostaway

The new booking engine provides capabilities like upselling, advanced search, and quick setup. Still, due to its inherently limited customization options, it may not be a full replacement for custom-created websites. In addition, you may want to allow guests to book your listings without leaving your website.

The embeddable calendar widget is a code that can be entered into a website to display a calendar like the one that exists in the booking engine’s listing pages. It has styling and customization options. When guests click the action button they are led to a specific listing’s checkout or inquiry pages, according to your Hostaway specific settings.

It allows only one calendar widget per page.

How to set it up:

To use the calendar widget, you need to have a published booking engine in your Hostaway account

Embed the following code in the desired place on your website. As the widget links to a specific listing’s checkout/inquiry page, we recommend embedding it next to the information about the listing

<div id="hostaway-calendar-widget"></div>
<script src="https://d2q3n06xhbi0am.cloudfront.net/calendar.js"></script>
<script>
  window.hostawayCalendarWidget({
    baseUrl: 'https://www.mywebsite.com/',
    listingId: 40467,
    numberOfMonths: 2, // or 1
    openInNewTab: true, // or false
    font: 'Open Sans',
    rounded: true, // or false
    button: {
      action: 'checkout', // or 'inquiry'
      text: 'Book now',
    },
    clearButtonText: 'Clear dates',
    color: {
      mainColor: '#ff0000',
      frameColor: '#000000',
      textColor: 'green',
    },
  })
</script>

Modify lines 5-10, 12-13, and 16-18 in the code according to the relevant parameters:
1. baseUrl: should be the booking engine’s URL. Can be a holidayfuture or custom URL. For example 'https://drakeshome.holidayfuture.com/' (important to include the ' character)
2. listingId: The Hostaway Listing ID
3. numberOfMonths: can be either 1 or 2. Determines how many months are displayed in the widget
4. openInNewTab: can be either true or false. Determines whether the checkout/inquiry page will open in the same tab (when set to false) or in a new one (when set to true).
5. font: can be a font name. See list of fonts here. Determines the font used in the widget (important to include the ' character)
6. rounded: can be either true or false. Determines whether the calendar will have a round or square look
7. action: can be either 'checkout' or 'inquiry' (important to include the ' character). Determines whether the action button leads to the checkout or inquiry page of the listing
8. text: determines the text is shown on the action button and it is important to separate those
  - Book now(important to include the ' character)
  - ButtonText: 'Clear dates', text can be changed
9. mainColor: a HEX color code that affects the action button’s color. For example '#cc2dcf' (important to include the ' character)
10. frameColor: same as mainColor but for the frame of the widget
11. textColor: same as mainColor but for the text in the widget
The widget displays a calendar with either 1/2 months (according to the settings) where the listing’s availability is shown. The action button leads guests to the listing’s checkout/inquiry page.
Examples of the widgets with different settings:

How to set it up:

Related articles