Google AMP

Datawrapper visualizations can be embedded in Google AMP articles, and display correctly on devices of all screen sizes. To do that, you need to ensure that your website's AMP markup follows the official guidelines for resizable iframes in AMP. Here's an example of a Datawrapper embed in AMP:

<amp-iframe
  width="100"
  height="100"
  layout="responsive"
  sandbox="allow-scripts allow-same-origin"
  resizable
  src="https://datawrapper.dwcdn.net/bdqZJ/2/">
  
  <div overflow tabindex="0" role="button" aria-label="View more">
    View more
  </div>
</amp-iframe>

Let's break down the parts of this embed code:

  • The amp-iframe tag indicates that this piece of code embeds external content.
  • The src attribute contains the URL of your published chart.
  • The height attribute corresponds to the height that will initially be set to display the chart. However, the chart will resize itself if needed to avoid scroll bars or whitespace, so you can set this to a fixed value.
  • The amp-iframe must be defined with the resizable attribute for the responsive display to work correctly.
  • The amp-iframe must have an overflow child element.
  • The amp-iframe must set the allow-same-origin sandbox attribute.

The AMP standard requires the iframed website to send out messages with the desired height of the embed. Datawrapper embeds will do that automatically, and you don't have to set anything up to ensure correct display.

Updated almost 2 years ago