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="500" 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:
amp-iframetag indicates that this piece of code embeds external content.
srcattribute contains the URL of your published chart.
heightattribute 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
resizableattribute for the responsive display to work correctly.
- The amp-iframe must have an
- The amp-iframe must set the
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 about a year ago