# Embeds (Minipapers)

## Description

Minipapers is a method for which to easily embed a miniaturized version of a flipbook on your website. The following view options are available:

* **Perspective**—displays a three-dimensional flipbook
* **Single page**—displays a single page on the flipbook
* **Spread**—displays a spread on the flipbook
* **Page slider**—displays an animated slider showing pages and spreads of a pre-defined page range

Once integrated on your website, clicking on a minipaper will redirect the user to the actual flipbook being displayed.

## Redirecting to an alternative URL

It is possible to override the default link action and target when a user clicks on the embedded minipaper. This behavior can be configured by appending relevant query strings to the URL found in the `src` attribute of the `<iframe>` element in the embed code. For example, given the following embed snippet:

```html
<!-- iPaper snippet start -->
<iframe
    style="display: block;"
    src="<MinipaperEmbedUrl>"
    scrolling="no"
    frameborder="0"></iframe>
<!-- iPaper snippet end -->
```

The URL to be modified will be the string `<MinipaperEmbedUrl>`. The following query strings are supported:

<table><thead><tr><th width="156">Key</th><th width="168">Accepted values</th><th width="165">Default value</th><th>Description</th></tr></thead><tbody><tr><td><code>targetUrl</code></td><td><code>string</code></td><td>The public URL of the flipbook</td><td>Changes the URL that users are redirected to when an embedded minipaper is clicked on. The URL must be fully qualified, starting with <code>http://</code> or <code>https://</code>, and be <a href="https://en.wikipedia.org/wiki/Percent-encoding">URL encoded</a>.<br><br>Example:<br><code>&#x3C;MinipaperEmbedUrl>?targetUrl=https%3A%2F%2Fipaper.io%2F</code></td></tr><tr><td><code>target</code></td><td><code>_self</code>, <code>_blank</code>, <code>_parent</code>, <code>_top</code></td><td><code>_blank</code></td><td>Changes the behavior of the anchor element that determines where to display the linked URL. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target">Read more about the specification for <code>target</code> attribute</a>.<br><br>Example:<br><code>&#x3C;MinipaperEmbedUrl>?target=_self</code></td></tr></tbody></table>

If you want multiple query string keys to be attached to the URL, you can separate them using the `&` character, i.e.: `<MinipaperEmbedUrl>?targetUrl=<Url>&target=<Target>`. The order of the queries does not matter.

{% hint style="info" %}
**Note:**&#x20;

As per specification, **all values in query strings must be properly** [**URL-encoded**](https://en.wikipedia.org/wiki/Percent-encoding). There are several online tools for encoding text for use in query strings, for example: <https://meyerweb.com/eric/tools/dencoder/>.
{% endhint %}

## Preserving aspect ratio

If you want to preserve the aspect ratio of the embedded minipaper, so that it is scaled proportionately in a page with responsive design, we suggest using the [`padding-bottom` trick](https://css-tricks.com/aspect-ratio-boxes/), which will force an aspect ratio of your choice on the surrounding container. The element displaying the minipaper—the `<iframe>` element—should then be positioned absolutely relative to this container.

For example, if a 2:1 ratio is desired for a container, `padding-bottom: 50%` should be used:

```html
<div style="position: relative; width: 100%; padding-bottom: 50%;">
    <!-- iPaper snippet start -->
    <iframe
        style="display: block; width: 100%; height: 100%;"
        src="<MinipaperEmbedUrl>"
        scrolling="no"
        frameborder="0"></iframe>
    <!-- iPaper snippet end -->
</div>
```