White Label
For example if you own www.yourwebsite.com and you would like to set up flight search on search.yourwebsite.com, once you are happy with your White Label, you will need to publish it. To do so, you will need to follow the 3 following steps:
- Set up a CNAME to redirect to your website e.g. search.yourwebsite.com to whitelabel.b2b.skyscanner.net. Your site will then be live at http://search.yourwebsite.com
- Make sure to configure the domain of your White Label to search.yourwebsite.com
- Go to your domain name registrar and find the DNS management tool. Create a CNAME record for search.yourwebsite.com pointing to whitelabel.b2b.skyscanner.net. You can use a CNAME lookup tool like this one to check if the CNAME DNS record is configured correctly: http://mxtoolbox.com/CNAMELookup.aspx
- Edit the settings in WL Configuration Panel
Now go to http://business.skyscanner.net/portal/en-GB/WhiteLabel/, log in and click "Add New White Label" or "Edit" one. Set the Domain name to match the subdomain you've just configured CNAME for: search.yourwebsite.com. You'll also need to set other obligatory parameters like Page title, Logo etc so can publish your White Label (these fields are marked with asterisks). - Publish
Click Publish. Note that changes in the Configuration take about 5 minutes to apply.
Embedding the search controls
You can also embed the search controls directly onto your site. To do this, go to the configuration page of your White Label and select "Widget". You can then copy and paste this code anywhere on your page. Any user who searches with that widget will be linked to the White Label on the domain you have set up above. From the configuration engine, select the widget style and copy the code to your website.
This bootstrap script above registers widget initialization routine on the page load event. After the page is loaded, the bootstrap script loads a dynamic script and stylesheet and renders the search widget.
The search widget will appear in place of the <script> tag. Alternatively, you may specify "container" parameter to indicate the ID of the placeholder to put widget into.
If you're using a blog engine like Wordpress for your website, make sure it allows JavaScript execution.
Here are all parameters that you can set on the widget to configure it:
| Parameter | Default | Value |
|---|---|---|
| product | flights | Specifies which of the verticals is active (either "flights" or "carhire"). |
| language | en-GB | Specifies the language of the widget. See all supported locales. |
| currency | GBP* | Specifies the language of the widget. See all supported currencies. |
| origin | LOND** | Specifies the default origin place in the flights search form. |
| destination | (empty) | Specifies the default destination place in the flights search form. |
| pickupplace | (empty) | Place ID (see carhire autosuggest). Specifies the default pick-up place in the carhire search form. |
| dropoffplace | (empty) | Specifies the default drop-off place in the carhire search form. |
| agegroup | 25-70 | Specifies the default value of the age group dropdown in the carhire search form. |
| container | (empty) | Specifies id of the container where the widget will be rendered. |
| type | large | Specifies the size of the widget. Could be: large (990px), medium (740px) or compact (320px). |
| responsive | true | Specifies whether the "type" of the widget should change on window resize. |
| theme | (empty) | Specifies a theme value for the widget. By default it uses the theme set up in the configuration engine. Possible values: default, tranquil, beach, business, explorer, future, social. |
| newWindow | false | Specifies whether the results should open in a new window. |
| deferred | false | Used for loading the widget on demand. |
| host | (empty) | Used for loading the widget through https to specify the White Label url. |
* If currency is not specified in the url, the White Label will use the currency preserved in the browser (from the last time the user visited the page). If it's a first time visitor the White Label will automatically choose the default currency based on the user's location. If this currency is not supported, then it will fall back to GBP.
** LOND is a Skyscanner location code (see location autosuggest).
All widget parameters can be set as query parameters to the widget sswidget.load.v1.min.js script like:
http://search.yourwebsite.com/scripts/widget/sswidget.load.v1.min.js?type=compact&language=en-GB&origin=LOND&destination=DEL¤cy=GBP&theme=beach
There are three available sizes of the widget - large (990px wide), medium (740px wide) and compact (320px wide). By default the widget would automatically switch between these three on window resize. If you need to turn off this behavior just set responsive=false parameter.
Landing on the specific search
You may decide that you need to link to a particular search results page. This is also possible with the White Label. For example:
http://search.yourwebsite.com/en-GB/#/result?originplace=LOND&destinationplace=EDI&outbounddate=2015-01-10&inbounddate=2015-01-15&cabinclass=Economy&adults=1&children=0&infants=0
where the parameters are:
| Parameter | Value |
|---|---|
| en-GB | is the language code |
| outbounddate | yyyy-mm-dd |
| inbounddate | yyyy-mm-dd or empty |
| originplace | Skyscanner locations schema (basically, IATA codes with one difference: 4-character metropolitan area codes eg LOND, NYCA etc; see http://business.skyscanner.net/portal/en-GB/Documentation/FlightsLivePricingList for more details) |
| destinationplace | Skyscanner locations schema |
| cabinclass | 'Economy', 'PremiumEconomy', 'Business' or 'First' |
| adults | number from 1 to 8 |
| children | number from 1 to 8 |
| infants | number from 1 to 8 |
| promotedPrice | number - This allows us to display a message on the results page if the price has changed since last seen. |
| promotedCurrency | 'GBP', 'USD' - This allows us to display a message on the results page if the price has changed since last seen. |
| promotedProvider | CarrierId - This allows us to display a message on the results page if the price has changed since last seen. |
The Currency can also be set from the URL:
http://search.yourwebsite.com/en-GB/#/result?originplace=LOND&...¤cy=USD
| Supported Locales | Supported currencies |
| ar-AE cs-CZ da-DK de-DE el-GR en-GB en-US es-ES fi-FI fr-FR hu-HU id-ID it-IT ja-JP ko-KR ms-MY nb-NO nl-NL pl-PL pt-BR pt-PT ro-RO ru-RU sv-SE th-TH tl-PH tr-TR uk-UA vi-VN zh-CN zh-TW |
AED AFN ARS AUD BDT BGN BOB BRL BTN CAD CHF CLP CNY COP CUC CZK DKK EGP EUR FJD GBP HKD HRK HUF IDR INR ISK JOD JPY KGS KHR KPW KRW KWD KZT LAK LKR MOP MMK MNT MVR MXN MYR NOK NZD OMR PGK PHP PKR PLN QAR RON RUB SAR SEK SGD THB TJS TMT TRY TWD USD UAH VEF VND VUV XAF XOF XPF WST ZAR |
Loading the widget on demand (deferred loading)
Often there are situations where the user wants the widget loading to be deferred. This can be achieved by supplying a deferred=true argument to the widget loader:
<script src="http://whitelabeldemo.skyscanner.net/scripts/widget/sswidget.load.v1.min.js?&product=flights&deferred=true"></script>
Loading the widget through HTTPS
What is different from the standard code snippet is the last script tag. The value of the "src" attribute should start with "//whitelabel.skyscanner.net", the "host" parameter should be set to your domain and the "redirect" parameter should be set to http://your-domain
<!-- If you want the widget to support IE8, please include the following snippet: --> <!--[if lt IE 9]><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.0/es5-shim.js"></script><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script><![endif]--><!--[if gte IE 9]><!-->
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script><!--<![endif]--> <!-- IE8 snippet end --> <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <!-- You don't need the jQuery script above if your website already has jQuery --> <script src="//whitelabel.skyscanner.net/scripts/widget/sswidget.load.v1.min.js?host=whitelabeldemo.skyscanner.net&redirect=http://whitelabeldemo.skyscanner.net&product=flights&type=large&deferred=false&language=en-GB&newWindow=true"></script>