Calendar Widget Follow

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

The embeddable calendar widget is a code that can be entered in 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:

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

2. Embed the following code in the desired place of 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://drakeshome.holidayfuture.com/',
   listingId: 40467,
   numberOfMonths: 2,
   openInNewTab: true,
   font: 'Open Sans',
   rounded: true,
   button: {
   action: 'checkout',
   text: 'Book now',
   },
   color: {
   mainColor: '#ff0000',
   frameColor: '#000000',
   textColor: 'green',
   },
   })
   </script>

3. Modify lines 5-10, 12-13, 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. For example, 'Book now' (important to include the ' character).

   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 widget with different settings: