This blog looks at TfL’s widgets and Open Data for developers, including our recent improvements. Get your website looking great with our redesigned Journey Planner widget!

What is a widget ?
A “widget” is a stand-alone application that can be embedded into third party sites by any user on a page where they have rights of authorship. Widgets can be considered as a downloadable small application which look and act like traditional apps, but are implemented using web technologies and our API.

What’s new ?
In October 2014, we re-designed our journey planner widget and banner to give them the same look and feel as our new website. The new widget also has email authentication built in so that we can get in touch with you quicker in future if we intend to change the widgets.

This is our brand new design for the TfL JP widget, which is now available for download.

This is our brand new design for the TfL JP widget, which is now available for download.

When will the old widget be deactivated?
We are now in a position to switch off the old journey planner widget and banner that you may have been using since we first introduced our travel widgets. We hope to deactivate these on Monday 1 December 2014.

We hope to deactivate the old Journey Planner widget and banner on Monday 1 December.

We hope to deactivate the old Journey Planner widget and banner on Monday 1 December.


How do I update the widget on my site?
To update to our new widget and banner style, please visit the following link:
https://tfl.gov.uk/forms/12425.aspx

Open data
All public TfL data (or ‘open data’) is released via our website for developers to use in their own software and services. We encourage software developers to use these feeds to present customer travel information in innovative ways, please see;
https://www.tfl.gov.uk/info-for/open-data-users/

Any questions or queries, please get in touch by leaving a comment below and I will endeavour to answer you. Thanks. 

 

 

 

Posted by Tariq

Agile DevOps, (ITIL & Scrum), Digital Transformation, Scrum Master, Product Owner, Service Design/Transition, Product Manager, Technical Delivery Manager

15 Comments

  1. Great job. The look and feel of this widget is thankfully much more refined and in keeping with the more modern presentation where clients may want this widget integrated for directions and travel times. We would like to know if the dark colour scheme journey planner, is the only style available for the widget. Any alternative styles planned?

    Like

    Reply

  2. Thanks for the feedback, the widget was designed to have the same look and feel of the new website, however we’ll look to offer customisation options for customers at the next review.

    Like

    Reply

  3. Looks good and journey planner loads up very quickly. However, I couldn’t plan for a journey not starting straight away and had to keep clicking on ‘later’ several times to get to the time I wanted to start the journey. There’s no option of stating the desired day and time of travel, like I could on the older version of the journey planner.

    Like

    Reply

    1. Hi there. You can set a departure or arrival time and date of your choice by clicking ‘change time’ on the homepage under the ‘from’ and ‘to’ fields.

      Like

      Reply

  4. Hi
    New widgets look really nice. I’m upgrading the existing journey planner widgets on our website and can not find the option to customise it. In previous widget we had the option to add a drop down box under “From” text box to select either post code, station or stop, address etc. The new widget seems to lack this functionality.

    Like

    Reply

  5. I’ve embedded the new Journey planner widget to our website now and have two problems:

    1) When users hit the “Plan my journey” button, it redirects user to tfl website leaving our website. Is it possible to open the result from tfl on a new page so that users can stay on our website as well.

    2) When searched via embedded journey planner widget, the “view on a map” links on resulted page do not zoom to the target area on the map. These just show the zoomed out London map instead. Although “View text instructions” link displays the correct information.

    Like

    Reply

    1. Planning to embed the widget, but like Shahid above, find that it directs users off our site. Please advise if this is likely to be altered.

      Like

      Reply

      1. Hi Brendan, that’s correct – the Journey Planner widget will direct users to a results page on our site.

        Like

  6. I’m finding the same problem with “view on a map”. The “view on a map” links on resulted page do not zoom to the target area on the map. Has never worked since new website went live. Windows 8.1 and Chrome browser. Really frustrating – can anybody help?

    Like

    Reply

    1. Hi David, if you access the site using the link http://www.tfl.gov.uk instead of https://www.tfl.gov.uk you should find it works fine on all modern browsers. We will be deploying a fix shortly which means it will work fine regardless of http or https connections.

      Like

      Reply

  7. Hi, is there intended to be whitespace underneath the journey planner widget? Is it perhaps reserved for showing a user’s recent journeys or something similar? I’m looking to embed the widget but there is an extra 55px of difference between the iframe’s height and the height of the div containing the widget within the iframe. The whitespace affects the vertical rhythm of the page and causes issues when the widget is shown in an area with a non-white background colour:

    https://drive.google.com/file/d/0B436bfki1sbbYWJmaEx1UHM4eU0/view?usp=sharing

    Like

    Reply

  8. Hi Will there be an embedded HTTPS version available soon as this will avoid browser warnings

    Like

    Reply

  9. Is there a reason why don’t TFL tube widgets allow HTTPS and include cross-origin headers? This causes a lot of headache for developers wanting to integrate TFL information on their sites and dashboards

    Like

    Reply

  10. Tariq,

    We were using the https://tfl.gov.uk/tfl/syndication/feeds/serviceboard-fullscreen.htm as a live tfl underground feed to show staff on our media screens but it is no longer coming up… any idea why or any alternative you know of we could use.

    Many thanks

    Like

    Reply

    1. Hello, apologies for the slow reply, I just saw this feedback. I have double-checked the URL/feed and everything is working as expected. I wonder if this was a one off transient incident ? If not, please let us know what browser you use and the error message. Best, Tariq

      Like

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s