Exporting, publishing, embedding and sharing

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

In this article

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 preview buttons. To do this:

1
Click Export & publish in the top right corner, and then Publish to share and embed. 

2

You will then see a box like this, asking if you want to "Allow anyone to duplicate this project and data". Checking this box will add a Duplicate and edit button to the public visualization page (read more here). 

If you do check this option, when published, the Export & publish window will show you that this option has been chosen. To prevent the project from being duplicable, just hit Republish and uncheck the box. 

If you are on a Business plan, you will also have the option to password-protect your visualization at this stage.

3

Once you've published to Flourish, the Export & publish button will change from black to green. If there are unpublished changes to your visualization or story, Export & publish will change to orange, and a new Republish button will 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. Please note 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").

Read more about different embed options in our help doc.

2
Download and host your project

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.

If you prefer to embed from your own server (and not Flourish's), 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 into 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. Most templates do have a Download image option in the Export & publish menu, but the most reliable way to get a static image is to take a screenshot.

TIP: The keyboard shortcut on Mac is Cmd+Shift+4, and on Windows 10 is Win+Shift+S.

Read more about image downloads here.

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.

Related Articles