Understanding the difference between Flourish's embed options
Flourish provides three embed options for your visualizations —responsive script embed, AMP iframe, and traditional iframe embedding. Depending on your webpage's CMS, you can choose the most suitable option for you, however, we always recommend using our script embed option. Find out why below.
Responsive Script Embed
Once you publish your chart, you will notice that an embed code is automatically generated.
One key feature of Flourish is that it offers fully responsive embedded content. It works like this: the visualization inside the iframe sends a message to the parent page about what height it should be at any given moment. This provides ideal results because it takes into account the screen's aspect ratio —so your visualization looks great on both desktop and mobile.
It is our most recommended embed method, with more than 95% of our customers using it.
AMP Iframe Embed
In cases when your webpage's CMS has been set to block script embeds, we also provide iframe embed codes. You can find them by clicking on More options:
AMP (Accelerated Mobile Pages) is Google's open-source project built to speed up websites' loading time. However, please note that iframe embeds will have a fixed height, which will not suit some templates. Another thing to take into account for the AMP iframe is whether your page is a valid AMP—otherwise, this embed method wouldn't work. (See the AMP iframe documentation for more details.)
Iframe Embed
This is a traditional Iframe embed method, where the whole code is placed within an iframe tag. As with the AMP Iframe, you should be aware that in this model there is no possibility for the visualization to change the iframe's height, which may lead to a poorer user experience.
If you need to use iframe embeds as opposed to responsive scripts, you can adjust the width and height within the Flourish publishing box:
To comply with our terms of service, you must also include a Flourish credit and link below iframe embeds (for example, "Chart made with Flourish".)
Alternatives to Flourish responsive script embeds
There are a few things you can do to ensure your visualization looks good on any device. You can export your visualizations as images or create videos and GIFs.
Alternatively, you can use oEmbed for integration. oEmbed can be used as an alternative to our embed scripts or iframes and is particularly useful in the context of content management systems, which often prohibit authors from inputting arbitrary markup like script tags. Check our Flourish for developers page to learn more.