LogoLogo
  • iPaper Technical Documentation
  • Display Analytics
    • Google Analytics
  • Display JavaScript API
    • Quick Start
    • Commands
    • Events
  • Flipbook Analytics
    • Adobe Analytics events
    • Google Analytics / GTM events
  • Flipbook Backend API
    • Overview
    • Return Codes
    • Ecommerce
      • GetFlipbookOrdersByType
      • GetLicenseOrdersByType
    • Image
      • GetImageWith2PxDropShadow
    • Link
      • GetLinks
    • Media
      • CreateDirectory
      • DeleteDirectory
      • DeleteFile
      • GetTree
      • UploadFile
    • Paper
      • ChangePaperUrl
      • ClearPublicationPeriod
      • CreateCategory
      • CreatePaper
      • CreatePreviewToken
      • DeletePaper
      • GetAllPapers
      • GetPaperIDFromUrl
      • GetPaperStructure
      • GetPaperUrlFromID
      • GetSetting
      • GetSettingDescriptions
      • MovePaper
      • SetPublicationPeriod
      • SetSetting
    • Ripper
      • GetProcessingPapers
      • GetProcessingStatus
      • ProcessPDF
      • ReprocessPaper
    • Search
      • SearchPapersByContent
      • SearchPapersByCustomFields
      • SearchPapersWithHiearchyByContent
      • SearchPapersWithHiearchyByName
    • Statistics
      • GetNumberOfPageviewsPerDay
      • GetNumberOfVisitors
      • GetNumberOfVisitorsPerDay
  • Flipbook Enrichment
    • Popup Content
    • Popup Frame
  • Flipbook Integration
    • Custom Domain
    • Custom Mail
    • Embedding flipbooks inside iOS and Android App
    • Form Integration
    • Iframing Flipbooks
    • iPaper Embed Script (Pop-ups)
    • Embeds (Minipapers)
    • Query String Parameters
    • Remote Authentication
    • Shop Export
  • Flipbook JavaScript API
    • Getting Started
    • Commands & Events
      • Basket
      • Consent
        • Example Implementations
          • UserCentrics
          • OneTrust
          • CookieInformation
          • Cookiebot
      • Paging
      • Publication
      • Search
      • Table of Contents
      • Sharing
    • Advanced Usage
    • Migration guide
    • Legacy Javascript API (v2)
      • Quick Start
      • Commands
      • Events
      • Consent Management
      • Advanced Usage
  • Technical Information
    • Cookie Information
    • Common security questions
    • Open Source
Powered by GitBook
On this page
  • Description
  • Redirecting to an alternative URL
  • Preserving aspect ratio
  1. Flipbook Integration

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:

<!-- 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

target

_self, _blank, _parent, _top

_blank

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:

Preserving aspect ratio

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>
PreviousiPaper Embed Script (Pop-ups)NextQuery String Parameters

Last updated 1 year ago

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 . Example: <MinipaperEmbedUrl>?targetUrl=https%3A%2F%2Fipaper.io%2F

Changes the behavior of the anchor element that determines where to display the linked URL. . Example: <MinipaperEmbedUrl>?target=_self

As per specification, all values in query strings must be properly . There are several online tools for encoding text for use in query strings, for example: .

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 , 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.

URL-encoded
https://meyerweb.com/eric/tools/dencoder/
padding-bottom trick
URL encoded
Read more about the specification for target attribute