--- title: Hotel Search widget — Skyscanner Partners description: Hotel Search Widget --- [![Skyscanner](https://www.partners.skyscanner.net/hs-fs/hubfs/Skyscanner_November2019/Images/Asset+1@2x.png?width=1600&height=260&name=Asset+1@2x.png "Skyscanner")](https://www.partners.skyscanner.net/) Hotel Search Widget When you want to provide location and dates controls for hotel search on your site, our Hotel Search Widget gives you everything your user needs to start a search on Skyscanner.   ***NB:** For best presentation on your landing page, ensure that the widget is in a container with a width of **at least 250px**, otherwise you may experience styling issues.*** **Important note: *If you are using a [Content Secure Policy Header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) to control resources on your website, please make sure you allow the following URLs: www.skyscanner.net, widgets.skyscanner.net, js.skyscnr.com, css.skyscnr.com.*   ## Generate commissions with our Travel Widgets Please note that in order to track your traffic and generate commission with our Travel Widgets, you'll have to be an approved partner on Impact and use the Travel Widget codes provided via Impact that have the correct tracking. Apply to [join our affiliate programme here](https://www.partners.skyscanner.net/affiliates/affiliate-products).   Please check your commercial terms on Impact if it includes Hotels payout, otherwise you will not be paid any commission.    ## Widget Options You can customize your widgets with localization, colours, text and more - see below for details on how to set these options. skyscannerWidget required data-skyscanner-widget="HotelSearchWidget" Defines the widget type. Show details HotelSearchWidget locale recommended data-locale="ru-RU" Sets widget language. You can use one of "bg-BG", "ca-ES", "cs-CZ", "da-DK", "de-DE", "el-GR", "en-GB", "en-GG", "en-US", "es-ES", "es-MX", "fi-FI", "fr-BE", "fr-CH", "fr-FR", "hr-HR", "hu-HU", "id-ID", "it-CH", "it-IT", "ja-JP", "ko-KR", "ms-MY", "nb-NO", "nl-BE", "nl-NL", "pl-PL", "pt-BR", "pt-PT", "ro-RO", "ru-RU", "sk-SK", "sv-SE", "th-TH", "tl-PH", "tr-TR", "uk-UA", "vi-VN", "zh-CN", "zh-HK", "zh-SG", "zh-TW" (*Note:* the "locale" value is **case-sensitive**) Four letter locale code "en-GB" market recommended data-market="AU" Sets the target Skyscanner domain. (*Note*: this will impact flights shown based on local market restrictions and inventory) Two letter country code "UK" currency recommended data-currency="USD" Sets the currency to display upon redirect to Skyscanner search results Three letter currency code "GBP" destinationName optional data-destination-name="Edinburgh" Sets a fixed destination (to) Show details Free text (Location name) destinationGeoLookup optional data-destination-geo-lookup="true" Uses GEO-IP to infer an destination (to) true / false false destinationCoords optional data-destination-coords="55.944339,-3.1952956" Sets destination nearest to given , Show details Comma separated pair of float numbers associateId optional data-associate-id="ABC_DEF_12345_56789" Allows for tracking of widget exits. You can obtain your associate ID from your account manager or by [contacting us](https://www.partners.skyscanner.net/contact/). Affiliate ID string "WIG_WBT_01426_00001" target optional data-target="_self" Opens the Skyscanner search results in the same window (_self) or new window (_blank) One of **"_self"**, **"_blank"** "_blank" colour optional data-colour="solar" Changes background colour of the widget. Show details Preset color name or hex code transparent fontColour optional data-font-colour="#000" Changes font colour of the widget. Show details Preset color name or hex code Autocalculated to contrast the background buttonColour optional data-button-colour="dawn" Changes background colour of the search button. Show details Preset color name or hex code Blue buttonFontColour optional data-button-font-colour="#fff" Changes font colour of the search button. Show details Preset color name or hex code Autocalculated to contrast the background of search button buttonLabel optional data-button-label="Book now!" Allows you to customise the button text shown in the widget. Free text "Search Flights" buttonTextSize optional data-button-text-size="1.4" Sets scale of text on the search button comparing to its default size. Float number 1.4 poweredByLogoColour optional data-powered-by-logo-colour="light" Changes colour of the Skyscanner logo. Show details One of "default", "light", "dark" "default" poweredBySize optional data-powered-by-size="1.5" Sets size (scale factor) of the "Powered by" text and Skyscanner logo comparing to default size. Show details Float number 1 widgetPadding optional data-widget-padding="10px 12px" Sets padding margins of the whole widget. Show details A number in pixels or a value of CSS "padding" rule 0 widgetBorderRadius optional data-widget-border-radius="4" Sets border rounding radius of the whole widget Show details A number in pixels or a value of CSS "border-radius" rule 0 widgetScale optional data-widget-scale="1.3" Scales the whole widget. The value sets, how many times the widget must be as big as original size. Float number 1 enablePlaceholders optional data-enable-placeholders="true" Swaps 'from' and 'to' labels above inputs to placeholders on inputs, which will give a more streamlined look. true / false false responsive optional data-responsive="true" Makes the widget responsive and allows it to fit onto a single line (if wide enough) true / false false hotelCheckInDate optional data-hotel-check-in-date="2019-03-22" Presets hotel check-in date. Date in the "YYYY-MM-DD" format hotelCheckOutDate optional data-hotel-check-out-date="2019-03-25" Presets hotel check-out date. Date in the "YYYY-MM-DD" format utmTerm optional data-utm-term="blog" An additional alphanumeric tracking parameter that's reported in Impact as SubId2. Alphanumeric value with a maximum length of 255 zIndex optional data-z-index="100" The z-index of the widget container. Number 500   ## Widget Builder Here you can play around with parameters of widgets and construct **Hotel Search Widget of your preference** using the side panel on the left. There are many of them, make sure you find the right one for you! [![Skyscanner](https://www.partners.skyscanner.net/hubfs/Skyscanner_November2019/Images/Skyscanner_Logo_LockupVertical_White_RGB.png)](http://www.skyscanner.net/) © 2002-2022 Skyscanner Ltd. [Privacy Policy](https://www.partners.skyscanner.net/privacy-policy) & [Terms of Service](https://www.skyscanner.net/media/terms-of-service)