# Page htmlContent

Each page can have a `htmlContent` property, which allows you to add any HTML as overlay on a flipbook page. The value of `htmlContent` is a string, here is an example

```javascript
const options = {
    pages: [
        {
            src: "book1/1.jpg", 
            thumb: "book1/thumb1.jpg", 
            htmlContent: '<div>test</div>'
        },
        ...
    ]
}

new Flipbook(container, options)
```

Using `htmlContent` property you can add any HTML content to page. Inline CSS is used for  styling and positioning. For example

{% code overflow="wrap" %}

```html
htmlContent: '<a href="https://real3dflipbook.com" style="position: absolute; top: 100px; left: 100px; color: red; font-size: 20px;">Real3D Flipbook</a>'
```

{% endcode %}

### mp4 Video

{% code overflow="wrap" %}

```html
htmlContent: '<video class="flipbook-page-item" 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 Video

{% code overflow="wrap" %}

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

{% endcode %}

### Internal Link

Link to flipbook page 4

{% code overflow="wrap" %}

```html
htmlContent: '<a class="flipbook-page-item flipbook-page-item-link internalLink" href="#" data-page="4" style="width: 406px; height: 128px; position: absolute; top: 312px; left: 285px;"></a>'
```

{% endcode %}

### External Link

{% code overflow="wrap" %}

```html
htmlContent: '<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 %}

It is possible to add multiple elements, basically any HTML content can be added to pages.

The height of the HTML page overlay is 1000px.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://real3dflipbook.gitbook.io/jquery/interactive-flipbook-pages/page-htmlcontent.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
