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 visualization and a published story. There are two ways you can then publish these on your site.

In this article

    1
    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 prior to exporting.
    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.)

    TIP: Read more about the different embed options in this help doc.

    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/11597006?70747"><script src="https://public.flourish.studio/resources/embed.js"></script></div>
    While the iframe embed code looks like this: 
    <iframe src='https://flo.uri.sh/visualisation/11597006/embed' title='Interactive or visual content' class='flourish-embed-iframe' frameborder='0' scrolling='no' style='width:100%;height:600px;' sandbox='allow-same-origin allow-forms allow-scripts allow-downloads allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation'></iframe>

    And the story's script embed code looks like this: 

    <div class="flourish-embed" data-src="story/1724689?70747"><script src="https://public.flourish.studio/resources/embed.js"></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 plan – you will need to upgrade to a Business or Enterprise plan to be able to embed a chart or story without the credit.


    2
    By downloading the HTML and hosting it directly on your site

    Note: This option is only available on Business and Enterprise plans, as well as legacy Personal 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.

Related Articles