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
  • Overview
  • Publication-related events
  • onPageElementClick
  • onSpreadChange
  • Shop-related events
  • onBasketClick
  • onItemAdd
  • Advanced use
  1. Flipbook JavaScript API
  2. Legacy Javascript API (v2)

Events

PreviousCommandsNextConsent Management

Last updated 1 year ago

Events happen in the iframed flipbook and are emitted to the parent window. Our API catches these emitted events and invoke magic callbacks, which can be used to execute business-specific logic in the parent window, in response to specific events that have occurred in the iframed flipbook.

Overview

Events are dispatched from the iframed flipbook to the Javascript API via window.postMessage(). Once the API receives this event, it then invokes a callback present in the parent window.

Publication-related events

onPageElementClick

Fired when an enrichment/link with a shop item action is clicked.

Note:

Current only shop items will fire this event. Click events on any other enrichments are not emitted.

Property
Type
Description

type

string

The page element type that was clicked on

data

{}

Data associated with the page element

data.title

string

Shop item title

data.description

string

Shop item description

data.productId

string

Shop item product ID

data.price

number

Shop item price

data.amountSelection

boolean

If users are allowed to manually specify an amount before adding to basket

data.packageSize

number

Number of items per package

event

{}

Event data associated with the click event

event.originPage

number

Page number on which the page element is located on

event.originSpreadPages

number[]

Page numbers on which the spread where the page element is located on

event.coordinates.pageX

number

Absolute x coordinate of the click event

event.coordinates.pageY

number

Absolute y coordinate of the click event

event.coordinates.bookX

number

Ratio of the x coordinate relative to book width

event.coordinates.bookY

number

Ratio of the y coordinate relative to book height

onSpreadChange

Fired when a paging event is registered in the flipbook.

Property
Type
Description

currentSpreadPages

number[]

Page numbers that are in the current spread

currentVisiblePages

number[]

Page number(s) that are currently in view. This array may contain one or two numbers, depending if the current view is page- (mobile/tablet in portrait) or spread-based (desktop, or mobile/tablet in landscape).

Shop-related events

onBasketClick

Fired when the basket icon is clicked to reveal the basket in the sidebar. There is no data returned by this event.

onItemAdd

Fired when a shop item has been added to the basket.

Property
Type
Description

title

string

Shop item title

description

string

Shop item description

productId

string

Shop item product ID

price

number

Shop item price

pageIndex

number

Page index where the shop item is located* (see note)

originPage

number

Page number where the shop item is located

quantity

number

Number of items added

packageSize

number

Number of items per package

Note:

Please note that pageIndex starts at 0. So the 1st page of your flipbook will have a pageIndex of 0, page 2 a pageIndex of 1 and so on. To get the actual pagenumber you should use originPage instead.

Advanced use

If you are accustomed to listening to events instead, that is possible with this API: simply bind the event listener to the iframe element:

<iframe src="https://demo.ipaper.io" id="ipaper-flipbook">

The two options presented below are functionally identical.

// Basic option: Using magic callbacks to listen to events
iPaperAPI.onSpreadChange = function(data) {
    console.log(data);
};

// Advanced option: Listening to events in the DOM
document.getElementById('ipaper-flipbook').addEventListener('onSpreadChange', function(data) {
    console.log(data);
});

Refer to on the advanced usage page for a wholesome example.

Event listeners and command triggers