What are search boxes and how do I use them?

Search boxes are a popular way of linking to HotelsCombined website or your White Label site. Creating a search box is easy! Simply follow the steps below.

Step 1: Go to Search boxes section of the Affiliate Portal

Step 2: Create the search box by clicking on "Create New +"

Step 3: In the field "The search box name", enter the search box name. This is the name of your search box for your own reference and won't be shownto your users. 

If you plan to create a lot of search boxes, we recommend that you make the names as descriptive as possible.

Step 4: Choose from the two main types of  Search boxesGeneric and Location specific/Hotel specific. The location and hotel specific boxes are ideal for use on any pages you have that are dedicated to particular locations/areas or hotels. Click on "Continue" to proceed.

Step 5: In the search box settings, choose the display language of the search box, the brand link OR the HotelsCombined site address, and add a label to be able to easily track the performance of your search box. Click on "Continue" to proceed. 

Step 6: Customize the layout and content of the search box.

There are 4 recommended layouts. The responsive layout will have adjustable width according to the browser resize on desktop, mobile and tablet. 
Step 7: Define your font family, by entering the font names separated by a comma (optional). The font will be used depending on the font availability on the viewer's system, following the order from left to right. 

You can also skip this option and leave the recommended default font order as it is. 

Step 8: Set the travel dates (optional). You can leave the dates blank and allow the user to choose their travel dates, but you can also set the check-in and -out dates for the user, if you would like to create a search box for a specific date/event. However, please note that the search box will revert to default once the date set has passed.

Step 9: Enter the search box title (optional). The title of the search box will be displayed to your users and can be used to customize the call to action. You can leave the default title "Search Hotels", or have it blank if you prefer not to show any title. You can also change the title text size. 

Step 10: Enter the button text (optional). You can also leave the default title "Search", and you can also change the button text size. 

Step 11: Adjust the input, label and error text size (all optional).

  • Input field is the empty space in which users enter their text. 

  • Label text is the "Where?", "Check-in" and "Guests".

  • Error text size appears when user has not selected their travel dates.

Step 12: Choose the colour theme either from one of the 3 default themes.

You can also create a new colour theme. 

Edit the colour theme name.

To change the colour of each element, click on the colour bar and adjust as needed. Click "OK" to go ahead with the new selection, or click "Cancel" to go back.

Important note: Remember to scroll down and "Save Theme" to save your new theme!

Step 13: The Search Box HTML code is provided in the left-hand corner of the search box preview image. Please ensure you copy the code exactly as it appears on the page. If you are confident with HTML code, you can adjust it to your particular requirements.