Blocks and Shortcodes Overview

There are several ways to put a FlipBook on a page, post, or template. Each one works in a different editor or context. This article gives you a complete map of every option so you can pick the right one for your project. Detailed walkthroughs for each method live in their own articles, linked below.

Find your FlipBook's ID first

Before you can embed a FlipBook, you need its ID. The ID is a number WordPress assigns when you publish the FlipBook.

You can find the ID in three places:

The All FlipBooks list — go to FlipBooks → All FlipBooks in your WordPress admin. The ID column shows the number for every FlipBook.
The browser address bar — open a FlipBook for editing and look at the URL. You'll see &post=123 somewhere in it. That 123 is the ID.
The shortcode generator — every FlipBook editor has a built-in shortcode generator below the wizard. Pick your options there and the generator builds the full shortcode for you with the ID already filled in.

The three ways to embed

Method

Best for

Detail article

Gutenberg blocks

The default WordPress block editor

Embedding with Gutenberg Blocks

Shortcodes

The Classic editor, page builders that accept shortcodes, PHP templates, theme widgets

Embedding with Shortcodes

Page builders

Elementor, WPBakery, Avada, Beaver Builder, Bricks, or Breakdance

Embedding with Page Builders

You can mix and match. A site can use blocks on some pages and shortcodes on others — it's just a matter of which editor is open.

The three display styles (across all methods)

No matter which method you pick, you can display a FlipBook in one of three styles:

Inline embed

The FlipBook renders directly in the page, sitting in the content flow like an image or video. Visitors read it without leaving the page. Good for magazines, catalogs, and articles where the FlipBook is the main content.

Block: TNC FlipBook 3D Embed
Shortcode: [tnc-flipbook-3d-embed]

Popup link

A text link or a styled button. Clicking it opens the FlipBook in a centered popup (or in a new tab or the same tab — your choice). The popup overlays the current page; the visitor closes it to return. Good when the FlipBook is supplementary content, like a downloadable resource or a "view brochure" link.

Block: TNC FlipBook 3D Link
Shortcode: [tnc-flipbook-3d-link]

Image link

An image that opens the FlipBook when clicked. You can use a cover image automatically (from the FlipBook's Featured Image) or upload a custom thumbnail. Good for catalog grids, hero banners, and visual lead magnets.

Block: TNC FlipBook 3D Image Link
Shortcode: [tnc-flipbook-3d-image-link]

Quick example of each shortcode

These three shortcodes cover almost every embed scenario. You can copy them, replace the id with your FlipBook's ID, and paste them into any post or page.

[tnc-flipbook-3d-embed id="123" width="100%" height="600px"]

[tnc-flipbook-3d-link id="123" text="Open the catalog" style="button" mode="popup"]

[tnc-flipbook-3d-image-link id="123" cover="true" alt="Read the brochure"]

The next sections show every parameter you can use.

Common parameters (any shortcode)

Every shortcode supports id and class. Everything else depends on which shortcode you're using.

Parameter

Default

What it does

id

required

The FlipBook's post ID

class

(empty)

Extra CSS class for the wrapper element — useful for custom styling

page

(empty)

Page number the FlipBook opens on (defaults to page 1)

Embed shortcode — all parameters

[tnc-flipbook-3d-embed] — renders the FlipBook inline in the page.

Parameter

Default

What it does

id

required

The FlipBook ID

width

per-FlipBook setting

Wrapper width — accepts CSS units like 100%, 800px, 50vw

height

per-FlipBook setting

Wrapper height — accepts 600px, 90vh, etc.

title

(empty)

Iframe title attribute, read by screen readers

page

1

Starting page

language

global

Override the viewer language (e.g. fr, de, ja)

transparent

false

Use a transparent background instead of the theme background

class

(empty)

Extra CSS class on the wrapper

Embed with a "View Fullscreen" link

The embed shortcode can also place a small text or button link above or below the embed that opens the same FlipBook in a popup. This is helpful when the inline embed feels cramped — visitors can still pop it open.

Parameter

Default

What it does

fullscreen_link

false

Show the link (set to true to enable)

fullscreen_link_text

View FlipBook

Link/button label

fullscreen_link_position

above

above or below the embed

fullscreen_link_align

left

left, center, or right

fullscreen_link_mode

popup

popup, new_tab, or same_tab

fullscreen_popup_width

90vw

Popup width (CSS unit)

fullscreen_popup_height

90vh

Popup height

fullscreen_popup_theme

dark

dark or light popup chrome

fullscreen_transparent

false

Transparent popup background

fullscreen_nofollow

false

Add rel="nofollow" to the link

Visual settings (theme, Page Flip effect, flip sound) are configured per FlipBook in the admin — not via shortcode parameters. This keeps shortcodes short and makes sure the same FlipBook always looks the same wherever it's embedded.

Popup link shortcode — all parameters

[tnc-flipbook-3d-link] — renders a text link or a button that opens the FlipBook on click.

Parameter

Default

What it does

id

required

The FlipBook ID

text

View TNC FlipBook 3D

Trigger label

mode

popup

popup, new_tab, or same_tab

style

text

text (plain link) or button (styled button)

popup_width

90vw

Popup width

popup_height

90vh

Popup height

popup_theme

dark

dark or light

page

(empty)

Starting page in the popup

nofollow

false

Add rel="nofollow"

transparent

false

Transparent popup background

class

(empty)

Extra CSS class on the trigger

Picking `mode`

popup — opens an overlay on the same page. Visitors close it to return. Best for most cases.
new_tab — opens the FlipBook in a new browser tab. Keeps the visitor on your page but gives them a full-window reading experience.
same_tab — replaces the current page with the FlipBook URL. Use this when the FlipBook is the destination, not a supplement.

Picking `style`

text — renders as a plain anchor link, inheriting your theme's link styling. Good in body copy.
button — renders as a styled button. Good for call-to-action moments.

Image link shortcode — all parameters

[tnc-flipbook-3d-image-link] — renders an image (or auto-resolved cover) that opens the FlipBook on click.

Parameter

Default

What it does

id

required

The FlipBook ID

cover

true

Auto-resolve the cover from the FlipBook's Featured Image or first image source

image

(empty)

Explicit image URL — overrides cover when set

alt

FlipBook title

Alt text for accessibility

width

(empty)

Image width (CSS unit, e.g. 300px)

mode

popup

popup, new_tab, or same_tab

popup_width

90vw

Popup width

popup_height

90vh

Popup height

popup_theme

dark

dark or light

page

(empty)

Starting page in the popup

nofollow

false

Add rel="nofollow"

transparent

false

Transparent popup background

class

(empty)

Extra CSS class on the wrapper

How `cover` resolution works

When cover="true" (the default) and no image URL is given:

The image link tries to use the FlipBook's Featured Image (set in the FlipBook editor's right sidebar).
If there's no Featured Image, it falls back to the first image source (for image-gallery FlipBooks).
If neither is available, no image renders — set image="..." to provide one manually.

Parameters that were removed

If you're migrating from an older version, four shortcode parameters are no longer accepted:

autoplay
theme
effect
sound

These visual options are now configured per-FlipBook in the admin (or, for theme, by the reader at runtime using the toolbar). Removing them from shortcodes prevents the same FlipBook from looking different on different pages, which used to cause confusion.

Picking between methods

Use this decision tree:

Are you in the Gutenberg block editor? Use a block. Easier to manage, previews live in the editor.
Are you in Elementor, WPBakery, Avada, Beaver, Bricks, or Breakdance? Install the matching page-builder addon. Drag-and-drop, no shortcode editing.
Are you in the Classic editor, a custom widget area, a theme PHP template, or a page builder that accepts raw shortcodes? Use a shortcode.

If unsure, blocks are the most beginner-friendly choice.

Next steps

Embedding with Gutenberg Blocks — block-by-block walkthrough
Embedding with Shortcodes — shortcode-by-shortcode walkthrough with examples
Embedding with Page Builders — which addon to install per builder

Blocks and Shortcodes Overview

Find your FlipBook's ID first

The three ways to embed

The three display styles (across all methods)

Inline embed

Popup link

Image link

Quick example of each shortcode

Common parameters (any shortcode)

Embed shortcode — all parameters

Embed with a "View Fullscreen" link

Popup link shortcode — all parameters

Picking mode

Picking style

Image link shortcode — all parameters

How cover resolution works

Parameters that were removed

Picking between methods

Next steps

Picking `mode`

Picking `style`

How `cover` resolution works