Booking Website: Calendar Widget

Learn how to set up the Booking Website Calendar Widget and configure display options so visitors can view availability on your site.

The new booking website 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 website'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:

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

2. 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>

    

3. Modify lines 5-10, 12-13, and 16-18 in the code according to the relevant parameters:
   1. baseUrl: should be the booking website'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 the 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
       
        
4. 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.
5. Examples of the widgets with different settings: