# 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:

{% code overflow="wrap" %}

```markup
<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>
```

{% endcode %}

### Internal link

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

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

{% code overflow="wrap" %}

```html
<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>
```

{% endcode %}

### Spotlight  link

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

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

{% code overflow="wrap" %}

```html
<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>
```

{% endcode %}

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

{% code overflow="wrap" %}

```html
<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>
```

{% endcode %}

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

{% code overflow="wrap" %}

```html
<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>
```

{% endcode %}

### .mp4 video

Video player example:

{% code overflow="wrap" %}

```markup
<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>
```

{% endcode %}

### Youtube&#x20;

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

{% code overflow="wrap" %}

```markup
<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>
```

{% endcode %}

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

## <mark style="color:blue;">**Page Editor Addon (for Real3D Flipbook Pro)**</mark>

For easier adding of interactive content to flipbook pages (video, sound, links, iframes, Youtube) check out the visual editor for Real3D Flipbook pages [<mark style="color:blue;">**Page Editor Addon**</mark>](https://real3dflipbook.gitbook.io/wp/broken-reference)

{% embed url="<https://www.youtube.com/watch?v=UfvSlfxXuIQ>" %}
Page Editor Addon for Real3D Flipbook
{% endembed %}

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.