Problems with SkyScanner Widget in webpage

Question

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);

Skyscanner · Accepted Answer · 2014-04-21T09:33:25.237

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>

thanks for getting in touch! I decided to abandon this as I was working towards a deadline so I didn't include the code in my site - however I have older versions saved so I've copied what I think was the JS I was using at the time which was causing the problem...hope you can make some sense of this! (I have edited the question to include this) — user3337052, Apr 21 '14 at 09:09
I've updated my answer with a basic HTML page with widget - hope this helps. Apologies for taking so long to answer; we'll make sure we check Stack Overflow more often for queries. — Skyscanner, Apr 21 '14 at 09:34

Problems with SkyScanner Widget in webpage

1 Answers1