> 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 Documents in Elementor

Guides for embedding PDFs, Google Docs, Sheets, Slides, Figma, Notion, and more in Elementor using the Custom iFrame WordPress plugin. No coding required.


## Overview

Custom iFrame lets you embed documents in Elementor from Google Docs, Google Sheets, Google Slides, PDFs, Figma, Notion, and more. Paste any document URL into the widget. No API keys, no shortcodes, no coding required.

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

Using Gutenberg instead? Follow the [Embed Documents in Gutenberg](/gutenberg/embed-documents) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- Elementor installed
- A document URL from any supported platform

## How to Embed a Document in Elementor

All document platforms follow the same three-step process.

### Step 1: Get Your Document Link

<Steps>
  <Step title="Open your document platform" icon="file-text" title-type="p">
    Go to the platform where your document lives: Google Drive, Figma, Notion, or any other supported source.
  </Step>
  <Step title="Copy the embed or publish link" icon="link" title-type="p">
    Use the platform's share or publish option to get a public embed URL. Copy it to your clipboard.

    Each platform guide below shows exactly which link to copy.
  </Step>
</Steps>

### Step 2: Add the Custom iFrame Widget

<Steps>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page where you want the document. Click **Edit with Elementor**.
  </Step>
  <Step title="Drag the widget onto your page" icon="move" title-type="p">
    Search for **Custom iFrame** in the Elementor widget panel. Drag the widget into your layout.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867149/getting-started/elementor-setup/Guide-Add-Custom-iFrame.webp"
      alt="Custom iFrame widget being dragged from the Elementor panel into a page section in the editor"
      width="1024"
      height="337" priority={true} fetchPriority="high" />
  </Step>
</Steps>

### Step 3: Paste the URL and Publish

<Steps>
  <Step title="Paste the document URL" icon="clipboard" title-type="p">
    In the Content tab, paste the URL into the **Source URL** field. The document appears in the editor.
  </Step>
  <Step title="Set height and publish" icon="check" title-type="p">
    Set **Height** to match your document. 600px to 800px works for most documents. Click **Update** or **Publish**.
  </Step>
</Steps>

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

## Supported Document Platforms

Select your platform for a step-by-step embed guide.

<Columns cols="2">
  <Card title="Embed PDF in Elementor" href="/elementor/documents/embed-pdf" icon="file" horizontal={false}>
    Display PDFs inline without forcing downloads.
  </Card>
  <Card title="Embed Google Docs in Elementor" href="/elementor/documents/embed-google-docs" icon="file-text" horizontal={false}>
    Embed published Google Docs directly on your page.
  </Card>
  <Card title="Embed Google Sheet in Elementor" href="/elementor/documents/embed-google-sheets" icon="table" horizontal={false}>
    Display live spreadsheet data from Google Sheets.
  </Card>
  <Card title="Embed Google Slides in Elementor" href="/elementor/documents/embed-google-slides" icon="presentation" horizontal={false}>
    Embed presentations, portfolios, and reports from Google Slides.
  </Card>
  <Card title="Embed Google Form in Elementor" href="/elementor/documents/embed-google-forms" icon="clipboard" horizontal={false}>
    Collect form responses without leaving your WordPress page.
  </Card>
  <Card title="Embed Figma Prototype in Elementor" href="/elementor/documents/embed-figma" icon="figma" horizontal={false}>
    Show interactive design mockups and prototypes from Figma.
  </Card>
  <Card title="Embed Notion Page in Elementor" href="/elementor/documents/embed-notion" icon="book-open" horizontal={false}>
    Share Notion docs, wikis, and databases on your site.
  </Card>
  <Card title="3D Flipbook PDF in Elementor" href="/elementor/documents/embed-3d-flipbook-pdf" icon="book" horizontal={false}>
    Turn static PDFs into interactive 3D page-flip experiences. (Pro)
  </Card>
</Columns>

## Also in Gutenberg

All document platforms are also supported in the WordPress block editor.

See [Embed Documents in Gutenberg](/gutenberg/embed-documents) for all Gutenberg guides.

## Related Guides

- [Embed Anything in Elementor](/elementor/embed-anything)
- [Elementor Widget Setup](/getting-started/elementor-setup)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)