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)
1 <script src="https://d2q3n06xhbi0am.cloudfront.net/widget.js?1640277196"></script>
2 <script>
3 window.searchBar({
4 baseUrl: 'https://drakeshome.holidayfuture.com/',
5 showLocation: true,
6 color: '#cc2dcf',
7 rounded: true,
8 openInNewTab: true
9 font: 'Open Sans',
10 });
11 </script>
12 <div id="hostaway-booking-widget"> -
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
0 comments
Please sign in to leave a comment.