Hotspots

Hotspots are clickable areas you place on FlipBook pages. They let you add interactivity that the source PDF or image can't provide on its own — a "Buy Now" button on a catalog page, a video popup on a product diagram, a jump-to-page link from a table of contents, or a description popup with extra detail.

What hotspots can do

Each hotspot has an action that fires when a reader clicks it:

Action

What happens

Info Popup

A popup opens with a title, description, optional image, optional price, and an optional call-to-action button

Link / URL

Opens a URL in the same tab or a new tab

Jump to Page

Jumps the FlipBook to a specific page

Media

Plays a video or audio file in a popup

Hotspots are also visually customizable — color, opacity, icon, tooltip text — so they fit your design or stay subtle.

When to use hotspots

Common uses:

Product catalogs — clickable product images that open a "Shop Now" popup with price and link.
Course materials — a video popup on a diagram explaining the concept.
Maps and infographics — clickable regions that show details.
Tables of contents — jump-to-page links instead of scrolling.
Interactive ads — a hotspot on a brand logo that opens the brand's landing page.

Adding hotspots — the visual editor

The fastest way to add hotspots is the visual editor, which renders your FlipBook pages and lets you draw hotspots directly on top.

Step-by-step

Open your FlipBook for editing.
Switch to the Advanced tab in the metabox.
Find the Hotspots section.
Click Open Visual Editor.
The editor opens in a popup with:
- Your FlipBook rendered on the left (page-by-page).
- A toolbar at the top with hotspot type icons.
- A right sidebar showing settings for the selected hotspot.
Navigate to the page where you want the hotspot using the page navigator at the bottom.
Pick the hotspot type in the toolbar (Pin or Area).
Click and drag on the page to place and size the hotspot.
Configure the hotspot using the right sidebar (see settings below).
Click Save in the top-right corner.

The hotspot is now live on that page.

Pin vs. Area

Two visual styles for hotspots:

A small circular marker placed at a single point. Best for:

Marking a specific spot (an object in a photo, a location on a map).
Subtle, small interactive cues.

Area

A rectangular zone with optional fill or border. Best for:

Larger interactive regions (a product photo, a button-like area).
Areas that visually invite clicking ("Click this image to learn more").

All hotspot settings

Both Pin and Area hotspots share these settings (in the right sidebar of the visual editor):

Common settings

Setting

What it does

Page

Which page the hotspot appears on. Auto-set to the page you clicked.

X / Y

Top-left position as a percentage of the page (0-100%). Edit numerically for pixel-perfect alignment.

Width / Height

Size as a percentage of the page (Area hotspots only).

Color

Tint color for the hotspot fill or pin.

Opacity

0–100% transparency. 0 = invisible, 100 = solid.

Icon

Optional icon shown inside Pin hotspots or in the corner of Area hotspots.

Tooltip

Hover text shown when the reader hovers over the hotspot.

Action-specific settings

After you pick an Action (Info Popup, Link, Jump to Page, Media), the sidebar shows additional fields specific to that action.

Info Popup action

A popup with rich content. Configure:

Title — heading at the top of the popup.
Description — body text (supports basic formatting).
Image (optional) — image shown above the description.
Price (optional) — small price tag, useful for product hotspots.
CTA Button Text (optional) — call-to-action button at the bottom of the popup.
CTA Button URL (optional) — where the CTA button leads.
CTA Button Target — same tab or new tab.

Link / URL action

Configure:

URL — where clicking the hotspot leads (e.g. https://example.com/products/123).
Target — same tab or new tab.
Nofollow — add rel="nofollow" to the link (useful for SEO control).

Jump to Page action

Configure:

Target Page — the page the FlipBook jumps to when clicked.
Transition — animate the flip (default) or jump instantly.

This is the action used to make a table of contents clickable, or to provide "back to top" navigation on long FlipBooks.

Media action

Plays an audio or video file. Configure:

Media File — upload or pick from the media library. Supports MP4, WebM, MP3, OGG.
Autoplay — start playing automatically when the popup opens.
Loop — restart the media when it finishes.
Controls — show playback controls (play, pause, seek, volume).
Poster (video only) — preview image shown before play.

Positioning by percentage

Hotspot positions are stored as percentages of the page width and height (not pixels). This means:

Hotspots stay correctly positioned at any zoom level. A hotspot at "50% from left, 30% from top" stays in the same spot whether the reader views the FlipBook at 100% zoom or 300% zoom.
Hotspots stay correctly positioned at any screen size. Mobile, tablet, and desktop all show the hotspot in the same spot relative to the page.

If you need exact pixel alignment, you can edit the X, Y, Width, Height values numerically in the right sidebar (they accept decimals like 12.5%).

Reordering, copying, and deleting

In the visual editor:

Click an existing hotspot to select it (its outline turns blue and the right sidebar fills with its settings).
Drag a selected hotspot to move it.
Drag a corner handle to resize an Area hotspot.
Press Delete (or backspace) to remove the selected hotspot.
Right-click → Duplicate to make a copy (useful for similar hotspots in different pages).

Performance

Hotspots are only rendered into the DOM when the spread containing them is visible. A FlipBook with hundreds of hotspots remains lightweight — only a handful are ever active in the page at once.

There's no practical limit on the number of hotspots per FlipBook, but UX-wise, more than 5-10 hotspots per page becomes visually cluttered.

Hotspots and import/export

When you export a FlipBook to JSON (FlipBooks → Toolkit → Export), every hotspot — including its image and media file references — is bundled into the JSON. Import on another site and the hotspots are recreated with the new attachment IDs automatically.

For details, see Export and Import.

Hotspots and the SEO / Read Aloud experience

Hotspot content (popup titles, descriptions) is not currently included in:

Search results — text search inside the FlipBook only indexes PDF page text.
Read Aloud — TTS doesn't pause to read hotspot popups.

If a hotspot's content matters for SEO, repeat it in the underlying PDF page or in the surrounding page content.

Hotspots and accessibility

The visual editor places hotspots at fixed positions, which means screen-reader users may not know they exist. To improve accessibility:

Always set a descriptive Tooltip — screen readers announce tooltips when focus reaches the hotspot.
Use the Info Popup action with a clear title and description for any rich-content hotspot.
For purely decorative hotspots, lower the opacity so they're visually subtle.

Troubleshooting

My hotspots don't appear when I open the visual editor. Save your FlipBook first (publish or save draft) — the editor needs a saved FlipBook to load the PDF. Then open the visual editor.

Hotspots appear in the wrong position.

If you placed the hotspot at 50%/30% but it looks off, your PDF may have unusual margins. Adjust the X/Y values numerically.
Hotspots positioned on pages that no longer exist (e.g. you swapped to a shorter PDF) won't appear on the front end.

Hotspot popup doesn't open on click.

Confirm the hotspot has an Action set in its settings.
For Media hotspots, confirm the media file URL works (open it directly in a new tab to verify).

Popup content is missing or cut off. The popup auto-sizes to its content. If your popup has a very long description, scroll inside the popup — or shorten the description.

Hotspot is invisible on the front end. Opacity might be set too low. Bring it up to at least 20-30% so it's visible. Or, if you want a transparent hotspot but still clickable, set opacity to 0.01 — clicks still register but it's visually invisible.

Cannot delete a hotspot. Click it once to select (the outline turns blue), then press Delete or the trash icon in the right sidebar.

Next steps

Page Videos — videos that play on top of the page (instead of in a popup)
Creating a FlipBook — Overview — full editor walkthrough
Display and Appearance — match hotspot colors to your brand