Embedding with Shortcodes

Shortcodes are the universal way to put a FlipBook anywhere WordPress accepts content — the Classic editor, theme widgets, page builder code blocks, custom HTML containers, and even PHP templates. There are three shortcodes, one for each display style.

Before you start

You'll need your FlipBook's post ID. To find it:

Go to FlipBooks → All FlipBooks and look at the ID column, or
Open the FlipBook for editing and check the URL: the part &post=123 contains the ID, or
Use the shortcode generator built into each FlipBook editor — it builds the full shortcode for you, no typing required.

The three shortcodes

Shortcode

Display style

[tnc-flipbook-3d-embed]

Inline embed — FlipBook renders directly in the page

[tnc-flipbook-3d-link]

Popup link — text or button that opens the FlipBook

[tnc-flipbook-3d-image-link]

Image link — image that opens the FlipBook on click

Pick the one matching what you want, then jump to the relevant section below for the full parameter list.

`[tnc-flipbook-3d-embed]` — inline embed

Renders the FlipBook directly in the page or post.

Basic example

[tnc-flipbook-3d-embed id="123"]

Replace 123 with your FlipBook's ID. That's all you need — the FlipBook will render at the size configured per-FlipBook in the admin.

Common example with size

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

Full parameter list

Parameter

Default

What it does

id

required

The FlipBook's post ID

width

per-FlipBook

Container width — accepts CSS units (100%, 800px, 50vw)

height

per-FlipBook

Container height — accepts CSS units (600px, 90vh)

title

(empty)

Iframe title attribute, read by screen readers

page

1

Starting page number

language

global

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

transparent

false

Transparent background instead of theme background

class

(empty)

Extra CSS class on the wrapper element

Adding a "View Fullscreen" link

The embed can include a link above or below the embed that opens the same FlipBook in a popup. Useful when the inline embed feels too small to read comfortably.

Parameter

Default

What it does

fullscreen_link

false

Set to true to show the link

fullscreen_link_text

View FlipBook

Link 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

fullscreen_popup_height

90vh

Popup height

fullscreen_popup_theme

dark

dark or light

fullscreen_transparent

false

Transparent popup background

fullscreen_nofollow

false

Add rel="nofollow" to the link

Example with fullscreen link:

[tnc-flipbook-3d-embed id="123" height="500px"
  fullscreen_link="true"
  fullscreen_link_text="Open in full screen"
  fullscreen_link_position="below"
  fullscreen_link_align="center"]

`[tnc-flipbook-3d-link]` — popup link or button

Renders a text link or a styled button. Clicking it opens the FlipBook.

Basic example

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

Button example

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

Full parameter list

Parameter

Default

What it does

id

required

The FlipBook ID

text

View TNC FlipBook 3D

The link/button label

mode

popup

popup, new_tab, or same_tab — see below

style

text

text (plain link) or button (styled button)

popup_width

90vw

Popup width (only when mode="popup")

popup_height

90vh

Popup height

popup_theme

dark

dark or light popup chrome

page

(empty)

Starting page when the popup opens

nofollow

false

Add rel="nofollow" to the link

transparent

false

Transparent popup background

class

(empty)

Extra CSS class on the trigger

Picking `mode`

Mode

Behavior

When to use

popup

Overlay covers the page; close to return

Default for most cases

new_tab

New browser tab opens with the FlipBook

When the FlipBook deserves a full window

same_tab

Current page replaced by FlipBook URL

When the FlipBook is the destination

Picking `style`

Style

Look

When to use

text

Plain link, inherits your theme's link style

In body copy, inline with text

button

Styled button

Call-to-action moments, sidebars, hero areas

`[tnc-flipbook-3d-image-link]` — image link

Renders an image (or auto-resolved cover) that opens the FlipBook on click.

Basic example with auto-cover

[tnc-flipbook-3d-image-link id="123" cover="true"]

This uses the FlipBook's Featured Image as the clickable thumbnail.

Example with custom image

[tnc-flipbook-3d-image-link
  id="123"
  image="https://example.com/wp-content/uploads/cover.jpg"
  alt="Read our 2024 catalog"
  width="300px"]

Full parameter list

Parameter

Default

What it does

id

required

The FlipBook ID

cover

true

Auto-resolve cover from Featured Image or first image source

image

(empty)

Explicit image URL — overrides cover when set

alt

FlipBook title

Alt text for accessibility and SEO

width

(empty)

Image width (CSS unit)

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

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 shortcode tries 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 source image (for image-gallery FlipBooks).
If neither exists, nothing renders. Either set a Featured Image on the FlipBook, or pass an image="..." URL.

The shortcode generator

You don't have to memorize parameter names. Every FlipBook editor has a built-in shortcode generator below the wizard:

Open the FlipBook for editing.
Scroll down to the Shortcode metabox.
Pick the embed type (Embed, Link, or Image Link).
Toggle the options you want.
The generated shortcode updates live. Click Copy to copy it to your clipboard.

This is the fastest way to build complex shortcodes without typos.

Removed parameters

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 by the reader at runtime using the toolbar). Removing them from shortcodes prevents the same FlipBook from looking different on different pages.

Where you can use shortcodes

Shortcodes work anywhere WordPress runs do_shortcode():

Classic editor — paste the shortcode directly into the post body
Block editor — use the built-in Shortcode block from WordPress, then paste your shortcode
Theme widgets — text widgets, custom HTML widgets, sidebar widgets
Page builders — most builders have a "Shortcode" or "HTML" element
PHP templates — wrap with <?php echo do_shortcode('[tnc-flipbook-3d-embed id="123"]'); ?>

Troubleshooting

Shortcode shows as plain text on the front end. Either the plugin is deactivated, or your theme/page builder is stripping shortcodes. Confirm the plugin is active. If you're in a page builder, look for a "Shortcode" or "Text" element rather than a code/HTML element that doesn't execute shortcodes.

The FlipBook doesn't load — empty space appears. Open your browser's developer console (Right-click → Inspect → Console) and look for JavaScript errors. Common causes: a conflicting plugin script, a theme issue, or a cache plugin combining scripts incorrectly. Try defining script-handle exclusions in your cache plugin.

The popup doesn't open when I click the link. Confirm mode="popup" (the default). If still no popup, check the browser console — another script is likely blocking it.

Image-link shortcode doesn't show an image. With cover="true", the FlipBook needs a Featured Image. Set one in the FlipBook editor (right sidebar → Featured Image). Or pass image="https://..." explicitly.

The shortcode generator doesn't appear on the FlipBook editor. Scroll down past the main metabox tabs. If still missing, screen options may be hiding it — click Screen Options at the top of the editor and make sure the Shortcode metabox is checked.

Next steps

Embedding with Gutenberg Blocks — the block-editor equivalents
Embedding with Page Builders — when you're in Elementor, WPBakery, etc.
Blocks and Shortcodes Overview — decide which method fits your editor

Embedding with Shortcodes

Before you start

The three shortcodes

[tnc-flipbook-3d-embed] — inline embed

Basic example

Common example with size

Full parameter list

Adding a "View Fullscreen" link

[tnc-flipbook-3d-link] — popup link or button

Basic example

Button example

Full parameter list

Picking mode

Picking style

[tnc-flipbook-3d-image-link] — image link

Basic example with auto-cover

Example with custom image

Full parameter list

How cover resolution works

The shortcode generator

Removed parameters

Where you can use shortcodes

Troubleshooting

Next steps

`[tnc-flipbook-3d-embed]` — inline embed

`[tnc-flipbook-3d-link]` — popup link or button

Picking `mode`

Picking `style`

`[tnc-flipbook-3d-image-link]` — image link

How `cover` resolution works