Getting started

Learn more about the benefits of our Widgets

To use our widgets in your web pages you first need to include the following line of code with the Widget Key at the top of your web page:

<script type="text/javascript" src="//api.skyscanner.net/api.ashx?key=[WIDGET-KEY]"></script>

When using a widget on a page served over HTTPS, you must add an ssl=true parameter to the URL to ensure all widget resources are served securely. For example:

<script type="text/javascript" src="//api.skyscanner.net/api.ashx?key=[WIDGET-KEY]&ssl=true"></script>

You can then insert the actual code which creates and configures your widget.

<script type="text/javascript">
    skyscanner.load("snippets", "2"); 
    function main() {
        [WIDGET-SET-UP]
    };
    skyscanner.setOnLoadCallback(main);
</script>

Below you can find an example code.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
    <head>
        <script type="text/javascript" src="//api.skyscanner.net/api.ashx?key=ABCDEFGH"></script>
        <script type="text/javascript">
            skyscanner.load("snippets","2");
            function main(){
                var snippet = new skyscanner.snippets.SearchPanelControl();
                snippet.setMarket("UK")
                snippet.setCulture("en-GB");
                snippet.setCurrency("GBP");
                snippet.setShape("box300x250");

                snippet.draw(document.getElementById("snippet_searchpanel"));
            }
            skyscanner.setOnLoadCallback(main);
        </script>
    </head>
    <body>
        <div id="snippet_searchpanel" style="width: auto; height:auto;"></div>
    </body>
</html>
After calling skyscanner.load, you can use all of the loaded modules in your web page. In addition, use skyscanner.setOnLoadCallback to register the specified handler function to be called once the document loads.

Widget Request Parameters

The Widget request API understands the following parameters:

Parameter Required Type Description
keytrueStringYour widget key.
sslfalseBooleanWhen true, all widget resources are served via HTTPS. Defaults to false (resources served over HTTP).
Parameters are passed using standard HTTP GET parameters:
<script type="text/javascript" src="//api.skyscanner.net/api.ashx?key=[WIDGET-KEY]&ssl=true"></script>

Optional Load Parameters

The skyscanner.load method has the following prototype:

skyscanner.load("snippets", "2", [OPTIONAL-SETTINGS])

[OPTIONAL-SETTINGS] specifies all optional configuration options for the widget you are loading as a JavaScript object literal.

cssoff (default: false) - when true then default CSS file is not loaded
skyscanner.load("snippets", "2", {"cssoff" : true});
overridecss (default: none) - path to CSS file which will override default CSS
skyscanner.load("snippets", "2", {"overridecss" : "http://www.your-website.com/your-file.css"});