Booking Website: Embeddable Search Bar

What?

• The embeddable search bar allows your guests to search the Booking Website directly from your 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 website > a new tab opens with the Hostaway Booking Website's search results according to the selected parameters.

How?

Copy/paste the code into your website, which will implement a search bar on your website.

 

Steps
 

1. To use the search bar, you should have a published Booking Website (publish it by going to Booking Website > Settings > Publish)

2. Embed the following code in the desired place in the website, i.e., Wix allows you to embed HTML codes (WordPress is deprecated, and unfortunately, is no longer supported).
   
   
   
    

   <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 website'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 website (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).