Share or embed a Flourish visualization

So you’ve made a Flourish visualization - congratulations! The next step is to share it with the world. Here’s how.

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.

Publish your visualization on Flourish

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

Publish dialog Publish dialog

One of the great things about publishing on Flourish is that you can then make changes in the editor and then click “republish” when you’re ready to update the shared or embedded version.

Embed it on your own web page

If you’d rather include the visualization in your own web pages, you have two choices.

Option 1: embed from Flourish

This is the simplest way - all you need to do is add a single-line embed code to your web page.

Just click “Export & publish”, then “Publish”. This will give you an embed code that you can copy and paste into your page.

One advantage of embedding from Flourish this way is you can make changes in the editor and then hit “republish” to update the live project embedded on your site.

Publish dialog

The default embed type is a responsive script. This creates an iframe in your page containing your visualization and changes its height dynamically to fit the contents. You can change the width and height settings if you prefer by clicking ”More options”.

If your company or website does not allow script embeds, click ”More options” and choose a basic iframe embed instead. The limitation with this approach is that the embed will be a fixed height, which will not suit some templates.

Option 2: Download and host yourself (paying customers only)

This approach is suitable if you prefer to embed from your own server – for example to put a private project on an intranet, or if your company has a policy of self-hosting all web content.

Publish dialog

Click “Export & publish”, then ”Download HTML”. This will download a zip file (containing HTML, JavaScript, your data, etc) ready to be dropped onto any web server. If you’re not sure how this works, talk to your web development team.

Embed on an AMP page

The process for embedding Flourish visualizations on AMP pages is very similar. Click “Export & publish”, then click on “More options” and choose “AMP”. This will give you code that you can embed in your AMP page. Your page will need to be valid AMP for this to work – see the AMP iframe documentation for details.

AMP embedding option in the publish dialog

To comply with our terms of service, you must also include a Flourish credit and link below the embed, e.g. “Chart made with Flourish“.

Embed in 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 and press Enter, and Medium will automatically convert it to an iframe.

Get an image of your visualization

Sometimes it can be useful to have a simple image of your visualization, e.g. to post on Instagram. The most reliable way to do this is to create a screenshot. First adjust the visualization to the desired size, then screenshot the relevant area of the screen. Tip: the shortcut key to do this is Cmd+Shift+4 (Mac) or Win+Shift+S (Windows 10).

Some templates also provide a “Download image” button in the “Export & publish” menu. This is especially useful for vector graphics templates such as charts and basic maps, which – if you choose to download in SVG format – can be edited in a graphics programme such as Illustrator or Sketch.

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.

Create a video or gif

For more information see here.