> 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 Gutenberg

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


## Overview

Custom iFrame lets you embed documents in Gutenberg from Google Docs, Google Sheets, Google Slides, Figma, PDFs, and more. Paste any document URL into the block. 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 Elementor instead? Follow the [Embed Documents in Elementor](/elementor/embed-documents) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- WordPress with the Gutenberg block editor
- A shareable URL from your document platform

## How to Embed a Document in Gutenberg

All document platforms follow the same three-step process.

### Step 1: Get the Document Link

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

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

### Step 2: Add the Custom iFrame Block

<Steps>
  <Step title="Open your page in the block editor" icon="layout" title-type="p">
    Go to the page or post where you want the document. Click **Edit** to open the Gutenberg block editor.
  </Step>
  <Step title="Add the Custom iFrame block" icon="plus" title-type="p">
    Click the **Add Block** button. Search for **Custom iFrame**. Click the block to add it to the page.
  </Step>
</Steps>

### Step 3: Paste the URL and Publish

<Steps>
  <Step title="Paste the document URL" icon="clipboard" title-type="p">
    In the right panel, paste the URL into the **Source URL** field. The document loads inside the block.
  </Step>
  <Step title="Set height and publish" icon="check" title-type="p">
    Set **Height** to fit the document. 600px to 900px works well 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 Google Docs in Gutenberg" href="/gutenberg/documents/embed-google-docs" icon="file-text" horizontal={false}>
    Display Google Docs reports, guides, and articles on your page.
  </Card>
  <Card title="Embed Google Sheets in Gutenberg" href="/gutenberg/documents/embed-google-sheets" icon="table" horizontal={false}>
    Embed live Google Sheets spreadsheets and data tables.
  </Card>
  <Card title="Embed Google Slides in Gutenberg" href="/gutenberg/documents/embed-google-slides" icon="monitor" horizontal={false}>
    Display Google Slides presentations and decks.
  </Card>
  <Card title="Embed Google Forms in Gutenberg" href="/gutenberg/documents/embed-google-forms" icon="clipboard" horizontal={false}>
    Add Google Forms surveys and quizzes to your page.
  </Card>
  <Card title="Embed Figma Prototype in Gutenberg" href="/gutenberg/documents/embed-figma" icon="figma" horizontal={false}>
    Display interactive Figma design prototypes.
  </Card>
  <Card title="Embed PDF in Gutenberg" href="/gutenberg/documents/embed-pdf" icon="book-open" horizontal={false}>
    Embed PDFs with toolbar controls and theme options.
  </Card>
</Columns>

## Also in Elementor

All document platforms are also supported in the Elementor widget editor.

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

## Related Guides

- [Getting Started: Install Custom iFrame](/getting-started/installation)
- [Gutenberg Block Setup](/getting-started/gutenberg-setup)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)