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, copy the embed code of your visualization or story. If you need to refresh your memory on how publishing and embedding projects works in Flourish you can read through this help document.
-
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"><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"><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. -
It is also possible to supply a whitelisted domain on which the script embed will work on self-hosted projects so that you can achieve a variable height embed. You can host the flourish.embed.js script on a separate domain, and then head to your company's page to configure it.