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.