Skip to main content
Sign in Menu

Booking Engine: Embeddable Search Bar

Victor
  • Updated

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)

    mceclip0.png

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

 

 

Related articles