Embedding ONS interactives in your website

Screenshot of subnational indicators tool

Here’s a simple guide to embedding our interactive maps and charts and making them responsive, so they look their best on mobiles and tablets and of course on desktop.

This guide is suitable for those with experience editing in a Content Management System (CMS). However, if you’re not that familiar with the CMS then your organisation’s IT or web support team can help you.

We’re going to walk you through using the example of embedding an interactive tool we published recently.

Using an iframe to embed 

We have published an interactive tool to help you find out more about your local authority area and how it compares with others against a range of indicators. 

You can embed the tool, and many other ONS data visualisation and interactives, in your own website by clicking where it says “embed code”.  

Subnational indicators tool with the embed code showing

This creates an iframe which will show the ONS interactive if you copy it to your own website or content management system.

Chart titles and subtitles are not copied over, so you can add your own above the iframe in text. 

Here’s the code in full:


<iframe 
height="1847px" width="100%" src="https://www.ons.gov.uk/visualisations/dvc1786/app/index.html">
</iframe> 

 

This sets the height of the window at 1,847 pixels and the width to 100%, meaning it will fill the whole width of the screen.

You can change those manually if you need to. 

However, the iframe alone may not be the best experience if you have a lot of readers viewing your content on mobile phones, using their fingers and thumbs rather than a mouse.

On smaller screens, the interactive will still display but will include scroll bars and require your users to swipe to see parts of the chart.

There’s an easy way to improve this.

Screenshot of subnational indicators tool with scrollbar showing

 

Making an ONS embed responsive 

At the ONS, we use a javascript library called pym.js to make charts and interactives responsive.

This means that the interactives re-size and re-shape to fit any screen they’re displayed on. 

Screenshot of subnational indicators tool in responsive style

Instead of using just the iframe code, you could try using the following.  

The only bits that you need to be change are what you’re calling it (in the example below we’ve called it “example”) and the URL of the visualisation you’re embedding.  

For this to work, your content management system will need to allow inline scripts.  If you’re not that confident using a CMS you might want to ask your developer or web support team for some advice and help.

<div id='example'></div> 

<script type='text/javascript' src='https://cdn.ons.gov.uk/vendor/pym/1.3.2/pym.min.js'></script> 

<script> 

var pymParent = 
new pym.Parent('example', 'https://www.ons.gov.uk/visualisations/dvc1786/app/index.html', {}); 

</script> 

Code breakdown 

Let’s break the code down into sections: 

<div id="example"></div> 

This is creating a  <div> , which is used as a container for HTML elements. We’re giving it an “id” of “example” but you can call it whatever you need to. If you’re using more than one interactive on the same page, you’ll need to give each one a unique “id” 

<script type="text/javascript" src=" https://cdn.ons.gov.uk/vendor/pym/1.3.2/pym.min.js "></script> 

This is loading the pym.js script from the ONS website. You can keep this bit exactly the same and use it whenever you want to embed one of our responsive interactive tools, maps or charts. 

You could also make a copy of pym.js to host on your own server by visiting nprapps.org, where you can find more ways to use it and see examples of how other websites have done so.  

<script> 

var pymParent = 
new pym.Parent('example', 'https://www.ons.gov.uk/visualisations/dvc1786/app/index.html', {}); 

</script> 

This first bit: 

var pymParent = 
new pym.Parent('example',  

is telling pym.js that the page where we are embedding the interactive is the “parent” . We’re using the div id we made earlier (“example”) to say where we want the interactive to go.  

The next bit will be familiar as it’s the link to the visualisation: 

'https://www.ons.gov.uk/visualisations/dvc1786/app/index.html'

This is what is known as the “child” page. You can get these links under our visualisations on our website. 

The final bits of code:

, {}); 

</script> 

are just to say that we are not using any optional extras and to close the script. 

Try it yourself 

If you want to practise and see how it all looks, try opening a plain text editor like Notepad, write some text and then paste some of the code. 

Save it as a .html file extension (File>Save as>filename .html), not as a .txt extension. 

Then, open it in your browser and see what happens when you make the window smaller. 

We believe this method should work for most platforms. 

If you find it doesn’t, and you want to be able to embed our interactive data visualisation, please get in touch with us at digitalcontent@ons.gov.uk and let us know what issues you’re having. 

2 comments on “Embedding ONS interactives in your website”

  1. JASON TILLYARD -

    As opposed to the whole embed/iframe approach could a simple link to the relevant Census website be used as an alternative ?
    In addition – and most pertinently if the embed/iframe approach has to be done – is all of the content concerned fully WCAG V2.1 compliant ?

    1. Hi Jason and thanks for your comment. We provide the embed and iframe so that users can include our interactives and other data visualisation on their own websites without having to direct their readers to leave. The tools we build are in line with our accessibility statement so will meet AA or above on accessibility and comply with WCAG 2.1. However, we don’t have any involvement in how others use iframes on their websites.

Leave a comment

Your email address will not be published.