Booking Engine: Embeddable Search Bar

What? The embeddable search bar allows your guests to search the booking engine directly from your own website. This is done by implementing a short code in your website that adds a search bar with some basic styling and customization options. When guests click the "search button" on your own website > a new tab opens with the Hostaway booking engine’s search results according to the selected parameters.

How? Copy the given code and paste it on your own website, which would implement a search bar on your website. 

Steps:

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 line 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 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 in the current one

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