Interactive Flipbook Pages

After pages are added to flipbook you can edit each page by clicking on page thumbnail:

Edit Flipbook > Pages, hover over the page and click Edit

Title

Page title will appear in table of content. If the page title is empty the page will not be listed in table of content.

HTML Content

Add any HTML content to a page, that will be rendered on a separate layer on top of the page image.

You can add any HTML and style it with inline CSS. You can also add inline javascript.

Use inline CSS for size and position of elements, like in examples below. HTML content layer has default height of 1000px.

Below are examples of different elements added to flipbook page, as raw HTML.

External Link

CSS class flipbook-page-item flipbook-page-item-link

Example of link that opens external URL in new tab:

<a class="flipbook-page-item flipbook-page-item-link" href="https://real3dflipbook.com" target="_blank" style="width: 206px; height: 40px; position: absolute; top: 893px; left: 64px;"></a>

Internal link

CSS class flipbook-page-item flipbook-page-item-link internalLink

Example of internal link that flips to flipbook page 2 on click:

<a class="flipbook-page-item flipbook-page-item-link internalLink" href="#" data-page="2" style="width: 309px; height: 163px; position: absolute; top: 835px; left: 395px;"></a>

Spotlight link

CSS class flipbook-page-item flipbook-page-item-link spotlight

Example of link that opens an .mp4 video in lightbox overlay:

<a class="flipbook-page-item flipbook-page-item-link spotlight" href="#" data-url="https://real3dflipbook.com/wp-content/uploads/2020/03/interior_design.mp4" style="width: 252px; height: 152px; position: absolute; top: 300px; left: 28px; cursor: pointer;"></a>

Example of spotlight link that opens youtube video in lightbox overlay:

<a class="flipbook-page-item flipbook-page-item-link spotlight" href="#" data-url="https://www.youtube.com/embed/Cv1W4nzxPBM" style="width: 256px; height: 136px; position: absolute; top: 455px; left: 25px; cursor: pointer;"></a>

Example of spotlight link that opens an image in lightbox overlay:

<a class="flipbook-page-item flipbook-page-item-link spotlight" href="#" data-url="https://real3dflipbook.com/wp-content/uploads/2020/03/kitchen.webp" style="width: 634px; height: 373px; position: absolute; top: 104px; left: 37px; cursor: pointer;"></a>

.mp4 video

Video player example:

<video class="flipbook-page-item flipbook-page-item-video" playsinline="" loop="" autoplay="" muted="" style="top:313px;left:40px;width:230px;height:128px;"><source type="video/mp4" src="https://real3dflipbook.com/wp-content/uploads/2020/03/interior_design.mp4"></video>

Youtube

Example of youtube video added to page, by adding Youtube embed code, with added inline CSS for size and position:

<iframe class="flipbook-page-item flipbook-page-item-youtube" src="https://www.youtube.com/embed/Cv1W4nzxPBM?enablejsapi=1&amp;autoplay=1&amp;mute=1" style="top:454px;left:43px;width:226px;height:126px;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

The same way you can add any iframe, or any other HTML on flipbook page.

Page Editor Addon (for Real3D Flipbook Pro)

For easier adding of interactive content to flipbook pages (video, sound, links, iframes, Youtube) check out the visual editor for Real3D Flipbook pages Page Editor Addon

With this addon you can add links, videos, sounds and embed codes to flipbook pages. Each element is draggable and resizable so you can easily position the elements. This addon also enables live preview of page HTML content.