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

# 3D Flipbook PDF Viewer

Display any PDF as an interactive 3D page-flip viewer in Elementor and Gutenberg using Custom iFrame Pro.


## Overview

Custom iFrame 3D Flipbook PDF Viewer turns any embedded PDF into an interactive page-flip experience. Pages animate like a real book when visitors flip through the document. Enable it with a single toggle in the PDF source settings.

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

<Callout kind="info">
  3D Flipbook PDF Viewer is a Pro feature. It requires Custom iFrame Pro (Starter, Studio, or Agency plan). [View pricing](https://customiframe.com/pricing) — plans start at $29 one-time.
</Callout>

## Requirements

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

## Use Cases

The 3D Flipbook view works well for document types where a book-like reading experience adds value:

- Brochures and product catalogues
- Annual reports and company profiles
- Magazines and digital publications
- Ebooks and guides
- Portfolio booklets

For technical documents, manuals, or forms where readers need to search or copy text, use the standard PDF embed instead. See [Embed PDF in Elementor](/elementor/documents/embed-pdf) or [Embed PDF in Gutenberg](/gutenberg/documents/embed-pdf).

## How to Enable 3D Flipbook

### In Elementor

<Steps>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page where you want the flipbook. Click **Edit with Elementor**.
  </Step>
  <Step title="Add the Custom iFrame widget and set Source Type to PDF" icon="file-text" title-type="p">
    Drag the **Custom iFrame** widget onto your page. In the **Content** tab, set **Source Type** to **PDF**.
  </Step>
  <Step title="Add your PDF" icon="upload" title-type="p">
    Choose **File** to upload from your media library, or choose **URL** to paste an external PDF link.
  </Step>
  <Step title="Enable 3D Flipbook View" icon="book-open" title-type="p">
    Find **3D Flipbook View** in the Content tab. Set it to **Yes**. The PDF immediately switches to the animated flipbook layout in the editor.
  </Step>
  <Step title="Set the height and publish" icon="check" title-type="p">
    Set **Height** to at least 500px. Keep **Auto Height** off for a consistent layout. Click **Update** or **Publish**.
  </Step>
</Steps>

### In Gutenberg

<Steps>
  <Step title="Open your page in the block editor" icon="layout" title-type="p">
    Go to the page where you want the flipbook. Click **Edit**.
  </Step>
  <Step title="Add the Custom iFrame block and set Source Type to PDF" icon="file-text" title-type="p">
    Add the **Custom iFrame** block. In the right panel, set **Source Type** to **PDF**.
  </Step>
  <Step title="Add your PDF" icon="upload" title-type="p">
    Choose **File** or **URL** and add your PDF.
  </Step>
  <Step title="Enable 3D Flipbook View" icon="book-open" title-type="p">
    In the block settings panel, find **3D Flipbook View** and toggle it on. The PDF switches to the flipbook layout.
  </Step>
  <Step title="Set the height and publish" icon="check" title-type="p">
    Set **Height** to at least 500px. Keep **Auto Height** off. Click **Update** or **Publish**.
  </Step>
</Steps>

<Callout kind="success">
  The 3D Flipbook PDF Viewer is live. Visitors can flip through pages with an animated book effect.
</Callout>

## Height Recommendations

| Document type | Recommended height |
|---|---|
| A4 portrait | 600–800px |
| Landscape brochure | 450–600px |
| Tall catalogue | 700–900px |

<Callout kind="alert">
  Keep Auto Height off when using 3D Flipbook View. Auto Height can conflict with the flipbook layout and cause sizing issues.
</Callout>

## Standard PDF vs. 3D Flipbook

| Feature | Standard PDF viewer | 3D Flipbook |
|---|---|---|
| Toolbar (zoom, print, download) | Yes | No |
| Page-flip animation | No | Yes |
| Text search inside PDF | Yes | No |
| Works with File source | Yes | Yes |
| Works with URL source | Yes | Yes |
| Requires Pro | No | Yes |

## FAQ

<ExpandableGroup>
  <Expandable title="Does 3D Flipbook work with a PDF URL?" default-open="false">
    Yes. Both **File** (uploaded to your media library) and **URL** (external PDF link) work as sources for the flipbook view.
  </Expandable>
  <Expandable title="Can I use the PDF toolbar with 3D Flipbook enabled?" default-open="false">
    No. Enabling 3D Flipbook View replaces the standard PDF viewer with the flipbook layout. Toolbar controls such as zoom, print, and download are not available in flipbook mode.
  </Expandable>
  <Expandable title="What height should I set for the flipbook?" default-open="false">
    Set height to at least 500px. For A4 documents, 600–800px works well. Keep Auto Height off for a consistent layout.
  </Expandable>
  <Expandable title="Does 3D Flipbook work on mobile?" default-open="false">
    Yes. The flipbook responds to touch swipe gestures on mobile devices. Set a height that fits the expected mobile screen size to keep the flipbook fully visible without scrolling.
  </Expandable>
</ExpandableGroup>

---

## Related Guides

- [3D Flipbook PDF in Elementor](/elementor/documents/embed-3d-flipbook-pdf)
- [Embed PDF in Elementor](/elementor/documents/embed-pdf)
- [Embed PDF in Gutenberg](/gutenberg/documents/embed-pdf)
- [Device Frame Display](/features/device-frame)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)