Introduction to embedding

The usual way to embed a Flourish graphic is to copy the embed code from the Export & publish menu:

This document explains more sophisticated ways to interact with Flourish graphics, for example if you are integrating Flourish into a Content Management System, or creating a sophisticated document that uses multiple Flourish graphics in complicated ways.

The standard embed code looks something like this:

<div class="flourish-embed flourish-chart" data-src="visualisation/4853699"><script src="https://public.flourish.studio/resources/embed.js"></script></div>

This is composed of two parts, a script:

<script src="https://public.flourish.studio/resources/embed.js"></script>

And a placeholder element:

<div class="flourish-embed flourish-chart" data-src="visualisation/4853699"></div>

If there are multiple Flourish graphics on the same page, in fact it is sufficient to include the script just once. For example, in a CMS integration it could be included as part of the page header.

Learn more about the different embedding options in our help doc.