Adding skyscanner api to wordpress page

Question

Using SkyScanner's white label API, I'm trying to add the following to a Wordpress webpage...

The code works fine when placed into the body of a simple webpage. Can anyone let me know how to get it to work in a WordPress page? I'm creating/editing the page via wp-admin. I'm using a standard template.

Thanks in advance.

<div id="wl-container"></div>
<script>
   (function (s, k, y) {
       var l = s.createElement("script");
       l.src = k + "/js/client.js"; l.async = 1;
       l.onload = function () { y({ serviceBase: k }); };
       var t = s.getElementsByTagName("head")[0]; t.appendChild(l);
   })(document, "//whitelabel.api.skyscanner.net", myCallback);


   function myCallback(options) {
       var whitelabel = new Skyscanner.Flights.Whitelabel({
           serviceBase: options.serviceBase,
           customerId: "testwl46"
       });


       whitelabel.create("wl-container", {
           market: "UK",
           locale: "en-GB",
           currency: "GBP",
           originPlace: "EDI",
           destinationPlace: "LON",
           outboundDate: "2014-03-10",
           inboundDate: "2014-04-10"
       });
   }
</script>

Answer 1

I finally manage to get this to work by being very careful with the indenting, spaces and line breaks when entering the javascript within the wordpress page editor

Answer 2

thanks for using our Skyscanner White Label.

I see you finally managed, by the way using WordPress there is a couple of things you should follow in inserting Javascript code:

• Use Text Editor option instead of Visual Editor
• Have a look at this page http://codex.wordpress.org/Using_Javascript as there are some rules in using Javascript within WP

Hope this helps in case you still have problems

Answer 3

I had hard time with this and finally resolved it by installing this plugin from Amazon https://s3.amazonaws.com/videomaster/plugins/simple-js-paste.zip

You can put your javascript code in it, and in the text field put skyscanner div. I wish this help.

Answer 4

Thank you.

<div id="wl-container"></div>
<script>
   (function (s, k, y) {
       var l = s.createElement("script");
       l.src = k + "/js/client.js"; l.async = 1;
       l.onload = function () { y({ serviceBase: k }); };
       var t = s.getElementsByTagName("head")[0]; t.appendChild(l);
   })(document, "//whitelabel.api.skyscanner.net", myCallback);


   function myCallback(options) {
       var whitelabel = new Skyscanner.Flights.Whitelabel({
           serviceBase: options.serviceBase,
           customerId: "testwl46"
       });

       whitelabel.create("wl-container", {
           market: "UK",
           locale: "en-GB",
           currency: "GBP",
           originPlace: "EDI",
           destinationPlace: "LON",
           outboundDate: "2014-03-10",
           inboundDate: "2014-04-10"
       });
   }
</script>