How do I use search boxes?

To implement a search box on your website, simply follow the steps below.

1

Go to Search boxes section of the Affiliate Portal. Create the search box by clicking on "Create New +"

2

Choose from the two main types of Search boxes: Generic and Hotel/Destination specific. The hotel and destination-specific boxes are ideal for use on any pages you have that are dedicated to particular locations/areas or hotels.

In the field "The search box name", enter the search box name. This is for your own reference and won't be shown to your users. If you plan to create a lot of search boxes, we recommend that you make the names as descriptive as possible. Click on "Get Started" to proceed.

3

In the Set-Up Section, choose the display language of the search box, the destination if you are using a hotel/destination specific search box and the HotelsCombined site address (or your brand link). Here you can add a label to be able to easily track the performance of your search box. If you would like the search results to open in the same browser window or tab, you can unselect this option. 

Click on "Continue" to proceed.

4

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.

5

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.

6

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.

7

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.

8

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

9

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

- The 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 the user has not selected their travel dates.

- Click continue to proceed.

10

Choose the color theme either from one of the 3 default themes:

Or create a new color theme by clicking on the button 'Create New'. Edit the color theme name. To change the color of each element, click on the color 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! Select 'Complete search box' once you have finished editing it.

11

You can now use the completed Search Box HTML code. 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.