How to embed Flourish charts in your CMS

This tutorial will walk you through embedding a specific sample Flourish chart or story in your CMS – check out this help doc for some more general information on exporting and embedding.

For test purposes, here are two links to a published sample visualisation and a published story. There are two ways you can then publish these on your site.

In this article

    With a script, iframe or AMP embed
    To embed using a script, iframe or AMP embed, simply grab the embed code upon publishing your visualization or story, or in the top right corner of the showcase page. 
    We recommend using our script embed because it adjusts its height dynamically to fit its contents. This means your chart won't appear flattened. You can change the width and height settings by clicking "More options”.
    If your website does not allow script embeds, you can also find basic iframe and AMP iframe embed codes. (Note that these iframe embeds will have a fixed height, which will not suit all some templates.)
    The visualization's script embed code – the recommended embed code – from our example looks like this:  
    <div class="flourish-embed flourish-chart" data-src="visualisation/1354785" data-url="" aria-label=""><script src=""></script></div>
    And the story's looks like this:
    <div class="flourish-embed" data-src="story/187069" data-url="" aria-label=""><script src=""></script></div>
    Once you've copied this embed code, all you need to do is paste it in your CMS. Some systems allow you to switch to HTML mode – This is where you could just paste the entire embed code – while others only allow you to add links which will be wrapped into an iframe, or something similar. We recommend trying with the script embed first, and if that doesn't work, trying with an iframe embed. If that doesn't work, you might have to ask your web team if it's possible to embed things using embed codes.
    Note your visualization or story will show up with a "Made with Flourish" credit when embedded on a Free or Personal plan – You will need to upgrade to a Business or Enterprise plan to be able to embed a chart or story without the credit

    By downloading the HTML and hosting it directly on your site
    Note this option is only available on Personal, Business and Enterprise plans. You can find out more about our different pricing plans here.
    To host your Flourish visualizations or stories directly on your site, you can download a ZIP containing the files you will need to do so upon publishing your visualization or story.

    You can download an example ZIP to try this out for a Flourish visualization and a Flourish story by following the links provided. 
    The downloaded ZIP will contain different HTML, CSS and JavaScript files that you will need to host your visualization or story. It will also contain a file called how_to_embed_me.txt. Follow the steps specified in that file to successfully host your visualization or story.