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