Catalogues

# Iframing Flipbooks {% hint style="warning" %} **Important:** While it is possible to do, we generally do not recommend iframing catalogs unless you have a specific reason for doing so. * As visitors come from a multitude of devices, including tablets, phones, and desktops, you’ll have to handle the different screen sizes yourself. * Tablets and phones have special requirements to ensure they work when users rotate their device. * The smaller the catalog is, the harder it is for users to read it. By opening up catalogs in a new window, rather than in an iframe, you ensure the users get the best possible reading experience. This being said, if you want or need to embed the flipbook in an ` ``` ## Embedding flipbooks in specific sizes ### 100%×100% size (full viewport size) {% hint style="info" %} **Note:** This is supported on all platforms and is the recommended way of iframing catalogs. {% endhint %} In order to iframe a iPaper catalog, spanning 100% of page, we need to use a specific setup. The markup below shows the essence of what is needed. Firstly, if we set the ` ``` ### Non-100%×100% size {% hint style="warning" %} **Important:** This is only supported for the **iPad** and **Desktop** platforms. On all other platforms it is unsupported. While you may get it to work, expect it to break on certain devices and later on when we change the system. {% endhint %} For these platforms you can specify width in any size you want, even in percentages. Do take care to leave enough space for the user to have a usable experience however. To set the size, you need to change the dimensions on the outer div like this: ```html Catalogues

``` ### Dynamically Resizing Dynamically resizing the div will work. Do make sure you resize the outer element and not the iframe. ### Removing the iPaper User Interface To remove the iPaper user interface, go to **Settings > General > Interface > Hide top bar**.\ Or have a look at [Query String Parameters](https://docs.ipaper.io/query-string-parameters#hidestandardui) {% hint style="info" %} **Note:** All JavaScript events will still be fired, even without the user interface present. {% endhint %} ## Troubleshooting ### There is unexpected whitespace around my flipbook **Symptoms:** There is unexpected whitespace around the flipbook (either vertically or horizontally). When the viewport is resized to a smaller size, the padding proportionally decreases. **Common causes:** The containing element of the `