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 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/29601929"><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/29601929"></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.

For most accounts the copied code now has a third part — a fallback element after the placeholder:

<div class="flourish-fallback" data-for="visualisation/29601929"><a href="https://public.flourish.studio/visualisation/29601929/visualisation.json?ref=embed-script">https://public.flourish.studio/visualisation/29601929/visualisation.json?ref=embed-script</a></div>

Your readers never see it; it exists for AI tools reading the raw HTML. AI visibility of Flourish embeds covers when it's included and how it behaves.

Why can't AI tools see my chart?

A Flourish embed is a placeholder plus a script that builds the chart in the browser. AI assistants and crawlers usually read a page's raw HTML once and don't run JavaScript, so to them the chart doesn't exist. There are two complementary fixes — the built-in fallback link and rendering the chart's content into your page — covered in AI visibility of Flourish embeds.

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