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

Step-by-step guide to embed PDF in Gutenberg using the Custom iFrame WordPress plugin. Display documents without forcing downloads. No coding required.


## Overview

Custom iFrame lets you embed PDF in Gutenberg by uploading a file or pasting a PDF URL into the block. Display brochures, reports, and manuals directly on your WordPress page without forcing users to download them.

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 PDF in Elementor](/elementor/documents/embed-pdf) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- WordPress with the Gutenberg block editor
- A PDF file or PDF URL to embed

## Step 1: Install and Activate Custom iFrame

<Steps>
  <Step title="Go to Plugins in your WordPress dashboard" icon="download" title-type="p">
    Go to **Plugins > Add New**.
  </Step>
  <Step title="Install Custom iFrame" icon="search" title-type="p">
    Search for **Custom iFrame by Coderz Studio**. Click **Install Now**, then **Activate**.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1777223431/getting-started/installation/Custom-iFrame-Installation.webp"
      alt="WordPress Add New Plugin screen showing Custom iFrame by Coderz Studio in search results with Install Now button"
      width="1024"
      height="396" priority={true} fetchPriority="high" />
  </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 PDF. 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: Embed PDF in Gutenberg

<Steps>
  <Step title="Set Source Type to PDF" icon="file-text" title-type="p">
    Select the Custom iFrame block. In the right panel, set **Source Type** to **PDF**.
  </Step>
  <Step title="Choose your source" icon="upload" title-type="p">
    Choose **File** to upload a PDF from your WordPress media library (recommended for toolbar customization), or choose **URL** to paste a direct PDF link.
  </Step>
  <Step title="Set the height" icon="move-vertical" title-type="p">
    Set **Height** to fit your layout. Values between 600px and 900px work well for most documents.
  </Step>
</Steps>

## Step 4: Configure Display Options

In the right panel, adjust how the PDF appears on your page:

**Theme:** Choose System Default, Light, Dark, or Custom (with a color picker).

**Zoom:** Set a preset zoom level or enter a value between 50% and 400%.

**Default Scrolling:** Choose Vertical, Horizontal, Wrapped, or Page-by-page.

**Default Spreads:** Set No Spreads, Odd, or Even for booklet-style documents.

**Default Selection Tool:** Choose Text Tool for highlighting and copying, or Hand Tool for click-and-drag scrolling.

## Step 5: Configure Toolbar Settings

Toggle individual toolbar tools on or off in the right panel:

**Toolbar Position:** Set to Top or Bottom.

**Available tools:** Print, Download, Presentation Mode, Copy Text, Add Text, Draw, Add Image, Rotate, Properties.

<Callout kind="info">
  Toolbar customization is only available when Source Type is set to **File**. URL embeds do not support toolbar controls.
</Callout>

## Step 6: Enable Lazy Load

In the block settings, find **Smart Load** and enable **Lazy Load**. The PDF loads only when a visitor scrolls to it, improving page speed.

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

For all block settings, see the [Set Up Custom iFrame in Gutenberg](/getting-started/gutenberg-setup) guide.

This guide showed you how to embed PDF in Gutenberg using the Custom iFrame plugin. From uploading the PDF to configuring display options and publishing, the whole setup runs through the block editor without any code.

## FAQ

<ExpandableGroup>
  <Expandable title="What is the difference between File and URL source types?" default-open="false">
    **File** loads the PDF from your WordPress media library and unlocks toolbar customization (theme, zoom, tools). **URL** embeds a PDF from an external link but does not support toolbar controls.
  </Expandable>
  <Expandable title="Why can't I customize the toolbar?" default-open="false">
    Toolbar customization only works when Source Type is set to **File**. Switch from URL to File if you need toolbar control.
  </Expandable>
  <Expandable title="How do I make the PDF load faster?" default-open="false">
    Enable **Lazy Load** in the Smart Load section. The PDF loads only when a visitor scrolls to it, reducing initial page load time.
  </Expandable>
  <Expandable title="The PDF shows blank. What should I check?" default-open="false">
    Confirm the PDF file is publicly accessible. PDFs behind authentication or on servers with restrictive CORS headers may not load. See [iFrame Not Showing](/troubleshooting/iframe-not-showing) for more help.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed PDF in Elementor" href="/elementor/documents/embed-pdf" icon="layers" horizontal={false}>
    Guide for the Elementor widget.
  </Card>
  <Card title="Embed Google Docs in Gutenberg" href="/gutenberg/documents/embed-google-docs" icon="file-text" horizontal={false}>
    Embed Google Docs in the block editor.
  </Card>
</Columns>

## Related Guides

- [Embed Documents in Gutenberg - Overview](/gutenberg/embed-documents)
- [Embed Google Docs in Gutenberg](/gutenberg/documents/embed-google-docs)
- [Embed Figma in Gutenberg](/gutenberg/documents/embed-figma)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)