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
  1. Flipbook JavaScript API

Advanced Usage

Multiple embedded flipbooks

If you have a page containing multiple embedded flipbooks, you can set up an API instance on each of them where you can execute commands and set up subscriptions. Below is an example of a page containing multiple flipbooks each with their own API instance.

<!DOCTYPE html>
  <html>
    <head>
        <title>My page</title>
    </head>
    <body>
        <!-- Embedded Flipbooks -->
        <iframe src="https://demo.ipaper.io" id="myFlipbook"></iframe>
        <iframe src="https://demo.ipaper.io" id="myOtherFlipbook"></iframe>
        
        <!-- JS API embed script -->
        <script src='https://cdn.ipaper.io/flipbooks/api/v3/latest.js'></script>
        
        <!-- Custom script -->
        <script>
            const myFlipbook = document.getElementById('myFlipbook');
            const myFlipbookInstance = iPaperJsApi(myFlipbook, 3);
            myFlipbookInstance.publication.onSpreadChange((result) => {
                console.log('Spread changed in myFlipbook', result);
            });
            
            const myOtherFlipbook= document.getElementById('myOtherFlipbook');
            const myOtherFlipbookInstance= iPaperJsApi(myOtherFlipbook, 3);
            myOtherFlipbookInstance.publication.onSpreadChange((result) => {
                console.log('Spread changed in myOtherFlipbook', result);
            });
        </script>
    </body>
</html>
PreviousSharingNextMigration guide

Last updated 2 years ago