Problems with SkyScanner Widget in webpage

I am following this example to include a SkyScanner widget on my website:

http://business.skyscanner.net/portal/en-GB/Documentation/Widgets

For some reason I just get an empty div - could this be something to do with the key? When I clicked on the activation link I got from SkyScanner for the widget key, I got a page saying the following:

Description: An application error occurred on the server. The current custom error settings for this application prevent the details of the application error from being viewed remotely (for security reasons). It could, however, be viewed by browsers running on the local server machine.

Details: To enable the details of this specific error message to be viewable on remote machines, please create a tag within a "web.config" configuration file located in the root directory of the current web application. This tag should then have its "mode" attribute set to "Off".

I have created a web.config file with the following code:

<!-- Web.Config Configuration File -->

<configuration>
    <system.web>
        <customErrors mode="Off"/>
    </system.web>
</configuration>

I've had a look at 'inspect element' on Chrome and get the error

Uncaught TypeError: Object # has no method 'write' api.ashx?key=[KEY]:1

This is the JS:

var API_KEY = 'b7290ac3-1f9f-4575-88a7-89fed0c61f7f',
MAIN_URL = 'http://api.skyscanner.net/api.ashx?key=' + API_KEY;

function main(){
    console.log('loaded module');
    var snippet = new skyscanner.snippets.SearchPanelControl();
    snippet.setCurrency('GBP');
    snippet.setDeparture('uk');
    snippet.draw(document.getElementById('snippet_searchpanel'));
};

function newWrite(str) {
    $(str).appendTo('body');
}

var oldWrite = document.write;
document.write = newWrite;

function onMainSkyscannerScriptLoad(e) {
    console.log('loaded main script');
    skyscanner.loadAndWait('snippets', '1', {'nocss' : true}, main);
}

$('button').click(function() {
                  console.log('getting main script');
                  $.getScript(MAIN_URL, onMainSkyscannerScriptLoad);
                  });

I also used this to personalise the widget:

skyscanner.load("snippets","2");
function main(){
    var snippet = new skyscanner.snippets.SearchPanelControl();
    snippet.setShape("box300x250");
    snippet.setCulture("en-GB");
    snippet.setCurrency("USD");
    snippet.setColourScheme("classicbluelight");
    snippet.setProduct("flights","1");
    snippet.setProduct("hotels","2");
    snippet.setProduct("carhire","3");

    snippet.draw(document.getElementById("snippet_searchpanel"));
}
skyscanner.setOnLoadCallback(main);

Solution

Skyscanner B2B support engineer here. Are you still having trouble with this?

For the quickest response, please contact us here: http://business.skyscanner.net/portal/en-GB/Home/Contact

The first thing to check is that the file is on a web server (localhost is fine), and not loaded from the desktop (or local disk in general). This is because some of the Skyscanner JS code looks up other files using URLs like //api.skyscanner.net. In other words, saving the file to the desktop and opening it from there will not work (will show as an empty div). Here's the most basic example of drawing a widget. Can you try putting this in a file and accessing it through a server? If it works we can build on it :)

<!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=b7290ac3-1f9f-4575-88a7-89fed0c61f7f"></script>
        <script type="text/javascript">
            skyscanner.load("snippets","2");
            function main(){
                var snippet = new skyscanner.snippets.SearchPanelControl();
                snippet.setShape("box300x250");
                snippet.setCulture("en-GB");
                snippet.setCurrency("USD");
                snippet.setProduct("flights","1");
                snippet.setProduct("hotels","2");
                snippet.setProduct("carhire","3");

                snippet.draw(document.getElementById("snippet_searchpanel"));
            }
            skyscanner.setOnLoadCallback(main);
         </script>
    </head>
    <body>
        <div id="snippet_searchpanel" style="width: auto; height:auto;"></div>
    </body>
</html>