Exporting, publishing, embedding and sharing

So you’ve made something using Flourish – congratulations! The next step is to share it with the world.

Note: If you’re on a free account, your draft project and data will be publicly visible on the web, even before you publish your project. To make them private, upgrade to a private account.

If you're publishing on a Business or Enterprise account, grabbing the embed code from the published showcase page will always append a Flourish credit to your visualization. To avoid this, copy the embed code from inside the editor to get the visualization without credit.

Publishing your visualization or story to Flourish

When you’re ready to share your project, the easiest option is to publish it to Flourish. This will create a public page containing your project, plus some share and embed buttons. To do this, just click “Export & publish” in the top right corner, and then “Publish to share and embed”. 

Once you've published to Flourish, the "Export & publish" button should change from black to green. If there are unpublished changes to your visualization or story, "Export & publish" should change to orange, and a new "Republish" button should appear.

Embedding your project on a web page

If want to include your visualization or story on your own web page, you have two options.

1
Use a Flourish embed code

This is the simplest way – all you need to do is add a single-line embed code to your web page. It's also the most flexible, as you can make changes in the editor and then hit “Republish” to update the live project embedded on your site.

Once a project is published, an embed code that you can copy and paste onto your page should appear in the green "Export & publish" menu.

The default option is a responsive script, which creates an iframe on your page, containing your visualization, that adjusts its height dynamically to fit its contents. You can change the width and height settings by clicking "More options”.

If your website does not allow script embeds, under ”More options”, you can also find basic iframe and AMP iframe embed codes. Know that these iframe embeds will have a fixed height, which will not suit some templates. Also note that, for the AMP iframe, your page will need to be valid AMP for the embed to work. (See the AMP iframe documentation for more details.) To comply with our terms of service, you must also include a Flourish credit and link below the iframes (for example, "Chart made with Flourish").

2
Download and host your project (Paying customers only)

If you prefer to embed from your own server (and not Flourish's) and you're a paying customer, you can download and host your project. 

In the menu that appears when you click “Export & publish”, near the bottom, there is a ”Download HTML” option. Clicking this will download a zip file (containing HTML, JavaScript, your data, and a couple of other bits of information) that should be ready to be dropped onto any web server. If you’re not sure how this works, talk to your web development team.

Embedding on Medium

Although Medium will not let you paste in HTML like our embed code, you can still embed Flourish visualizations in Medium posts. Simply paste the visualization URL on a new line, press Enter and Medium will automatically convert it to an iframe.

Getting an image of your visualization

Sometimes it can be useful to have a static image of your visualization – for example, if you want to post it on Instagram. The most reliable way to do this is to take a screenshot. (Tip: The keyboard shortcut on Mac is "Cmd+Shift+4", and on Windows 10 is "Win+Shift+S").

Some templates also provide a “Download image” option in that “Export & publish” menu. Most templates support PNG and JPEG downloads, and some support SVG.

Please note that except on our business and enterprise plans, it’s strictly required to include a link back to Flourish wherever you publish or embed an image of a Flourish graphic.