Boost Engagement: 7 Ways to Use Flourish Player in Presentations

Flourish Player: The Complete Guide to Installation & Setup

1) What Flourish Player is

• Flourish Player is the embeddable runtime used to display Flourish visualizations on web pages via an iframe/script embed. It loads templates, data, and interaction code so published projects run in visitors’ browsers.

2) Prerequisites

• A published Flourish project (Export & publish → Publish).
• Access to the project’s embed code or public URL.
• If self-hosting (Business/Enterprise or legacy Personal), a web server to host downloaded project files.

3) Quick install (standard embed)

1. Publish your project in the Flourish editor: click Export & publish → Publish to share and embed.
2. Copy the embed snippet shown in the publish menu (typical form):

   html
   Copy CodeCopied
   <div class=“flourish-embed flourish-chart” data-src=“visualisation/4853699”>
   <script src=“https://public.flourish.studio/resources/embed.js”></script>
   </div>
   

3. Paste the snippet into the HTML where you want the chart. If you embed multiple Flourish projects, include the embed.js script only once (e.g., in the page head).

4) Options & variants

• Responsive embed (default) — script adjusts iframe height automatically.
• Fixed iframe — available under “More options”; use when your CMS disallows script embeds.
• AMP iframe — for AMP pages (requires valid AMP markup).
• WordPress/Elementor — paste the Flourish URL or use plugins like EmbedPress; Gutenberg auto-embeds the URL on its own line.

5) Self-hosting (downloaded HTML)

1. Available on Business/Enterprise/legacy Personal plans: in Export & publish, choose Download HTML.
2. Unzip and upload files (HTML, JS, data) to your server.
3. Link or iframe the hosted HTML on your site. Self-hosting removes reliance on Flourish’s CDN and allows stricter control.

6) Live data & developer integrations

• Use Flourish Live API or Live data features for dynamic updates (see Flourish developer docs).
• Developer embed pattern: include the embed script once and place placeholder divs with data-src attributes for each visualization.

7) Troubleshooting

• Chart not loading: ensure project is published and data-src ID is correct.
• Mixed content: use https pages and the HTTPS Flourish script.
• Height issues with fixed iframe: adjust height in “More options” or use responsive embed.
• CMS restrictions: use the fixed iframe or platform-specific embed plugin.

8) Credits & licensing

• Flourish requires a credit/link beneath embeds for certain plans — check Export & publish output and your plan’s embed terms.

9) Useful links

• Flourish Help: Exporting, publishing, embedding and sharing
• Developers hub: Embedding introduction & Live API

(If you want, I can generate the exact embed snippet for a sample visualization ID or a WordPress embed step-by-step.)