Embed Flourish in Elementor

Step-by-step guide to embed Flourish in Elementor using the Custom iFrame WordPress plugin. No coding required.

Overview

Custom iFrame lets you embed Flourish in Elementor by pasting any Flourish visualization URL into the widget. Display interactive charts, graphs, and data stories from Flourish directly on your WordPress page.

Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.

Requirements

Custom iFrame plugin installed and active
Elementor installed
A Flourish visualization URL to embed

Step 1: Get the Flourish URL

Open Flourish and find your visualization

Go to flourish.studio and open the chart, graph, or data story you want to embed.

Copy the embed URL

Click Export & Publish in the top-right corner. Copy the embed URL from the dialog.

Install and activate the plugin

Go to your WordPress dashboard. Go to Plugins > Add New. Search for Custom iFrame by Coderz Studio, click Install Now, then click Activate.

Custom iFrame for Elementor WordPress plugin by Coderz Studio on the plugin repository page

Open your page in Elementor

Go to the page where you want the Flourish visualization. Click Edit with Elementor.

Add the Custom iFrame widget

Search for Custom iFrame in the Elementor widget panel. Drag the widget onto the page.

Step 3: Embed Flourish in Elementor

Paste the Flourish URL

Go to the Content tab in the widget settings. Paste the Flourish URL into the Source URL field.

The chart or data visualization loads in the Elementor editor.

Custom iFrame widget in Elementor editor with Flourish visualization URL in Source field and interactive donut charts displayed on the right

Step 4: Adjust Settings and Publish

Height: Set the height to match your Flourish chart layout.

Auto Height: Turn on to let the embed resize automatically based on the chart content.

Scrollbars: Disable scrollbars for a cleaner look on full-width charts.

For full styling options, see the Style Custom iFrame guide. Adjust dimensions, backgrounds, and borders to match your page.

Click Update or Publish. Your Flourish visualization is now live on your WordPress site.

Want to add a custom watermark (Pro) or device frame (Pro)? See the Set Up Custom iFrame in Elementor guide for all widget options.

This guide showed you how to embed Flourish in Elementor using the Custom iFrame plugin. From copying the visualization URL to pasting it into the widget and publishing, the whole setup runs through the Elementor editor without any code.

FAQ

You need a Flourish account to publish the visualization. Once published, anyone with the link can embed it using Custom iFrame.

Yes. Custom iFrame works with any Flourish chart, graph, race bar, or data story. Use the published embed URL from the Export & Publish dialog.

Make sure the visualization is set to public in Flourish. Private visualizations block embedding. See the iFrame Not Showing guide for more help.

It depends on your chart. Start at 500px and adjust to fit. Turn on Auto Height to let the embed size itself automatically.

Also Available For

Embed Sketchfab in Elementor

Embed 3D models and drawings in Elementor.

Embed GFYcat GIF in Elementor

Embed GIFs and short loops in Elementor.

Was this page helpful?

Last updated today

Built with Documentation.AI