Embeddable Search bar and Calendar widgets

Our Booking Engine comes equipped with useful features such as upselling, advanced search, and quick setup. However, it may not serve as a complete replacement for custom-created websites. Additionally, you may want to offer your guests the option to book your listings without having to leave your website or redirect them to your Booking Engine. This is where our Booking Engine Widgets come in handy. To learn more about how to connect the Booking Engine to your existing website, check out our webinar.

Widgets

Booking Engine Embeddable Search Bar

1. To use the search bar, you should have a published booking engine (publish it by going to booking engine settings -> publish)

2. Embed the following code in the desired place in the website (WordPress / Wix allow you to embed HTML codes)
   
   
   
   

   <script src="https://d2q3n06xhbi0am.cloudfront.net/widget.js?1640277196"></script>
   <script>
   window.searchBar({
   baseUrl: 'https://drakeshome.holidayfuture.com/',
   showLocation: true,
   color: '#cc2dcf',
   rounded: true,
   openInNewTab: true, // or false  
   font: 'Open Sans',
   });
   </script>
   <div id="hostaway-booking-widget"></div>
   

    

3. Modify lines 4-9 in the code according to the relevant parameters:
   
   

   1. baseUrl: should be the booking engine’s URL. Can be a holidayfuture or custom URL. If it is the holidayfuture URL or a custom subdomain URL then it should look like 'https://drakeshome.holidayfuture.com/' however, if it is a main custom domain URL it should look like 'https://www.mydomain.com/' (important to include the ' character).

   2. showLocation: either true/false. Determines whether the search bar has a location filter or not. The location list is taken from the booking engine (which uses the listing’s city as the location)

   3. color: a HEX color code that affects the search button color. For example '#cc2dcf' (important to include the ' character). Google "HEX color picker" to get the HEX color that fits your site

   4. rounded: either true/false. Determines whether the search bar has rounded or square corners

   5. openInNewTab: either true/false. Determines whether the search results open in a new tab or the current 

   6. font: determines the font of the text in the search bar. (important to include the ' character).
      
      

Calendar Widget

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.

• 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://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>

• 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. 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.
      
      
• 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:
  
  
  
  
  Note: It allows only one calendar widget per page