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

# Introduction to Custom iFrame

Learn what Custom iFrame is, what it does, and how to get started embedding 100+ external sources in Elementor and Gutenberg. No coding required.


<Image
  src="https://res.cloudinary.com/dcn414hjc/image/upload/v1777227065/CiFIntro_iuzabg.webp"
  alt="Custom iFrame plugin by CoderzStudio. Embed 100+ sources in Elementor and Gutenberg"
  width="1200"
  height="600" priority={true} fetchPriority="high" />

## What Is Custom iFrame?

Custom iFrame is a WordPress plugin by CoderzStudio that lets you embed content from 100+ external platforms directly on your WordPress pages. Paste a URL, choose your settings, and the content appears. No API keys, no shortcodes, no coding.

It works with both Elementor (as a drag-and-drop widget) and the Gutenberg block editor (as a native block). One plugin covers both builders.

## Pick Your Builder

<Columns cols="2">
  <Card title="Embed in Elementor" href="/elementor/embed-anything" icon="layout" horizontal={false}>
    Drag-and-drop widget for Elementor Free and Pro. Full guide hub for every supported platform.
  </Card>
  <Card title="Embed in Gutenberg" href="/gutenberg/embed-anything" icon="edit-3" horizontal={false}>
    Native block for the WordPress block editor. Full guide hub for every supported platform.
  </Card>
</Columns>

## What You Can Embed

Custom iFrame supports videos, audio, documents, maps, social media posts, forms, websites, and more:

<Columns cols="3">
  <Card title="Video" href="/elementor/embed-videos" icon="video">
    YouTube, Vimeo, Wistia, Rumble, Dailymotion, and more.
  </Card>
  <Card title="Audio" href="/elementor/embed-audio" icon="music">
    Spotify, SoundCloud, Boomplay, Spreaker, NRK Radio.
  </Card>
  <Card title="Documents" href="/elementor/embed-documents" icon="file-text">
    PDFs, Google Docs, Sheets, Slides, Forms, Figma, Notion.
  </Card>
  <Card title="Google" href="/elementor/embed-google-services" icon="map-pin">
    Google Maps, Google My Maps, Google Calendar.
  </Card>
  <Card title="Social Media" href="/elementor/embed-social-media" icon="share-2">
    Twitter/X, Facebook, Instagram, LinkedIn posts.
  </Card>
  <Card title="Forms" href="/elementor/embed-forms" icon="clipboard">
    Typeform, HubSpot, JotForm, Calendly.
  </Card>
</Columns>

## Free vs Pro

Custom iFrame is available in a free version and a Pro version. The free plugin covers the core embedding experience. Pro adds advanced controls and visual features.

| Feature | Free | Pro |
|---|---|---|
| Embed from 100+ sources | Yes | Yes |
| Elementor widget | Yes | Yes |
| Gutenberg block | Yes | Yes |
| Auto Height | Yes | Yes |
| Lazy Loading | Yes | Yes |
| Placeholder Image | Yes | Yes |
| Auto-Refresh | Yes | Yes |
| Sandbox and Referrer Policy | Yes | Yes |
| Custom Watermark | No | Yes |
| Device Frame (Desktop, Tablet, Phone) | No | Yes |
| 3D Flipbook PDF Viewer | No | Yes |
| YouTube Advanced Controls | No | Yes |
| Vimeo Advanced Controls | No | Yes |
| Custom iFrame Attributes | No | Yes |

[View Pro pricing](https://customiframe.com/pricing). Plans start at $29 one-time.

## Get Started

Follow these steps to go from install to first embed:

<Steps>
  <Step title="Install the plugin" icon="download" title-type="p">
    Install Custom iFrame Free from WordPress.org. See the [installation guide](/getting-started/installation).
  </Step>
  <Step title="Upgrade to Pro (optional)" icon="zap" title-type="p">
    For advanced controls, install Custom iFrame Pro. See the [Pro activation guide](/getting-started/activate-pro).
  </Step>
  <Step title="Set up your builder" icon="layout" title-type="p">
    Connect Custom iFrame to your page builder:
    - [Set Up in Elementor](/getting-started/elementor-setup)
    - [Set Up in Gutenberg](/getting-started/gutenberg-setup)
  </Step>
  <Step title="Embed your first piece of content" icon="link" title-type="p">
    Pick your platform and follow the guide for your builder. All platform guides are in the Elementor and Gutenberg tabs.
  </Step>
</Steps>

## Troubleshooting

If something is not working, check the troubleshooting guides:

- [iFrame Not Showing](/troubleshooting/iframe-not-showing): blank embed, blocked URL, or wrong source
- [Embed Blocked or Refused](/troubleshooting/embed-blocked): X-Frame-Options or CSP errors
- [iFrame Height Fix](/troubleshooting/iframe-height-fix): content cut off or too much white space
- [PDF Not Loading](/troubleshooting/pdf-not-loading): PDF blank or downloading instead of displaying
- [Mobile Responsive Issues](/troubleshooting/mobile-responsive): display problems on small screens
- [Elementor Compatibility](/troubleshooting/elementor-compatibility): widget missing or not loading

## Need Help?

See the [Getting Support](/getting-started/support) guide for how to reach the Custom iFrame support team or post on the WordPress.org forum.