> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt).
> Use it to discover all available pages before exploring further.

# 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](/getting-started/installation)
- Elementor installed
- A Flourish visualization URL to embed

## Step 1: Get the Flourish URL

<Steps>
  <Step title="Open Flourish and find your visualization" icon="bar-chart" title-type="p">
    Go to [flourish.studio](https://flourish.studio) and open the chart, graph, or data story you want to embed.
  </Step>
  <Step title="Copy the embed URL" icon="link" title-type="p">
    Click **Export & Publish** in the top-right corner. Copy the embed URL from the dialog.
  </Step>
</Steps>

## Step 2: Add the Custom iFrame Widget in Elementor

<Steps>
  <Step title="Install and activate the plugin" icon="download" title-type="p">
    Go to your WordPress dashboard. Go to **Plugins > Add New**. Search for **Custom iFrame by Coderz Studio**, click **Install Now**, then click **Activate**.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776999062/elementor/other/flourish/cif-plugin-banner.png"
      alt="Custom iFrame for Elementor WordPress plugin by Coderz Studio on the plugin repository page"
      width="814"
      height="334" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page where you want the Flourish visualization. Click **Edit with Elementor**.
  </Step>
  <Step title="Add the Custom iFrame widget" icon="plus" title-type="p">
    Search for **Custom iFrame** in the Elementor widget panel. Drag the widget onto the page.
  </Step>
</Steps>

## Step 3: Embed Flourish in Elementor

<Steps>
  <Step title="Paste the Flourish URL" icon="clipboard" title-type="p">
    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.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776999064/elementor/other/flourish/widget-embed-flourish.webp"
      alt="Custom iFrame widget in Elementor editor with Flourish visualization URL in Source field and interactive donut charts displayed on the right"
      width="1024"
      height="634" priority={true} fetchPriority="high" />
  </Step>
</Steps>

## 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](/getting-started/styling) guide. Adjust dimensions, backgrounds, and borders to match your page.

<Callout kind="success">
  Click **Update** or **Publish**. Your Flourish visualization is now live on your WordPress site.
</Callout>

Want to add a custom watermark (Pro) or device frame (Pro)? See the [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup) 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

<ExpandableGroup>
  <Expandable title="Do I need a Flourish account to embed?" default-open="false">
    You need a Flourish account to publish the visualization. Once published, anyone with the link can embed it using Custom iFrame.
  </Expandable>
  <Expandable title="Can I embed any Flourish chart type?" default-open="false">
    Yes. Custom iFrame works with any Flourish chart, graph, race bar, or data story. Use the published embed URL from the Export & Publish dialog.
  </Expandable>
  <Expandable title="The Flourish chart is not loading. What should I do?" default-open="false">
    Make sure the visualization is set to public in Flourish. Private visualizations block embedding. See the [iFrame Not Showing guide](/troubleshooting/iframe-not-showing) for more help.
  </Expandable>
  <Expandable title="What height should I use for a Flourish chart?" default-open="false">
    It depends on your chart. Start at 500px and adjust to fit. Turn on Auto Height to let the embed size itself automatically.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed Sketchfab in Elementor" href="/elementor/other/embed-sketchfab" icon="box" horizontal={false}>
    Embed 3D models and drawings in Elementor.
  </Card>
  <Card title="Embed GFYcat GIF in Elementor" href="/elementor/other/embed-gfycat" icon="film" horizontal={false}>
    Embed GIFs and short loops in Elementor.
  </Card>
</Columns>

## Related Guides

- [Elementor Other Embeds Overview](/elementor/embed-other)
- [Embed Sketchfab in Elementor](/elementor/other/embed-sketchfab)
- [Embed GFYcat GIF in Elementor](/elementor/other/embed-gfycat)
- [Style Custom iFrame](/getting-started/styling)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)