Search Box

Follow

How to use a Search box on a HTTPS site?

Generate a search box code at http://www.wan.travel/resources/custom_search_boxes and then simply replace the last 5 lines of code with the following:

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:300italic,600italic,400,300,600">
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="https://api.wegowidgets.com/assets/app/datepicker.css">
<link rel="stylesheet" type="text/css" href="https://api.wegowidgets.com/assets/app/v2/searchbox.css">
<script charset="UTF-8" src="https://api.wegowidgets.com/assets/wan/v2/searchbox.js"></script>

How to change Search box's color?

We provide a Search box in 8 predefined color schemes. However, you can redefine the Search box's color using CSS. Simply add the following code before the search box's code (don't forget to replace #205081 with the hex code of desired color:

<style>
.resources-content #wego-searchbox .wego-container {
.tab-content, h2.icon.hotels, h2.icon.flights {
background: #205081 !important;}}
</style>
Have more questions? Submit a request

Comments

  • Avatar
    Amit Agni

    Hi Natalya, I have added Wego Search Box on my website http://discoverdubaicity.com/about-dubai-city.html#SearchHotels

    Can you please tell me how to
    1. Remove the Text Input field for City. I want the users to search for hotels only in Dubai, by default. Removing it will decrease the size of the Search box, which is what i want.
    2. Center the Search box in the "Hotel Accommodation in Dubai" grid.

    Thanks in advance for your help / Regards, Amit

  • Avatar
    WAN Support Team

    Hi @Amit Agni

    I'd recommend you to reduce mergins between form's fields rather than removing City field.
    You can reduce margins by adding the following css before the search box code:
    <style>.resources-content #wego-searchbox #wego-hotels-searchform .wego-stacked-l {margin-bottom: -15px !important}</style>

    To center a search box add the following css:
    <style>.center {width: 360px}</style>

  • Avatar
    Amit Agni

    Thanks Natalya, that worked perfectly well.

  • Avatar
    khurrammir

    Hi Natalya,

    I am wondering Is there any specific policy of using search box in development environment? I am developing my website and want to test Search Box functionality. Is there any property which i need to set for development environment to differentiate production traffic from development traffic?

  • Avatar
    edi

    what should I add to the script so that the size of the widget is compatible with mobile view. I've tried to make the widget size smaller but less good when opened via desktop. I have an example of a screen shoot, where should I send it?

  • Avatar
    john godwin singh

    our search engine flight tickets its not working kindly rectify

  • Avatar
    WAN Support Team

    Hi @john godwin singh, can you check please, it should be ok now.

  • Avatar
    john godwin singh

    Ok ,Natalya Kosenko

  • Avatar
    Aldha Fourista

    Hi Natalya,

    search box did'nt appear correctly on my website : http://www.rbc-travel.com
    how can i change CSS code?

    thanks

  • Avatar
    sarahan

    Hi,
    Is the searchbox able to search for specific hotel by the hotel name? I seem to be able to search by countries only, but if I want to search for particular hotel such as Four season, I don't get any results. Please confirm if this is normal?

    Thanks.

  • Avatar
    WAN Support Team

    Hi @Sarahan,

    The current version of the search box supports search by city name only.

  • Avatar
    Lis

    Hi,

    how can I change the button style?

    thnx

  • Avatar
    Diwan Khan

    how to use search box separate separate for flight and hotel in the same html page, because i tried this and copy and paste in like <div>Flight form code</div> and <div>Hotel form code</div> but they display same form either Flight Form or Hotel Form. how to make possible both form in one html page separate separate display?

  • Avatar
    jaime

    How to add blank space or br tag
    between destination box and date box

    Edited by jaime