Elementor Addon for TNC FlipBook Classic
The Elementor Addon integrates TNC FlipBook (or the free TNC PDF Viewer) with Elementor's drag-and-drop builder. After activation, all FlipBook widgets are available directly in the Elementor editor — no shortcodes to copy, no IDs to remember.
This addon is for the TNC FlipBook Classic plugin (and the free TNC PDF Viewer). If you're on TNC FlipBook 3D, use the Elementor Addon for TNC FlipBook 3D instead.
Requirements
- WordPress 5.6 or later.
- Elementor (free or Pro).
- An active TNC FlipBook Classic license, or the free TNC PDF Viewer plugin from WordPress.org.
Installation
- Buy the Elementor Addon from CodeCanyon or your ThemeNcode purchase dashboard and download the zip.
- In WordPress go to Plugins → Add New → Upload Plugin and upload the zip.
- Activate the plugin.
- Make sure Elementor and TNC FlipBook / TNC PDF Viewer are both active and up to date.
After activation, open any page in Elementor and search for PDF in the widgets panel — the FlipBook widgets appear under their own category.
The five widgets
PDF Viewer Embed Widget
Drop this widget anywhere to display a fully interactive PDF viewer or FlipBook inline on your page. Select your PDF from the dropdown, then adjust sizing, toolbar position, and appearance. Supports zoom, page navigation, share, print, and download. Works smoothly across desktop, tablet, and mobile.
Best for: product manuals, magazines, brochures shown directly in the page flow.
PDF Viewer Link Widget
Creates a text link or button that opens the FlipBook in a popup, a new tab, or the same tab. Customize the link text, target behavior, and styling so it blends into your content. Great for offering downloads or extra reading without cluttering the page.
Best for: call-to-action buttons, menu items, sidebar promos.
PDF Viewer Image Link Widget
Uses an image as the clickable trigger. Upload a cover image (or thumbnail) and link it to a PDF; the image opens the FlipBook in a popup or new tab when clicked.
Best for: catalog grids, downloadable resource thumbnails, hero banners.
Bookshelf Display Widget
Shows multiple PDFs or FlipBooks in an attractive bookshelf-style layout. Visitors browse the spines visually and click to open each title in a popup. Ideal for digital catalogs or document portfolios.
Requires: the separate Display Addon.
List/Grid Display Widget
Generates a filterable list or grid view of your PDFs, organized by category. Configure the layout (list vs. grid), filter taxonomy, and popup behavior. Best for systematically presenting large document collections.
Requires: the separate Display Addon.
Using a widget
- Edit a page in Elementor.
- Search PDF in the widget panel.
- Drag the widget you need onto the canvas.
- In the widget settings, choose the FlipBook from the dropdown.
- Adjust the widget-specific options.
- Click Update.
The widget renders live in the editor, so you can preview before publishing.
Troubleshooting
Widgets not appearing in Elementor. Confirm that the parent plugin (TNC FlipBook or TNC PDF Viewer) and Elementor are both active. Then clear your browser cache, refresh the Elementor editor, and search PDF again.
PDF not loading inside the widget. Check your WordPress upload size limits and confirm the PDF file is accessible from the same domain. Some hosts strip query strings; if your PDF URL contains query parameters, test with a clean URL.
Mobile layout issues. All widgets are responsive by default. If the FlipBook overflows on small screens, set the container's max-width to 100% in Elementor's responsive controls.
Display widgets show "Display Addon required." The Bookshelf and List/Grid widgets need the separate Display Addon to render. Install that addon, then refresh.
Support and licensing
- Updates come through CodeCanyon. You'll see a notification in your WordPress dashboard when a new version is available.
- 6 months of support included with every purchase (extendable).
- For help, open a ticket on the ThemeNcode HelpDesk. Include your purchase code so the team can verify your license.
- Refund policy: see themencode.com/refund-policy.