Booking Engine Embeddable Search Bar Follow
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:
-
To use the search bar, you should have a published booking engine (publish it by going to booking engine settings -> publish)
-
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> -
Modify line 4-9 in the code according to the relevant parameters:
-
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). -
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) -
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 -
rounded: either
true/false. Determines whether the search bar has rounded or square corners -
openInNewTab: either
true/false. Determines whether the search results open in a new tab or in the current one -
font: determines the font of the text in the search bar. (important to include the ' character).
-
Comments
3 comments
Doesn't work
What are the parameters to change the button text color? Right now it is green.
Also any parameter to enlarge the filter options text?
Anyone answer these?
Please sign in to leave a comment.