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 over 2 years ago