Embeds (Minipapers)
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.
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:<!-- 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:Key | Accepted values | Default value | Description |
|---|---|---|---|
targetUrl | string | The public URL of the flipbook | Changes the URL that users are redirected to when an embedded minipaper is clicked on. The URL must be fully qualified, starting with http:// or https://, and be URL encoded.
Example:
<MinipaperEmbedUrl>?targetUrl=https%3A%2F%2Fipaper.io%2F |
target | _self, _blank, _parent, _top | _blank | Changes the behavior of the anchor element that determines where to display the linked URL. Read more about the specification for target attribute.
Example:
<MinipaperEmbedUrl>?target=_self |
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.Note:
As per specification, all values in query strings must be properly URL-encoded. There are several online tools for encoding text for use in query strings, for example: https://meyerweb.com/eric/tools/dencoder/.
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, 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:<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>