Responsive iframe

The easiest way to embed visualizations created with Datawrapper is to use the Responsive iframe embed code that is provided in the Publish step once you have published your visualization:

You can copy & paste the responsive embed code into your website or CMS. It consists of HTML and JavaScript code snippets, so in order for it to display correctly, make sure to paste it into the actual code or HTML view in your article, not in the visual or text view.

Considerations for ensuring your embeds are responsive

The embed code consists of two blocks:

• An iframe block: This contains your visualization itself
• A JavaScript block: This takes care of making sure your embed is responsive

📘

Important: Do not remove the JavaScript from the responsive iframe

The JavaScript block is crucial to make sure your embed will display correctly on both desktop and mobile devices, and must be included.

If your CMS does not allow inline Javascript, see the section Working with Javascript restrictions below.

What the JavaScript does, and why it's there:

When you embed a Datawrapper graphic, it may need different amounts of vertical space depending on whether your readers access your article with a mobile device or a desktop computer.

For example, line breaks in the headline might result in the visualization taking up more space on mobile:

The JavaScript part of the embed code is there to ensure that the iframe is always the correct size, and isn't cut off on mobile, doesn't have scrollbars, and doesn't have too much white space underneath it on desktop.

It does this by adding an event listener that listens to messages from the iframe about the required height and adjusting it accordingly.

📘

If you've noticed any of these issues with Datawrapper embeds on your website, this is a good indication that the JavaScript is missing or not working. This might be because:

• Your CMS is stripping it out automatically
• Your CMS is making changes to the contents of the embed code, which are breaking the functionality

If you're noticing this behaviour, we suggest you contact your CMS administrator, or look into the alternative solution outlined in the section Working with Javascript restrictions below.

Constructing a responsive embed code

A typical responsive embed code might look like this:

<iframe title="European countries with lowest &amp;amp; highest voter turnout" aria-label="Bar Chart" id="datawrapper-chart-bdqZJ" src="https://datawrapper.dwcdn.net/bdqZJ/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="359"></iframe><script type="text/javascript">!function(){"use strict";window.addEventListener("message",(function(e){if(void 0!==e.data["datawrapper-height"]){var t=document.querySelectorAll("iframe");for(var a in e.data["datawrapper-height"])for(var r=0;r<t.length;r++){if(t[r].contentWindow===e.source)t[r].style.height=e.data["datawrapper-height"][a]+"px"}}}))}();</script>

This code is minified, which means that unneeded whitespace and extra characters are trimmed. This is good to ensure that your page loads quickly, but it makes it harder to understand what's actually going on. Below, you can find the raw, unminified source code of the responsive embed code for this chart:

<iframe title="European countries with lowest &amp;amp; highest voter turnout" aria-label="Bar Chart" id="datawrapper-chart-bdqZJ" src="https://datawrapper.dwcdn.net/bdqZJ/1/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="359">

<script type="text/javascript">
window.addEventListener('message', function(event) {
    if (typeof event.data['datawrapper-height'] !== 'undefined') {
        var iframes = document.querySelectorAll('iframe');
        for (var chartId in event.data['datawrapper-height']) {
            for (var i = 0; i < iframes.length; i++) {
                if (iframes[i].contentWindow === event.source) {
                    var iframe = iframes[i]
                    iframe.style.height = event.data['datawrapper-height'][chartId] + 'px';
                }
            }
        }
    }
});
</script>

What you can see is the iframe for the chart itself, as well as the JavaScript block which handles the display of the chart on mobile devices.

The <script> section is the same for every embed. The <iframe> attributes will vary from chart to chart:

Working with JavaScript restrictions

In cases where you cannot embed JavaScript directly in your CMS, an alternative solution is to configure your CMS to automatically include the JavaScript snippet in the <head> of every page (or every page that contains a Datawrapper embed).

The script below only needs to be included once per page, and will automatically make all Datawrapper embeds on that page responsive.

<script type="text/javascript">!function(){"use strict";window.addEventListener("message",(function(e){if(void 0!==e.data["datawrapper-height"]){var t=document.querySelectorAll("iframe");for(var a in e.data["datawrapper-height"])for(var r=0;r<t.length;r++){if(t[r].contentWindow===e.source)t[r].style.height=e.data["datawrapper-height"][a]+"px"}}}))}();</script>

This snippet is the exact same snippet that is included with every Responsive iframe embed code generated by Datawrapper, and as the non-minified example above.

Loading the resizing script from our CDN

If you prefer not to hardcode our snippet on your page, it can be loaded directly from our CDN. Both the minified and non-minified versions are available.

Importing the minified snippet:

<script type="text/javascript" src="http://datawrapper.dwcdn.net/lib/embed.min.js"></script>

Importing the non-minified snippet:

<script type="text/javascript" src="http://datawrapper.dwcdn.net/lib/embed.js"></script>

Alternative: JavaScript-only embed

To embed a visualization without an iframe, you can also include the embed.js file of the respective visualization directly, in order to embed the visualization as a web component:

<script type="text/javascript" src="http://datawrapper.dwcdn.net/%chart_id%/%chart_public_version%/embed.js"></script>