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.

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. The fix is plain HTML content about the chart in your page, rendered at build or publish time.

Getting the chart's content

Every published, non-password-protected visualisation has a machine-readable copy that updates on every publish:

https://public.flourish.studio/visualisation/{id}/visualisation.json

For example, you could extract:

• the chart's displayed title (state.layout.title), falling back to the project name (name)
• the description (state.layout.screenreader_text_primary), written in the editor's accessibility settings; this key is only present when a description has been written
• the underlying data (data), an object keyed by dataset; single-dataset templates expose data.data, and each dataset is an array of row arrays with the header row first

Some templates also include a top-level metadata object that describes the columns. Inspect your visualisation's JSON before writing the code that turns it into HTML, as the exact contents depend on the template.

What you extract and render is up to you.

Making chart content AI-readable

Whatever you choose to show:

• Keep it visible, or in a collapsed <details> block, placed beside the embed — not inside iframe tags, since AI pipelines discard those.
• Avoid the words "embed" and "hidden" in class and id names, and write descriptions as full sentences; some pipelines filter fragments out as boilerplate.
• Prefer readers not to see it? Hide it with a line of JavaScript after page load, never with CSS or attributes in the markup (display: none, off-screen positioning). AI tools read the raw HTML but don't run scripts, while statically hidden text is stripped by some pipelines and is against Google's spam policies.
• If you link to the interactive version or the data, use the URL itself as the link text; some AI tools only see link text, not link targets.

What may change

AI tools change behaviour within months, so re-check periodically. Fetch your page with curl, confirm your content is in the raw HTML, then ask an assistant what your chart shows.

The visualisation.json endpoint is the stable contract. We're exploring ways to make chart content available to AI tools automatically.

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