Embedding with Page Builders

If you build pages with a page builder, the cleanest way to add a FlipBook is through the matching addon plugin. Each addon adds drag-and-drop FlipBook elements that match the shortcodes, so you don't have to type anything — just drop the element on the canvas and pick a FlipBook from a dropdown.

Supported page builders

A free addon is available for each of the major WordPress page builders:

Builder

Addon plugin

Elementor

Elementor — TNC FlipBook 3D Addon

WPBakery (formerly Visual Composer)

WPBakery — TNC FlipBook 3D Addon

Avada (Fusion Builder)

Avada — TNC FlipBook 3D Addon

Beaver Builder

Beaver Builder — TNC FlipBook 3D Addon

Bricks

Bricks — TNC FlipBook 3D Addon

Breakdance

Breakdance — TNC FlipBook 3D Addon

Don't see your builder? You can still use shortcodes — most builders have a generic Shortcode or HTML element where shortcodes work fine.

Why use the addon instead of a shortcode

  • No typing. Pick the FlipBook from a dropdown of your published FlipBooks. No IDs to look up.
  • Visual editing. Most element options are toggles and dropdowns. No syntax to memorize.
  • Live preview. Most builders render the FlipBook element directly in the editor.
  • Builder-native styling. Use the builder's color, typography, and spacing controls on the wrapper.
  • One source of truth. If you change a FlipBook's settings in the admin, every embedded instance updates automatically.

What each addon adds

After installing and activating an addon, four FlipBook elements appear in your builder's element library, grouped under a TNC FlipBook 3D category:

Element

What it does

FlipBook Embed

Embeds the FlipBook inline on the page

FlipBook Link

Text or button that opens the FlipBook in a popup, new tab, or same tab

FlipBook Image Link

Image (or auto-resolved cover) that opens the FlipBook

BookShelf

Display a collection of FlipBooks as a shelf, grid, or list — requires the BookShelf Addon

Each element's settings mirror the matching shortcode parameters — page, popup width and height, popup theme, transparent background, target mode, nofollow, and CSS classes.

Installation

Same flow for every builder addon:

  1. Open your account at tncflipbook.com and download the addon zip.
  2. In WordPress, go to Plugins → Add New → Upload Plugin.
  3. Upload the zip and click Install Now.
  4. Click Activate.
  5. Make sure both TNC FlipBook 3D (the main plugin) and your page builder are active and up to date.
  6. Edit a page in your builder — the FlipBook elements now appear in the element library, searchable as FlipBook or TNC.

The builder addons are free with any TNC FlipBook 3D license. No separate purchase or license key required — they share the parent plugin's license.

Builder-by-builder usage

Elementor

  1. Edit a page in Elementor.
  2. In the widget panel on the left, search for FlipBook.
  3. Drag FlipBook Embed, FlipBook Link, or FlipBook Image Link onto the canvas.
  4. In the widget settings (left panel), pick the FlipBook from the dropdown.
  5. Configure the widget's options.
  6. Click Update.

Each widget supports Elementor's full design panel (style, advanced, motion effects) on the wrapper.

WPBakery

  1. Edit a page using WPBakery's backend or frontend editor.
  2. Click Add Element.
  3. Search PDF or FlipBook.
  4. Pick the element you need and drag it onto the row.
  5. Pick your FlipBook from the dropdown and configure options.
  6. Save.

Avada (Fusion Builder)

  1. Edit a page in Fusion Builder (Avada theme or Fusion Builder standalone).
  2. Click + Element.
  3. Search FlipBook.
  4. Drop the element onto your column.
  5. Configure and save.

Beaver Builder

  1. Edit a page in Beaver Builder.
  2. Open the modules panel (the + in the top right).
  3. Search FlipBook.
  4. Drag the module onto a row.
  5. Configure and save.

Bricks

  1. Edit a page or template in Bricks Builder.
  2. Click the + to add an element.
  3. Search FlipBook.
  4. Place the element and configure.
  5. Save.

Breakdance

  1. Open a page in Breakdance.
  2. Click + to add an element.
  3. Search FlipBook.
  4. Drop the element and configure.
  5. Save.

Element settings (common to every builder)

Whichever builder you use, the FlipBook elements share the same option set. Below is a complete reference of every option you'll see. The exact label may vary slightly per builder, but the behavior is the same.

FlipBook Embed element

Option

Default

What it does

Select FlipBook

—

The FlipBook to embed (dropdown of published FlipBooks)

Start Page

(empty)

Page the embed opens on

Width

100%

Container width (CSS unit)

Height

600px

Container height

Iframe Title

(empty)

Accessibility title for the iframe

Transparent Background

Off

Transparent instead of theme background

Show Fullscreen Link

Off

Add a "View FlipBook" link above or below the embed

Fullscreen Link Text

View FlipBook

Link label

Fullscreen Link Position

Above

Above or Below the embed

Fullscreen Link Alignment

Left

Left, Center, or Right

Fullscreen Open Mode

Popup

Popup, New Tab, or Same Tab

Fullscreen Popup Width / Height

90vw / 90vh

Popup size when Open Mode = Popup

Fullscreen Popup Theme

Dark

Dark or Light

Fullscreen Nofollow

Off

Add rel="nofollow"

FlipBook Link element

Option

Default

What it does

Select FlipBook

—

Target FlipBook

Link Text

View FlipBook

Button or link label

Link Style

Text

Text (plain link) or Button (styled button)

Open Mode

Popup

Popup, New Tab, or Same Tab

Start Page

(empty)

Opening page

Popup Width / Height

90vw / 90vh

Popup size

Popup Theme

Dark

Dark or Light

Transparent Background

Off

Transparent popup background

Nofollow

Off

Add rel="nofollow"

FlipBook Image Link element

Option

Default

What it does

Select FlipBook

—

Target FlipBook

Use Cover

On

Auto-resolve from FlipBook Featured Image

Custom Image

—

Override cover with an uploaded image

Image Alt Text

FlipBook title

Alt for accessibility/SEO

Image Width

(empty)

CSS width

Open Mode

Popup

Popup, New Tab, or Same Tab

Start Page

(empty)

Opening page

Popup Width / Height

90vw / 90vh

Popup size

Popup Theme

Dark

Dark or Light

Transparent Background

Off

Transparent popup background

Nofollow

Off

Add rel="nofollow"

BookShelf element (requires BookShelf Addon)

Available only when the BookShelf Addon is installed. Options vary depending on display mode but typically include: display mode (3D shelf / 2D shelf / Grid / List), per-page count, sort order, category filter, and search.

Visual settings that are NOT exposed

Four options are deliberately not in the builder elements (or the shortcodes):

  • autoplay
  • theme (dark/light)
  • effect (Page Flip animation)
  • sound (flip sound)

These are configured per-FlipBook in the admin, or by the reader at runtime using the toolbar. Keeping them out of the element settings makes sure the same FlipBook always looks the same wherever it's embedded.

Troubleshooting

The FlipBook elements don't appear in the builder. Confirm both the parent plugin (TNC FlipBook 3D) and your page builder are active and up to date. Clear caches and refresh the editor. For Bricks and Breakdance, also confirm the builder is set to load custom elements.

The FlipBook dropdown is empty. Your FlipBooks must be published (not drafts). Drafts don't appear in the picker. Publish at least one FlipBook and refresh.

The element preview is blank in the editor. Save the page once, then reload the editor. Some builders need a save to refresh element previews.

The FlipBook renders on the back end but not on the front end. Clear all caches (page cache, fragment cache, CDN cache, server cache). Reload the front-end page in an incognito window to rule out cached HTML.

The popup doesn't open. Confirm Open Mode is set to Popup. Check the browser console for JavaScript errors that might block the popup script (usually from a conflicting plugin or a JavaScript optimization plugin combining scripts).

Mobile layout looks broken. The elements are responsive by default. Use the builder's responsive controls to override width/height per breakpoint if needed.

Coexists with other plugins

The TNC FlipBook 3D page-builder addons are scoped to the TNC FlipBook 3D plugin. If you're also running the legacy TNC FlipBook (Classic) plugin, those have separate page-builder addons of their own — install both sets and you'll get distinct element categories that don't clash.

Next steps

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us