A well-configured search bar can make a big difference in the user experience and your conversion rates. When it's clear, intuitive, and functional, it improves navigation, reduces obstacles in the booking process, and speeds up traveler decision-making. At AvaiBook, we provide you with a fully configurable search bar, designed to adapt to both the specific needs of your business and the visual style of your website.
Go to settings
Go to the Booking Engine menu > Publish to my website > Search bar.
From here you can configure its behavior, filters, and the type of information it will display.
Define which accommodations the bar will work on
First, you must indicate which accommodations will be included in the search engine. You have two options:
All Accommodations: Will include all of your active properties.
Custom listings: You can choose a specific listing (previously created from the "Listings" section) to display only certain properties.
In addition, you can decide whether the results will be displayed by:
Accommodations (each individual property)
Listings (accommodation groups)
Set the type of results
You can enrich the results by activating:
Show accommodation units: to show, for example, specific rooms within an accommodation.
Show zones: Useful if your properties are grouped by areas or sectors.
These options offer more detail to the user when viewing their search results.
Turn on search filters
Decide which filters you want to be visible in the search bar:
No filters: only dates and guests.
Zone filter: allows you to select a specific zone within the list.
Filter by accommodation: shows a drop-down menu with the available properties.
📌The filter option can help the user to better refine their search from the first moment.
Choose how the results will be displayed
You have two options for how the bar will behave when you run a search:
Same tab: Results replace the current page.
New Tab: Results open in an additional browser tab.
This allows you to decide on the browsing experience that best suits your website.
Copy and embed the code on your website
Once you've set everything up:
You'll see an auto-generated HTML code.
Copy and paste it in the exact place on your website where you want the search bar to appear.
The bar is responsive, so it will automatically adapt to the width of the container in which you include it.
Customize with HTML and CSS code (optional)
If you're technically savvy, you can adjust the appearance of the bar from your own website using CSS styles. You can also check out the "Explain" option within the dashboard for more advanced technical guidance.
Setting up the search bar in AvaiBook is a simple and flexible process. It allows you to define exactly which accommodations will be displayed, how the results will be displayed, and what filters will be available to the user. Follow these steps and offer efficient search that improves the traveler experience and increases your bookings.